00035-layui+java 树形表格treeTable(异步请求)

表格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/treeTable/

表格：

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); 会重新渲染列表。

来源：oschina

链接：https://my.oschina.net/u/4328825/blog/4613102

标签

java

layui

javascript