tree-table懒加载树状表格

treetable方式：

弊端：无法懒加载，必须同时获取全部数据，需要懒加载看第二种方式

引入文件：

<link href="../jquery-treetable-master/css/jquery.treetable.theme.default.css" rel="stylesheet" type="text/css" />
<link href="../jquery-treetable-master/css/jquery.treetable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../jquery-treetable-master/jquery.treetable.js"></script>

html代码：

<table id="tree_table" class="tree_table">
    <tr data-tt-id="0">
        <th width="25%">单位名称</th>
        <th width="15%">任务状态</th>
        <th width="37%">任务说明</th>
        <th width="15%">更新时间</th>
        <th width="8%">操作</th>
    </tr>
    <tr data-tt-id="2">
        <td>第一级</td>
        <td>跨区机动</td>
        <td>#状态：跨区机动，#智慧员：刘爱民，#五期丹药：不强3支</td>
        <td>2020-08-05 12:00:00</td>
        <td>编辑</td>
    </tr>
    <tr data-tt-id="2-1" data-tt-parent-id="2">
        <td>第二级</td>
        <td>巡逻</td>
        <td>#状态：跨区机动，#智慧员：刘爱民，#五期丹药：不强3支</td>
        <td>2020-08-05 12:00:00</td>
        <td>编辑</td>
     </tr>
     <tr data-tt-id="3" data-tt-parent-id="2-1">
         <td>第三级</td>
         <td>跨区机动</td>
         <td>#状态：跨区机动，#智慧员：刘爱民，#五期丹药：不强3支</td>
         <td>2020-08-05 12:00:00</td>
         <td>编辑</td>
      </tr>
</table>

js代码：

$("#tree_table").treetable({
    expandable : true
});

css：

table.tree_table{
	border: none;
}
table.tree_table tbody tr{
	line-height: 44px;
}
table.tree_table tbody tr:first-child th{
	font-size: 17px;
	color:#333;
	padding: 0.3em 1em;
}
table.tree_table tbody tr td{
	font-size: 15px;
	color:#555;
}
table.tree_table tbody tr:not(first-child) td:last-child{
	color: #3394FE;
}
table.tree_table tbody tr:nth-child(odd){
	background: #f7f6fc;
}
table.tree_table tbody tr:nth-child(even){
	background: transparent;
}
table.tree_table tr:first-child{
	background: #c4e8f4;
	text-align: left;
}

效果图：

 treetable-lay方式：

api：

文档预览 - Gitee.com

需要文件：（放到项目里，不用html引入）

 html代码：

<table id="tree_table" class="tree_table"></table>
<script type="text/html" id="barDemo">
    <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">编辑</button>
</script>

js代码：

layui.config({
	base: './'  // 配置treetable.js所在的目录
}).use(['treeTable'], function () {
	var treeTable = layui.treeTable;
	var insTb = treeTable.render({
		elem: '#tree_table',
		reqData: function(data, callback) {
			// data是当前行的数据，通过callback回调子集数据
			if(!data){
				let requestUrl = "";  //获取第一级数据
				noParameterJGet(requestUrl, function (data) {
					if (data.code == 1 && data.data &&  data.data.length) {
						data.data.forEach((item,index)=>{
							item.haveChild = (item.type == 1);  //haveChild区分懒加载后是否显示为父节点
						});
						callback(data.data);
					} else {
						callback([]);
					}
				});
			}else{
				let requestUrl = "";  //获取子级数据
				noParameterJGet(requestUrl, function (data) {
					if (data.code == 1 && data.data &&  data.data.length) {
						data.data.forEach((item,index)=>{
							item.haveChild = (item.type == 1);
						});
						callback(data.data);
					} else {
						callback([]);
					}
				});
			}
		},
		tree: {
			iconIndex: 0,                // 折叠图标显示在第几列
			idName: 'id',       // 自定义id字段的名称
			pidName: 'parentId',         // 自定义标识是否还有子节点的字段名称
			haveChildName: 'haveChild',  // 自定义标识是否还有子节点的字段名称
		},
		cols: [[
			{field: 'name', title: '单位名称'},
			{field: 'taskState', title: '任务状态'},
			{field: 'taskDescription', title: '任务说明'},
			{field: 'updateTime', title: '更新时间'},
			{field: 'operate', title: '操作',toolbar:"#barDemo"}
		]]
	});

	//监听工具条
	treeTable.on('tool', function(obj) {
		var data = obj.data; //获得当前行数据
		editFirstData(data.id);
	});
});

css：（取消鼠标悬停可以编辑表格）

.ew-tree-table-cell > .layui-table-grid-down{
	display: none!important;
}

效果图：