关于layui:00030layuijava-树形表格treeTable

5次阅读

共计 2735 个字符,预计需要花费 7 分钟才能阅读完成。

treeTable 模块下载:
https://gitee.com/whvse/treet…

下载后,treeTable.js、treeTable.css 的搁置目录别离为:
layuiadmin/modules/treeTable.js
layuiadmin/modules/treeTable/treeTable.css

页面元素:

<div style="width: 100%;overflow-x: auto;">
   <table class="layui-hide" id="businessConfigListTable" lay-filter="businessConfigListTable"></table>
</div>

定义:

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;    

渲染:

var insTb = treeTable.render({
            elem: '#businessConfigListTable',
            tree: {
                iconIndex: 1,  // 折叠图标显示在第几列
                idName: 'id',  // 自定义 id 字段的名称
                pidName: 'parentId',  // 自定义标识是否还有子节点的字段名称
            },
            cols: [{type: 'checkbox', fixed: 'left'},
                {type: 'numbers',width: 120,style:'text-align:left'},
//                {field: 'id', title: 'ID',width: 180},
                {field: 'type', title: '类型', width: 120,templet:tplType},
                {field: 'name', title: '名称', width: 200},
                {field: 'value', title: '值'},
                {field: 'sortOrder', title: '排序', width: 120},
                {field: 'status', title: '状态', width: 150,templet:tplStatus},
                {title:'操作', toolbar: '#businessConfigListTable-bar', width:120}
            ],
            reqData: function(data, callback) {
                // 在这里写 ajax 申请,通过 callback 办法回调数据
                var url = ctx+'/business/businessConfig/businessConfigTreeList';
                var rtn = admin.syncReq(url,{});
                var rtnData = rtn.data;
                for(var i=0;i<rtnData.length;i++){var vo = rtnData[i];
                    vo.open = true;
                }
                callback(rtnData);
            }
            ,height: 'full-99'
        });

接口:business/businessConfig/businessConfigTreeList,如下:

@RequestMapping(value = "businessConfigTreeList")
@ResponseBody
public BaseResp businessConfigTreeList(@ModelAttribute("command") BusinessConfigQo command){BaseResp resp = new BaseResp();
    try{List<BusinessConfigPo> list = businessConfigService.businessConfigTreeList(command);
        resp.setData(list);
    }catch (Exception e){error(logger,resp,e);
    }
    return resp;
}

其中 BaseResp 构造:

/**
 * 应答返回码
 */
private int code = RC_OK;

/**
 * 应答返回音讯
 */
private String msg;

/**
 * 跳转 url
 */
private String url = "";

private int count;

private boolean success = false;// 是否胜利

private Object data;

service 层获取数据,递归:

public List<BusinessConfigPo> businessConfigTreeList(BusinessConfigQo command) throws Exception{command.setParentId(0l);
    command.setLimit(99999);
    List<BusinessConfigPo> list = this.businessConfigMapper.query(command);
    for(BusinessConfigPo rec:list){List<BusinessConfigPo> children = getChildrenConfig(rec);
        rec.setChildren(children);
    }

    return list;
}

private List<BusinessConfigPo> getChildrenConfig(BusinessConfigPo rec) throws Exception{BusinessConfigQo qo = new BusinessConfigQo();
    qo.setLimit(99999);
    qo.setParentId(rec.getId());
    List<BusinessConfigPo> list = this.businessConfigMapper.query(qo);
    if(list==null){return null;}
    for(BusinessConfigPo child:list){List<BusinessConfigPo> children = getChildrenConfig(child);
        child.setChildren(children);
    }
    return list;
}
正文完
 0