表格div:
<div style=" 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/treeTable/
表格:
var insTb = treeTable.render({
elem: '#businessMenuListTable',
tree: {
iconIndex: 1, // 折叠图标显示在第几列
idName: 'id', // 自定义id字段的名称
pidName: 'parentId', // 自定义标识是否还有子节点的字段名称
},
cols: [
{type: 'checkbox', fixed: 'left'},
{field: 'name', title: '名称', 220},
{field: 'url', title: '路径'},
{field: 'perm', title: '按钮权限', 200},
{field: 'type', title: '菜单类型', 100,templet:tplType},
{field: 'sortOrder', title: '排序', 100},
{field: 'status', title: '状态', 100,templet:tplStatus},
{title:'操作', toolbar: '#businessMenuListTable-bar', 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); 会重新渲染列表。