这个页面展示了如何开始使用Wijmo FlexGrid控件。
在JavaScript应用中开始使用FlexGrid的步骤:
以下将会创建一个具有默认行为的FlexGrid,包括自动生成列,列排序,重新排序,编辑和剪贴板支持。
上面入门的样例没有定义任何列,所以FlexGrid会自动生成它们。
这个样例演示如何使用FlexGrid的initialize方法和columns集合直接定义列。
指定列允许你选择哪些列显示,以及按什么顺序。这也给了你对于每一列的宽度,标题,格式,对齐和其它属性的控制。
在这个样例中,我们使用星形来设置”Country”列的宽度。这告诉列通过拉伸来填充表格的可用宽度,因此没有空余的空间。 在”Revenue”列,我们设置格式属性为”n0”,导致数字是千分位分隔符,并且没有小数位数字。
默认情况下,FlexGrid允许你使用鼠标或键盘选择一个范围的单元格,就像Excel做的那样,selectionMode属性允许你改变这一行为, 因此,你可以选择一行,一个范围内的行,不连续的行(如在一个列表框),一个单元格或者将选择完全禁用。
这个样例允许你从一个Wijmo菜单控件中选择selectionMode。
FlexGrid对快速编辑,单元格内部编辑具有内置的支持,正如你在Excel中。使用控制显示和编辑模式切换的Edit按钮来添加额外的列是没有必要的。
用户可以通过键入任何一个单元格来开始编辑。这样会使单元格处于快速编辑模式。在这种模式下,按下光标键会完成编辑并且选中一个不同的单元格。
另一种开始编辑的方法是用过按F2键或者双击一个单元格。这会是单元格处于完全编辑模式。在这种模式下,按下光标键会在单元格文本中移动光标。 为了完成编辑并且移动到下一个单元格,用户必须按下回车,Tab或者Esc键。
当完成编辑后,数据会自动转换为合适的类型。如果用户输入了无效的数据,编辑会被取消,原始数据会保留在原来的位置。
你可以通过设置表格,列或者行对象的isReadOnly属性来禁止对它们的编辑。在这个样例中,我们将ID列置为只读。
FlexGrid支持分组,通过ICollectionView接口,与.NET中的相同。 为了达到分组的目的,向CollectionView.groupDescriptions属性增加一个或多个GroupDescription对象 并且确保表格的showGroups属性设置为true(默认属性)
GroupDescription对象是灵活的,允许你基于值或者分组函数来对数据进行分组。以下的这个样例按年份对时间分组,按返回的三个范围: 大于5000,500到5000,小于500来对总数分组,其它按值分组。通过菜单可以看到每个分组的效果。
观察”Revenue”列展示了行组的总和。我们是通过设置列的aggregate属性为"Sum"做到的。数据聚合会在你编辑列的值时自动更新。
FlexGrid支持过滤,通过ICollectionView接口,与.NET中的相同。为了达到过滤的目的, 设置CollectionView.filter的属性为一个函数,由这个函数决定那个对象要留在视野中。
在这个样例中,我们创建了一个对于country的过滤,可以通过输入控件来获得过滤后得到的值。
FlexGrid支持分页,通过IPagedCollectionView接口,与.NET中的几乎相同。 为了达到分页的目的,设置IPagedCollectionView.pageSize属性为你想要在每页上展示项目的数量,并且提供一个界面导航的UI。
在这个样例中,我们使用JavaScript在每页展示10个项目。我们增加了导航按钮,并且在按钮单击指令中调用了IPagedCollectionView方法。 注意,我们使用了pageIndex和pageCount属性来展示当前页和总的页数。
ICollectionView接口对当前值有内置的支持,可以让你在FlexGrid中实现主-细节的场景。 你可以引用currentItem并且将它作为页面上任意元素的绑定源。
注意,当当前项更改时,你必须告知AngularJS。 要做到这个,向ICollectionView.currentChanged事件添加一个处理器,并且调用这个样例中显示为JS 选项卡的$scope.$apply。
FlexGrid有一个itemFormatter属性,给予你对单元格内容完全的控制。
这个样例使用了一个JavaScript函数来创建值范围,返回命名的颜色。 然后我们在FlexGrid的itemFormatter属性调用这个函数,传递单元格的数据,以条件化地设置单元格的前景颜色。
FlexGrid的外观是在CSS中定义的。除了默认的主题外,我们有十几个专业设计的主题,它们自定义了所有Wijmo控件的外观来达到一致的,有吸引力的效果。
你可以使用CSS自定义表格的外观。要做到这一点,从默认主题复制CSS规则到一个新的CSS文件并且修改你想要更改的样式属性。
在这个样例中,我们向表格元素添加了一个custom-flex-grid类, 定义了一些CSS规则为任何拥有custom-flex-grid类的表格来创建一个简单的“黑与白,无国界”主题。
除了分组,FlexGrid支持分层数据,即拥有一列子项的项目的数据。这种类型的分层机构是非常常见的,通常在树视图控件中显示。
要使用有分层数据源的FlexGrid,设置childItemsPath属性为包含子元素的数据元素的名字。表格会自动扫描数据,为你构建树。
默认情况下,FlexGrid允许你在字符串类型的列输入空值,不允许空值或者null在任何其它类型的列中。
你可以使用表格列的required属性来更改此行为。如果你设置required属性为false, 表格会允许你在这一列键入空值,不管这一列是什么数据类型。 相反,如果你设置required属性为true,表格不允许你输入空值,甚至在字符串类型的列中也不允许。
设置required为null恢复默认的行为(只允许在字符串类型列输入空值)。
下面的表格恢复了默认的行为。 它把第一类的下面的表格恢复了默认的行为。它把第一列的required属性设为false,其他列设为true。 你可以通过输入一个空字符串或者只要按下删除键来删除不需要的内容。