表格div:ajax
<div style="width: 100%;overflow-x: auto;"> <table class="layui-hide" id="businessMenuListTable" lay-filter="businessMenuListTable"></table> </div>
js,引入treeTableide
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/...ui
表格:url
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); 會從新渲染列表。code