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