Layui treeTable相关

layui官网是没有treeTable这个功能的，需要下载额外的插件实现，幸运的是有符合layui风格的treeTable插件，此篇围绕树状表格讲述。
treeTable官网指路：https://gitee.com/whvse/treetable-lay/wikis/pages

下载

有Gitee账号

官网TreeTable资源下载路径：https://gitee.com/whvse/treetable-lay

无Gitee账号

我已上传资源：https://download.csdn.net/download/Swn__/13624186

导入

treeTable的导入方式和layui其他组件一样，都是通过layui的语法导入，不同的是你可以将treeTable.js放到你目录的任意一个地方，不是必须要放到layui/lay/modules中，如果你放到你的js目录下，你需要这样配置你的layui（具体根据个人目录设置）。

使用

这里不演示静态表格树，只演示通过API接口获取数据的表格树。

代码如下：

<table class="layui-table layui-form" id="data-table" lay-filter="tableEvent"></table>//js部分
re = treeTable.render({tree: {iconIndex: 3, // 折叠图标显示在第几列isPidData: true, // 是否是id、pid形式数据idName: 'code', // id字段名称pidName: 'pcode' // pid字段名称},elem: '#data-table',//要渲染的表格domurl: tableDataUrl, //url接口地址，包括参数height: 'full-80',  //设置表格高度，滚动时表头固定parseData: function(data){  //对后台传来的参数进行解析，例如message-->msg，若有此函数必须要有returntableData = data.data;return data;  },end: function(e) {form.render(); //form格式整理},done: function(res) {console.log(tableData); //框架解析后的数据children格式},cols: [[{field: 'No',title: 'No',type: 'numbers',width: 50},{field: 'name',title: '名称',width: 200},{field: 'operate',title: '操作',align: 'center',templet: function(item) {return '<a lay-event="edit" data-toggle="tooltip" data-placement="right" title="编辑"><i class="layui-icon layui-icon-edit"></i></a>' +'<a lay-event="delete" data-toggle="tooltip" data-placement="right" title="删除"><i class="layui-icon layui-icon-delete" style="color:red"></i></a>'+'<a lay-event="add" data-toggle="tooltip" data-placement="right" title="添加"><i class="layui-icon layui-icon-add-circle" style="color:red"></i></a>';},width: 150},]]

json数据格式（新版不用指定pid的值，自动识别）
说明：通过在数据里面增加open字段来控制是否默认展开
open：true 默认展开
如果没有该参数，则是默认关闭，另外，该参数也可以自定义名称，

treeTable.render({tree: {openName: 'open',   // 自定义默认展开的字段名}
});

json数据格式如下：

{"code": 0,"msg": "","data": [{"code": 1,"name": "系统管理","pcode": 0,"open": true  },{"code": 2,"name": "用户管理","pcode": 1,"open": true  },{"code": 3,"name": "查询用户","pcode": 2,"open": true  },{"code": 4,"name": "添加用户","pcode": 2,"open": true  },]
}

上述的tree参数中是构成树状表格的关键，除了那些之外，还有部分如下图所示（截取官网图片）：

另外对表格的样式、布局、颜色、也有相应的参数配置，若是想要和layui统一，默认样式还是挺不错的。除了上述参数之外，还提供自定义配置：自定义表头和自定义树形图标。

除了上述加载方式之外，官网还另外提供了两种：懒加载和reqData方法。

懒加载

懒加载用于数据量特别大的情况下，逐层加载，先加载第一层，当下拉框打开之后再加载第二层，这样可以避免等待时间过长的情况。
这是官网给出的例子：

var insTb = treeTable.render({elem: '#demoTb1',url: 'json/menus.json',request: {pidName: 'pid'}        // 懒加载请求携带的参数名称tree: {iconIndex: 1,                // 折叠图标显示在第几列idName: 'authorityId',       // 自定义id字段的名称pidName: 'parentId',         // 自定义标识是否还有子节点的字段名称haveChildName: 'haveChild',  // 自定义标识是否还有子节点的字段名称isPidData: true              // 是否是pid形式数据},cols: [[{type: 'numbers'},{field: 'authorityName', title: '菜单名称'},{field: 'menuUrl', title: '菜单地址'},{field: 'authority', title: '权限标识'}]]
});

reqData方式

reqData是通过该函数去请求ajax，通过callback方法回调数据。
如果要实现远程访问数据且懒加载，则用这种方式实现。例子如下：

var insTb = treeTable.render({elem: '#demoTreeTb',tree: {iconIndex: 2,           // 折叠图标显示在第几列isPidData: true,        // 是否是id、pid形式数据idName: 'authorityId',  // id字段名称pidName: 'parentId'     // pid字段名称},cols: [[{type: 'numbers'},{type: 'checkbox'},{field: 'authorityName', title: '菜单名称'},{field: 'menuUrl', title: '菜单地址'},{field: 'authority', title: '权限标识'}]],reqData: function(data, callback) {// 在这里写ajax请求，通过callback方法回调数据$.get('json/menus.json', function (res) {if(res.code==0) callback(res.data);else callback(res.msg);});}
});

懒加载+ajax请求

treeTable.render({reqData: function(data, callback) {var pid = data?data.id:'';$.get('list.json?pid='+pid, function (res) {callback(res.data);});}
});

json数据参考格式：

{"code": 200, "data": [{"id": "1", "name": "xxx", "haveChild": true}]}
通过haveChild标识是否还有子节点，id也是必须的字段，这两个字段的名字可以在tree参数里面自定义。

reqData这个方法里面也可以一次性把所有数据都返回，也可以懒加载。

事件监听

监听工具条点击事件

//这里的data-table是表格的ID，并不是表格的event事件
treeTable.on('tool(data-table)', function(obj){var data = obj.data;  // 获得当前行数据var event = obj.event; // 获得lay-event对应的值if (event === 'edit') {console.log('您点击了编辑');} else if (event === 'delete'){console.log('您点击了删除');} else if (event === 'add'){console.log('您点击了添加');}
});

监听复选框选择

treeTable.on('checkbox(data-table)', function(obj){console.log(obj.checked);  // 当前是否选中状态console.log(obj.data);  // 选中行的相关数据console.log(obj.type);  // 如果触发的是全选，则为：all，如果触发的是单选，则为：one
});

监听单元格编辑：

treeTable.on('edit(test)', function(obj){console.log(obj.value); //得到修改后的值console.log(obj.field); //当前编辑的字段名console.log(obj.data); //所在行的所有相关数据
});

监听行单双击事件：

// 监听行单击事件
treeTable.on('row(test)', function(obj){console.log(obj.tr) //得到当前行元素对象console.log(obj.data) //得到当前行数据// obj.del(); // 删除当前行// obj.update(fields) // 修改当前行数据
});// 监听行双击事件
treeTable.on('rowDouble(test)', function(obj){// obj 同上
});

监听单元格单双击事件：

// 监听行单击事件
treeTable.on('cell(test)', function(obj){console.log(obj.field); //当前单元格的字段名console.log(obj.data) // 得到当前行数据
});// 监听行双击事件
treeTable.on('cellDouble(test)', function(obj){// obj 同上
});

实例方法

var insTb = treeTable.render({ });

刷新

insTb.reload(options);   // 重载表格
insTb.refresh();  // 刷新(异步模式)
insTb.refresh(data);  // 刷新(数据模式)
insTb.refresh(id);  // 刷新指定节点下的数据(异步模式)
insTb.refresh(id, data);  // 刷新指定节点下的数据(数据模式)

复选框

insTb.checkStatus();  // 获取选中数据(是否是半选会有一个isIndeterminate字段标识)
insTb.checkStatus(false);  // 获取选中数据，不要半选状态
insTb.setChecked(['1','2']);  // 设置选中数据
insTb.removeAllChecked();  // 移除全部选中

折叠/展开

insTb.expand(id);  // 展开指定节点
insTb.fold(id);  // 折叠指定节点
insTb.expandAll();  // 展开全部
insTb.foldAll();  // 折叠全部

搜索

insTb.filterData('keywords');   // 根据关键字模糊搜索
insTb.filterData(['1','2']);   // 根据id搜索
insTb.clearFilter();   // 清除搜索

更新数据(只更新数据，不更新界面)

insTb.del(id);   // 根据id删除
insTb.update(id, fields);  // 根据id更新

其他方法

pid形式数据转children形式数据

treeTable.pidToChildren(data, idName, pidName, childName);

使用方法

re = treeTable.render({treeColIndex: 1, //树形图标显示在第几列treeSpid: "", //最上级的父级idtreeIdName: 'XMID', //id字段的名称treePidName: 'PXMID', //pid字段的名称treeDefaultClose: true, //是否默认折叠treeLinkage: false, //父级展开时是否自动展开所有子级elem: '#tree-table', //元素cellMinWidth: 80,//最小宽度url: tableDataUrl, //请求地址page: false,  //分页end: function(e) {form.render(); //form格式整理},done: function(res) {tableData = res.data;},cols: [],});