[]
SpreadJS 在控件的许多区域都支持触摸手势操作。你可以使用触摸手势进行筛选、调整大小、选择、分组以及进行许多其他类型的交互操作。这需要一个触摸屏设备(可以是触摸显示器,或者是带有触摸屏的智能本类型的笔记本电脑)。
支持的浏览器和平台如下:
Windows 桌面系统(Microsoft Internet Explorer 9 及更高版本、谷歌浏览器、火狐浏览器和欧朋浏览器)。
平板电脑 - Surface(Microsoft Internet Explorer 10 及更高版本)。
触摸支持要求小部件支持基本的触摸手势。触摸手势有几种类型,例如基本或常见手势,以及捏合或拉伸手势。
基本触摸手势包括以下几种:
手势 | 描述 |
|---|---|
轻击 | 一根手指触摸屏幕然后抬起。 |
长按 | 一根手指触摸屏幕并保持不动。 |
滑动 | 一根或多根手指触摸屏幕并向同一方向移动。 |
轻扫 | 一根或多根手指触摸屏幕并向同一方向短距离移动。 |
捏合 | 两根或更多根手指触摸屏幕并相互远离或靠近。 |
旋转 | 两根或更多根手指触摸屏幕并以顺时针或逆时针弧线移动。 |
展开 | 两根或更多根手指触摸屏幕并相互远离。 |
SpreadJS 在缩放时使用标准的 “捏合和拉伸” 手势。
你可以在小部件的许多区域以及许多类型的交互中使用触摸支持功能。以下部分将说明哪些地方支持触摸操作。
你可以在自动调整大小(AutoFit)功能中使用触摸手势。
点击列标题,在列标题的右边缘会显示一个调整大小指示器。点击行标题的下边缘,会显示行的调整大小指示器。

双击调整大小指示器,列或行将自动调整大小以适应文本内容。

你可以在单元格处于显示模式或编辑模式时,对单元格类型使用触摸手势。
双击单元格进入编辑模式。
点击单元格以选择它。点击空白区域,会显示超链接和组合框单元格的工具栏。对于按钮和复选框等单元格类型,你需要点击选择指示器上方来显示工具栏,如下图所示。


你可以在拖动和填充操作中使用触摸工具栏。
选择单元格以显示工具栏。

在工具栏中选择 “自动填充”,以在右下角显示拖动填充指示器。此时不再显示选择控制柄。
按住并拖动拖动填充指示器。

抬起手指以填充单元格。

你可以使用触摸手势来编辑允许编辑的单元格。
双击单元格进入编辑模式。
你可以在筛选时使用触摸手势。
点击筛选图标以显示筛选对话框。然后点击选择筛选选项。
以下代码示例创建了一个筛选条件。
var cellrange =new GC.Spread.Sheets.Range(0, 2, 5, 1);
var hideRowFilter =new GC.Spread.Sheets.Filter.HideRowFilter(cellrange);
activeSheet.rowFilter(hideRowFilter);你可以在展开或折叠组时使用触摸手势。
点击组按钮或组标题按钮以展开或折叠一个组。

以下代码示例创建了一个列组和行组。
activeSheet.suspendPaint();
activeSheet.setRowCount(34);
activeSheet.setValue(0,0,"Western");
activeSheet.setValue(0,1,"Western");
activeSheet.setValue(0,2,"Western");
activeSheet.setValue(1,0,"A");
activeSheet.setValue(1,1,"B");
activeSheet.setValue(1,2,"C");
activeSheet.setValue(2,0,"A");
activeSheet.setValue(2,1,"B");
activeSheet.setValue(2,2,"C");
activeSheet.rowOutlines.group(0,2);
activeSheet.columnOutlines.group(0,1);
activeSheet.resumePaint();你可以使用触摸手势来调整列或行的大小。
选择一列或一行(点击选择),按住列或行的调整大小控制柄并滑动以更改宽度或高度,然后松开。

你可以在滚动时使用触摸支持手势。这包括慢速滚动和惯性滚动。
滚动仅支持一个方向(向上、向下、向左或向右)。
你可以通过在视口区域按住一根手指并向一个方向滚动来进行慢速滚动。松开手指即可停止滚动。你可以通过在视口区域按住一根手指,快速向一个方向短距离移动(轻拂),然后松开手指来进行惯性滚动。
你可以在选项卡栏上使用触摸手势。你可以切换选项卡、选择工作表、编辑工作表、调整选项卡栏大小以及滚动。
点击选项卡栏按钮以在选项卡栏中导航。点击选项卡栏中的工作表名称以选择该工作表。双击选项卡栏中的工作表名称以编辑工作表名称。要编辑名称,options.tabEditable 方法必须为 true。点击 新建 选项卡以创建一个工作表。
你可以拖动调整大小条来调整选项卡栏的大小。按住调整大小条,向右拖动,然后松开以调整选项卡栏的大小。

如果选项卡栏区域中显示不下所有工作表,你可以使用平移手势在选项卡栏中的工作表之间滚动。
你可以使用默认的触摸工具栏来剪切、复制、粘贴或自动填充单元格。
点击选定的区域以显示触摸工具栏。以下图片显示了一个默认的触摸工具栏。

你可以在工具栏中添加或删除项目。你还可以自定义工具栏中的图像和文本。你也可以在工具栏中添加分隔符。以下图片显示了一个自定义的触摸工具栏。

以下代码示例向触摸工具栏中添加了一个自定义项目和图像。
spread.touchToolStrip.add(new GC.Spread.Sheets.Touch.TouchToolStripItem("Cut", "Delete", "cut.png", function(){ }))
spread.touchToolStrip.getItem("Cut").font("15px Arial").foreColor("red");
spread.touchToolStrip.add(new GC.Spread.Sheets.Touch.TouchToolStripSeparator());你可以在缩放时使用触摸支持手势。
在 SpreadJS 上按住两根手指。将手指分开以放大视图,或将手指相互靠近以缩小视图。

上面的图片是使用触摸手势放大后的效果,显示了更大的视图。