layui文件树Dtree的使用

1.下载Dtree文件

下载地址:https://fly.layui.com/extend/dtree/

将文件解压后放到项目静态文件的位置

2.使用

在页面分别引入dtree.css和dtreefont.css文件

html代码

js代码

 layui.config({
        base: '/static/dtree/' //配置 layui 第三方扩展组件存放的基础目录
    }).extend({
        dtree: 'dtree' //定义该组件模块名
    }).use(['dtree','layer','jquery', ], function(){
        var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;
        //树
        var DemoTree = dtree.render({
            elem: "#dataTree2",//html中的id值
            type: "all",
            url:"/testdata",//url
            method:"POST",
            request: {"type":"0"},//传递参数
            initLevel: "1",
            icon:'2',
            firstIconArraylayui:"0",
            checkbar: true,
            checkbarType: "no-all",//显示半选中状态
            success:function (data) {
            },
           checkbarFun:{
                chooseDone: function(checkbarNodesParam) {//点击复选框的事件
                    var datas=dtree.getCheckbarNodesParam("dataTree2");
                    return false;
                }
            }
        });
        //树的点击事件
        dtree.on("node('dataTree2')" ,function(obj){
            var datas=dtree.getCheckbarNodesParam("dataTree2");
            console.log(datas);
        });


    });

java部分

需要一些基础类

1.复选框设计类---CheckArr

/** 复选框设计类*/
public class CheckArr {
    /** 复选框标记*/
    private String type;
    /** 复选框是否选中*/
    private String isChecked;
//省略get/set方法
}

2.树类----Dtree

/** 树类*/
public class DTree {
    /** 节点ID*/
    private String id;
    /** 上级节点ID*/
    private String parentId;
    /** 节点名称*/
    private String title;
    /** 是否展开节点*/
    private Boolean spread;
    /** 是否最后一级节点*/
    private Boolean isLast;
    /** 自定义图标class*/
    private String iconClass;
    /** 表示用户自定义需要存储在树节点中的数据*/
    private Object basicData;
    /** 复选框集合*/
    private List checkArr = new ArrayList();
    /** 子节点集合*/
    private List children = new ArrayList();
//省略get/set方法
}

3.返回类

/** response返回类*/
public class DTreeResponse {
    /** 状态码*/
    private int code;
    /** 信息标识*/
    private String msg;
    /** 状态类*/
    private Status status;
    /** 数据*/
    private Object data;
//省略get/set方法
}

4.信息状态类

/** 信息状态类*/
public class Status {
    /** 状态码*/
    private int code = 200;
    /** 信息标识*/
    private String message = "success";
//省略get/set方法
}

5.java逻辑代码

 @RequestMapping(value = "/testdata")
    @ResponseBody
    public DTreeResponse getdata(HttpServletRequest request){
        String type = request.getParameter("type");
        if (type.equals("0")){
            type="类型";
        }else if (type.equals("1")){
            type="电务段";
        }else if (type.equals("2")){
            type="车间";
        }else {
            type="线路";
        }
        List checkArrs=new ArrayList<>();
        CheckArr checkArr=new CheckArr();
        checkArr.setType("0");
        checkArr.setIsChecked("0");
        checkArrs.add(checkArr);

        List sons = new ArrayList();
        for (int i=0;i<10;i++){
            DTree d=new DTree();
            d.setId("10"+i);
            d.setParentId("001");
            d.setTitle(type+"=="+i);
            d.setCheckArr(checkArrs);
            sons.add(d);
        }
        DTree father=new DTree();
        father.setId("001");
        father.setTitle(type);
        father.setCheckArr(checkArrs);
        father.setParentId("0");
        father.setChildren(sons);
        father.setIconClass("-1");
        List f=new ArrayList<>();
        f.add(father);
        DTreeResponse response=new DTreeResponse();
        response.setData(f);
        response.setStatus(new Status());
        System.out.println(response.toString());

        return response;
    }