表格div:
<div style="width: 100%;overflow-x: auto;"> <table class="layui-hide" id="businessMenuListTable" lay-filter="businessMenuListTable"></table></div>js,引入treeTable
layui.config({ base: '${ctxLayui}/layuiadmin/'}).extend({ index: 'lib/index'}).use(['index', 'table','dict','laydate','util','treeTable'], function(){ var $ = layui.$,table = layui.table,form = layui.form; var dict = layui.dict; var laydate = layui.laydate; var admin = layui.admin; var util = layui.util; var treeTable = layui.treeTable;treeTable 下载：
https://fly.layui.com/extend/...
表格：
var insTb = treeTable.render({ elem: '#businessMenuListTable', tree: { iconIndex: 1, // 折叠图标显示在第几列 idName: 'id', // 自定义id字段的名称 pidName: 'parentId', // 自定义标识是否还有子节点的字段名称 }, cols: [ {type: 'checkbox', fixed: 'left'}, {field: 'name', title: '名称', width: 220}, {field: 'url', title: '门路'}, {field: 'perm', title: '按钮权限', width: 200}, {field: 'type', title: '菜单类型', width: 100,templet:tplType}, {field: 'sortOrder', title: '排序', width: 100}, {field: 'status', title: '状态', width: 100,templet:tplStatus}, {title:'操作', toolbar: '#businessMenuListTable-bar', width:120} ], reqData: function(data, callback) { // 在这里写ajax申请，通过callback办法回调数据 var pid = data?data.id:0; var children = data?(data.children?data.children:null):null; if(children && children.length>0){ return callback(children); } var url = ctx+'/business/businessMenu/queryByAll'; var rtn = admin.syncReq(url,{parentId:pid}); var rtnData = rtn.data; $.each(rtnData,function (index,item) { if(item.type!=4){ item.haveChild = true; } }) callback(rtnData); } ,height: 'full-99'});点击节点 ，会调用：reqData
而后依据条件， callback(rtnData); 会从新渲染列表。