共计 1479 个字符,预计需要花费 4 分钟才能阅读完成。
表格 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); 会从新渲染列表。
正文完