嵌套表头这个性能在经验了屡次调整后,终于在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标签充满活力。