zoukankan      html  css  js  c++  java
  • 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); 会重新渲染列表。

  • 相关阅读:
    Ural 2070:Interesting Numbers(思维)
    Codeforces 760B:Frodo and pillows(二分)
    Codeforces 760C:Pavel and barbecue(DFS+思维)
    Codeforces 730I:Olympiad in Programming and Sports(最小费用流)
    HDU-2102 A计划
    HDU-2181 哈密顿绕行世界问题
    HDU-1226 超级密码
    学习系列
    学习系列
    学习系列
  • 原文地址:https://www.cnblogs.com/jianquan100/p/13689288.html
Copyright © 2011-2022 走看看