一个无限层级的树形表格插件，使用 div 和 span 标签实现，支持虚拟滚动和流式加载。
- 🔄 无限层级
- ☑️ 层级复选框
- 🌲 展开/折叠
- 🔄 数据重载
- ⚡ 虚拟滚动/流式加载
- 🎨 纯CSS绘制图标
- 📱 响应式布局
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="treeTable.js"></script>$('#treeTable').treeList({
data: [
{
id: 1,
name: '根节点',
children: [
{
id: 2,
name: '子节点',
children: []
}
]
}
]
});| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 数据源 | Array | [] |
| idField | ID字段名 | String | 'id' |
| parentField | 父ID字段名 | String | 'pid' |
| childrenField | 子节点字段名 | String | 'children' |
| nameField | 显示名称字段 | String | 'name' |
| checkbox | 是否显示复选框 | Boolean | true |
| expandAll | 是否默认展开所有节点 | Boolean | false |
| virtualScroll | 是否启用虚拟滚动 | Boolean | true |
| itemHeight | 每行高度(px) | Number | 36 |
| visibleItems | 可视区域显示的行数 | Number | 30 |
| showHeader | 是否显示表头 | Boolean | true |
| showAction | 是否显示操作列 | Boolean | true |
| actionIcon | 操作列图标 | String | '❤' |
$('#treeTable').treeList({
columns: [
{ type: 'checkbox', width: '50px' },
{ key: 'name', title: '名称' },
{
title: '类型',
width: '100px',
align: 'center',
templet: function(item) {
return item.children?.length ? '📁' : '📄';
}
}
]
});const treeApi = $('#treeTable').data('treeApi');
// 展开/折叠
treeApi.expandAll();
treeApi.collapseAll();
treeApi.expandNode(nodeId);
treeApi.collapseNode(nodeId);
// 节点操作
treeApi.checkNode(nodeId, true);
treeApi.uncheckNode(nodeId);
treeApi.getCheckedNodes();
treeApi.getExpandedNodes();
treeApi.getNodeById(nodeId);
// 数据操作
treeApi.reloadNodes(nodeIds, newData);
treeApi.refresh();插件使用纯CSS绘制展开/折叠图标，支持平滑动画效果：
/* 折叠状态的三角形图标 (向右) */
.tree-row .toggle::before {
border-left: 8px solid #6c757d;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 展开状态的三角形图标 (向下) */
.tree-row .toggle.expanded::before {
transform: translate(-50%, -40%) rotate(90deg);
}$('#treeTable').treeList({
onCheck: function(node, checked) {
console.log('节点选中状态改变:', node, checked);
},
onToggle: function(node, expanded) {
console.log('节点展开/折叠:', node, expanded);
},
onNodeClick: function(node) {
console.log('节点被点击:', node);
},
onActionClick: function(node, event) {
console.log('操作按钮被点击:', node, event);
}
});- 使用
requestAnimationFrame优化滚动性能 - 智能缓冲区计算，减少重绘
- DOM 元素回收复用
- 滚动防抖处理
MIT License