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


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

  • 相关阅读:
    Linux 查看内存状态
    Linux sar工具安装使用
    DNS ARP地址解析原理
    TCP/UDP 端口
    TCP/IP 传输原理
    Window vagrant 安装部署【转】
    Window7下vagrant的部署
    Ubuntu下访问SSH
    使用 Vagrant 打造跨平台开发环境
    Vagrant入门[转]
  • 原文地址:https://www.cnblogs.com/jianquan100/p/13689288.html
Copyright © 2020-2023  润新知