android studio中表格的表头,表格组件GridManager的嵌套表头详解

嵌套表头这个功能在经历了多次调整后，终于在V2.13.0这个版本内发布。

效果展示先来一张嵌套表头的效果图

如何使用

配置起来相当简单，只需要在配置项中的columnData中增加children属性即可实现。

children属性为数组类型, 与columnData使用方式相同，children可无限嵌套。

new GridManager(document.querySelector('table'), {

gridManagerName: 'demo-nestedCode',

columnData:[

// 列的唯一索引。字符串类型，必设项

key: 'title',

// 列的显示文本。[字符串 或 函数]类型，必设项。

// 如果当前使用了angular、vue、react版本，这里可以直接使用框架模版

text: '标题',

// 子项配置, 通过该项可以实现嵌套表头

// 存在该项时，将禁用: supportConfig、supportDrag、supportAdjust、columnData.fixed

// 数组对像与columnData对象配置相同，可多层嵌套。

// 注意: 现有版本中最后一层的宽度会平分上一层的宽度

children: []

]

});

如上示例，通过在columnData数组元素中配置children指定嵌套表头。

但需要注意的是，当使用嵌套表头时将禁用:supportConfig: 列的显示隐藏功能

supportDrag: 列的移动功能

supportAdjust: 列宽度调整功能

columnData.fixed: 列固定功能

GridManager的其它功能功能描述宽度调整表格的列宽度可进行拖拽式调整

位置更换表格的列位置进行拖拽式调整

配置列可通过配置对列进行显示隐藏转换

表头吸顶在表存在可视区域的情况下,表头将一直存在于顶部

列固定指定某列固定在左侧或右侧

排序表格单项排序或组合排序

分页表格ajax分页,包含选择每页显示总条数和跳转至指定页功能

用户偏好记忆记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数

序号自动生成序号列

全选自动生成全选列

导出静态数据导出、动态数据导出、已选数据导出

打印当前页打印

右键菜单常用功能在菜单中可进行快捷操作

过滤通过对列进行过滤达到快速搜索效果

合并同一列下相同值的单元格可自动合并

树表格可通过配置快速实现树型表格结构

行移动可通过配置快速实现行位置移动

嵌套表头无层级限制配置复杂的表格实例

相关链接

写在最后:

项目自2015年初维护至今, 最初的想法从未改变: 快速、灵活的对Table标签进行实例化，让Table标签充满活力。