layui树形菜单初始化及赋值取值问题

layui树形菜单初始化及赋值取值问题

layui树形菜单初始化及赋值取值问题

刚刚接触layui，不是特别熟，现在记录一下，便于以后查找复习

分享一下layui的工具类

//TreeBuilder类，将数组转换成layui树形菜单组件特定的格式
import java.util.ArrayList;
import java.util.List;

import com.alibaba.fastjson.JSON;

//图层结构
public class TreeBuilder {

    List<Node> nodes = new ArrayList<Node>();

    public String buildTree(List<Node> nodes) {
        TreeBuilder treeBuilder = new TreeBuilder(nodes);
        return treeBuilder.buildJSONTree();
    }

    public TreeBuilder() {}

    public TreeBuilder(List<Node> nodes) {
        super();
        this.nodes = nodes;
    }

    // 构建JSON树形结构
    public String buildJSONTree() {
        List<Node> nodeTree = buildTree();
        String jsonStr = JSON.toJSONString(nodeTree);
        return jsonStr;
    }

    // 构建树形结构
    public List<Node> buildTree() {
        List<Node> treeNodes = new ArrayList<Node>();
        List<Node> rootNodes = getRootNodes();
        for (Node rootNode : rootNodes) {
            buildChildNodes(rootNode);
            treeNodes.add(rootNode);
        }
        return treeNodes;
    }

    // 递归子节点
    public void buildChildNodes(Node node) {
        List<Node> children = getChildNodes(node);
        if (!children.isEmpty()) {
            for (Node child : children) {
                buildChildNodes(child);
            }
            node.setChildren(children);
        }
    }

    // 获取父节点下所有的子节点
    public List<Node> getChildNodes(Node pnode) {
        List<Node> childNodes = new ArrayList<Node>();
        for (Node n : nodes) {
            if (pnode.getId().equals(n.getParentId())) {
                childNodes.add(n);
            }
        }
        return childNodes;
    }

    // 判断是否为根节点
    public boolean rootNode(Node node) {
        boolean isRootNode = true;
        for (Node n : nodes) {
            if (node.getParentId().equals(n.getId())) {
                isRootNode = false;
                break;
            }
        }
        return isRootNode;
    }

    // 获取集合中所有的根节点
    public List<Node> getRootNodes() {
        List<Node> rootNodes = new ArrayList<Node>();
        for (Node n : nodes) {
            if (rootNode(n)) {
                rootNodes.add(n);
            }
        }
        return rootNodes;
    }

    public static class Node {
        private String id;
        private String parentId;
        private String title;//name;
        private String code;
        private Integer level;
        private List<Node> children;

        public Node() {}
        public Node(String id,String parentId,String title,String code,Integer level){
            super();
            this.id = id;
            this.parentId = parentId;
            this.title = title;
            this.code = code;
            this.level = level;
        }


        public String getId() {
            return id;
        }

        public void setId(String id) {
            this.id = id;
        }

        public String getParentId() {
            return parentId;
        }

        public void setParentId(String parentId) {
            this.parentId = parentId;
        }

        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }

        public String getCode() {
            return code;
        }

        public void setCode(String code) {
            this.code = code;
        }

        public Integer getLevel() {
            return level;
        }

        public void setLevel(Integer level) {
            this.level = level;
        }

        public List<Node> getChildren() {
            return children;
        }

        public void setChildren(List<Node> children) {
            this.children = children;
        }
    }
}

下面就是查库，然后调用工具类，封装数据啦~

这里就是查一下数据库，创建一个可以装节点对象的list集合（TreeBuilder.Node范型）来装查到的数据，然后遍历查到的结果，每条记录都创建一个节点对象，初始化每个节点对象。
public Node(String id,String parentId,String title,String code,Integer level)
看方法的名字基本就可以猜到里面的参数都是干什么的了，最后一个参数level表示的是几级节点。最后将封装好的传递到前台即可。

前台页面

<button class="layui-btn layui-btn-sm" id="sel_org" lay-demo="setChecked" style="background:none">选择部门</button>
<button class="layui-btn layui-btn-sm" id="btn_sm1" οnclick="" lay-demo="getChecked">查询</button>

 //页面首次加载，渲染树菜单
        $.post("url", {
            p_action: "get_app_user_org"
        }, function (data) {
            tree.render({
                elem: '渲染树的元素id'
                , data: data.data
                , showCheckbox: true
                , id: 'org_tree'
                , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
            });
            //添加事件
            util.event('lay-demo', {
                getChecked: function (othis) {//取值方法
                    list=[];//赋值时一定要传一个数组，不可以是字符串，之前就是踩坑了，找了好久问题
                    var checkedData = tree.getChecked('org_tree'); //获取选中节点的数据
                    var ids = getChecked_list(checkedData);
                    var idsArr=ids.split(",");
                    if(idsArr!=null){
                        for(var i=0;i<idsArr.length;i++){
                            list.push(idsArr[i]);
                        }
                    }
                    $("#app_user_org_id").val(list.toString());
                },
                //赋值方法
                setChecked: function(){
                    
                    tree.setChecked('org_tree', list); //勾选指定节点
                }
            });
 
        }, "json");

   // 获取选中节点的id
            function getChecked_list(data) {
                var id = "";
                $.each(data, function (index, item) {
                    if (id != "") {
                        id = id + "," + item.id;
                    }
                    else {
                        id = item.id;
                    }
                    var i = getChecked_list(item.children);
                    if (i != "") {
                        id = id + "," + i;
                    }
                });
                return id;
            }

大概就是这样了