layui 树形表格

最近的一个项目，用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;