zoukankan      html  css  js  c++  java
  • 00030-layui+java 树形表格treeTable

    treeTable 模块下载:
    https://gitee.com/whvse/treetable-lay/tree/master/2.x

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

    页面元素:

    <div style=" 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', 120,style:'text-align:left'},
    //                {field: 'id', title: 'ID', 180},
                    {field: 'type', title: '类型',  120,templet:tplType},
                    {field: 'name', title: '名称',  200},
                    {field: 'value', title: '值'},
                    {field: 'sortOrder', title: '排序',  120},
                    {field: 'status', title: '状态',  150,templet:tplStatus},
                    {title:'操作', toolbar: '#businessConfigListTable-bar', 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;
    }
    
  • 相关阅读:
    HTML基础学习笔记
    CSS-精灵图片的使用(从一张图片中截图指定位置图标)
    侧边栏显示
    HTML <form> action 属性
    2018年寒假小记
    算法提高--接水问题
    基础练习--huffman
    ...
    基础算法
    枚举--最长单词--蓝桥杯
  • 原文地址:https://www.cnblogs.com/jianquan100/p/13675936.html
Copyright © 2011-2022 走看看