表格组件GridManager的嵌套表头详解

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

效果展示

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

如何使用

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

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

<table id='table-demo-nestedCode'></table>

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分页,包含选择每页显示总条数和跳转至指定页功能
用户偏好记忆	记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
序号	自动生成序号列
全选	自动生成全选列
导出	静态数据导出、动态数据导出、已选数据导出
打印	当前页打印
右键菜单	常用功能在菜单中可进行快捷操作
过滤	通过对列进行过滤达到快速搜索效果
合并	同一列下相同值的单元格可自动合并
树表格	可通过配置快速实现树型表格结构
行移动	可通过配置快速实现行位置移动
嵌套表头	无层级限制配置复杂的表格实例

相关链接

• api
• github

写在最后:

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