关于layui的树形表格回显

关于layui默认的tree再回显时会进行级联勾选，这是个bug，已有人在社区发表讨论与建议了。目前个人采用的解决办法：是在后台判断当前角色拥有的子级id进行设置checked:true，这样在前台展示的时候它就会通过子级的id自动去级联勾选父级的id，是我们想要的展示效果。

主后台代码：

// layui 菜单权限 start

    /**
     * layui 的tree 方式
     * @author master
     */

    /**
     * 获取封装方法
     *
     * @param myMenus  当前自身的菜单集合
     * @param allMenus 所有的菜单集合
     * @return
     */
    public static List<LayUINode> getLayUIMenus(List<SysMenu> allMenus, List<SysMenu> myMenus) {
        List<LayUINode> layUINodes = new ArrayList<>();
        if (allMenus.size() != 0) {
            LayUINode treeNode;
            for (int i = 0; i < allMenus.size(); i++) {
                if (null == allMenus.get(i).getParentId() || "".equals(allMenus.get(i).getParentId())) { //封装父节点
                    treeNode = new LayUINode();
                    treeNode.setId(String.valueOf(allMenus.get(i).getId()));
                    treeNode.setTitle(allMenus.get(i).getName());
                    treeNode.setHref(allMenus.get(i).getHref());
                    //treeNode.setChecked(checkMenu(String.valueOf(allMenus.get(i).getId()), myMenus));
                    treeNode.setChildren(getLayChildren(allMenus, myMenus, String.valueOf(allMenus.get(i).getId())));
                    layUINodes.add(treeNode);
                }
            }
        }
        return layUINodes;
    }

    /**
     * 校验菜单是否选中
     *
     * @param id
     * @param myMenus
     * @return
     */
    private static boolean checkMenu(String id, List<SysMenu> myMenus) { // 回显判断
        for (int j = 0; j < myMenus.size(); j++) {
            if (id.equals(String.valueOf(myMenus.get(j).getId()))) {
                return true;
            }
        }
        return false;
    }

    /**
     * 菜单children
     *
     * @param allMenus
     * @param myMenus
     * @param id
     * @return
     */
    private static List<LayUINode> getLayChildren(List<SysMenu> allMenus, List<SysMenu> myMenus, String id) {
        List<LayUINode> layUINodes = new ArrayList<>();
        LayUINode treeNode;
        if (allMenus.size() != 0) {
            for (int i = 0; i < allMenus.size(); i++) {
                if (null != allMenus.get(i).getParentId()) {
                    if (id.equals(String.valueOf(allMenus.get(i).getParentId()))) { // 子菜单为1标识
                        treeNode = new LayUINode();
                        treeNode.setId(String.valueOf(allMenus.get(i).getId()));
                        treeNode.setTitle(allMenus.get(i).getName());
                        treeNode.setHref(allMenus.get(i).getHref());
                        if (allMenus.get(i).getIsButton() == 0) { // 是按钮
                            treeNode.setChecked(checkMenu(String.valueOf(allMenus.get(i).getId()), myMenus));
                        }
                        treeNode.setChildren(getLayChildren(allMenus, myMenus, String.valueOf(allMenus.get(i).getId())));
                        layUINodes.add(treeNode);
                    }
                }
            }
        }
        return layUINodes;
    }

    // layui 菜单权限 方式end

前台主代码：

<script src="../../../layuiadmin/layui/layui.js"></script>
<script>
    let menuIds = [];
    let t;
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'tree'], function () {
        let $ = layui.$
            , form = layui.form
            , tree = layui.tree;

        layui.config({base: '../../../layuiadmin/js/layui_exts/'})
        // 自定义ajax模块组件使用示例，继承自上方的base根目录属性
            .use(['tokenAjax2'], function () {
                let $token = layui.tokenAjax2;
                let roleId = $('#roleId').val();
                $token.tokenAjax2('sys/treeMenu', {'roleId':roleId}, function (data) {
                    if (data.code == 0) {
                        //渲染
                        t = tree.render({
                            id: 'treeId'
                            ,
                            elem: '#treeId'  //绑定元素
                            , showCheckbox: true
                            , accordion: false
                            , data: data.data
                            , oncheck: function (obj) {
                            }
                        });
                        // 获取选中的节点id
                        // getTreeId(t.getChecked());
                        //tree.setChecked('treeId', [2]); //批量勾选 id 为 2、3 的节点
                    }
                });
            });
    });

    /**
     * 递归获取选中菜单的id
     * @type {Array}
     */
    function getTreeId(node) {
        if (node.length > 0) {
            for (let i = 0; i < node.length; i++) {
                menuIds.push(node[i].id);
                if (node[i].children) {
                    getTreeId(node[i].children);
                }
            }
            return menuIds;
        }
    }

    /**
     * 父页面调用返回数组参数
     * @returns {[]}
     */
    function returnMenuIds() {
        menuIds = [];
        // 获取选中的节点id
        getTreeId(t.getChecked());
        return menuIds;
    }


</script>