当前位置 博文首页 > 文章内容

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

    作者: 栏目:未分类 时间:2020-09-18 9:01:07

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



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