共计 1120 个字符，预计需要花费 3 分钟才能阅读完成。
嵌套表头这个性能在经验了屡次调整后，终于在 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 标签充满活力。
正文完