最近的一个项目,用layui里的表格要实现树形表格功能,去官网查找没有,最后在网上找了一位大神开发的插件—treeTable。
插件地址
演示地址: https://whvse.gitee.io/treetable-lay/
项目地址:https://gitee.com/whvse/treetable-lay
使用方法按照文档介绍或者下载demo
自己在此基础上实现了功能,效果如下:
html文件
<table id="layuiTable" lay-filter="test"></table>
js文件
layui.config({
base: '../../plugins/'
}).extend({
treetable: 'treetable-lay/treetable'
}).use(['layer', 'table', 'treetable'], function() {
var $ = layui.jquery;
var table = layui.table;
var layer = layui.layer;
var treetable = layui.treetable;
// 渲染表格
renderTable = function() {
layer.load(2);
treetable.render({
treeColIndex: 2,
treeSpid: 0,
treeIdName: 'deptId',
treePidName: 'parentId',
treeDefaultClose: true,
treeLinkage: false,
elem: '#layuiTable',
id: 'tableId',
url: baseURL + "sys/dept/list",
page: false,
cols: [
[{
type: 'radio'
},
{
field: 'deptId',
title: '部门ID'
},
{
field: 'name',
title: '部门名称'
},
{
field: 'parentName',
title: '上级部门'
},
{
field: 'parentId',
title: 'parentId'
},
{
field: 'orderNum',
title: '排序号'
}
]
],
done: function() {
layer.closeAll('loading');
}
});
};
renderTable();
//监听行单击事件(双击事件为:rowDouble)
table.on('row(test)', function(obj) { //注:test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data;
selected = data;
//选中行样式
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
//选中radio样式
obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
});
});
var renderTable;
var selected;