tree-table懒加载树状表格

treetable方式：

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

引入文件：

html代码：

    

        
单位名称
        
任务状态
        
任务说明
        
更新时间
        
操作
    
    

        
第一级
        
跨区机动
        
#状态：跨区机动，#智慧员：刘爱民，#五期丹药：不强3支
        
2020-08-05 12:00:00
        
编辑
    
    

        
第二级
        
巡逻
        
#状态：跨区机动，#智慧员：刘爱民，#五期丹药：不强3支
        
2020-08-05 12:00:00
        
编辑
     
     

         
第三级
         
跨区机动
         
#状态：跨区机动，#智慧员：刘爱民，#五期丹药：不强3支
         
2020-08-05 12:00:00
         
编辑
      

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代码：

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;
}

效果图：