温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

layui+java怎么实现树形表格

发布时间:2021-11-24 16:09:19 阅读:188 作者:iii 栏目:大数据
Java开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇内容主要讲解“layui+java怎么实现树形表格”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“layui+java怎么实现树形表格”吧!

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 >
   <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: {
                iconIndex1,  // 折叠图标显示在第几列
                idName'id',  // 自定义id字段的名称
                pidName'parentId',  // 自定义标识是否还有子节点的字段名称
            },
            cols: [
                {type'checkbox', fixed'left'},
                {type'numbers',width120,style:'text-align:left'},
//                {field'id', title'ID',width180},
                {field'type', title'类型', width120,templet:tplType},
                {field'name', title'名称', width200},
                {field'value', title'值'},
                {field'sortOrder', title'排序', width120},
                {field'status', title'状态', width150,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;
}

到此,相信大家对“layui+java怎么实现树形表格”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://my.oschina.net/jianquan/blog/4571187

AI

开发者交流群×