关于layui的树形表格回显

时间:2025-04-02 15:44:37

关于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 (() != 0) {
            LayUINode treeNode;
            for (int i = 0; i < (); i++) {
                if (null == (i).getParentId() || "".equals((i).getParentId())) { //封装父节点
                    treeNode = new LayUINode();
                    (((i).getId()));
                    ((i).getName());
                    ((i).getHref());
                    //(checkMenu(((i).getId()), myMenus));
                    (getLayChildren(allMenus, myMenus, ((i).getId())));
                    (treeNode);
                }
            }
        }
        return layUINodes;
    }

    /**
     * 校验菜单是否选中
     *
     * @param id
     * @param myMenus
     * @return
     */
    private static boolean checkMenu(String id, List<SysMenu> myMenus) { // 回显判断
        for (int j = 0; j < (); j++) {
            if ((((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 (() != 0) {
            for (int i = 0; i < (); i++) {
                if (null != (i).getParentId()) {
                    if ((((i).getParentId()))) { // 子菜单为1标识
                        treeNode = new LayUINode();
                        (((i).getId()));
                        ((i).getName());
                        ((i).getHref());
                        if ((i).getIsButton() == 0) { // 是按钮
                            (checkMenu(((i).getId()), myMenus));
                        }
                        (getLayChildren(allMenus, myMenus, ((i).getId())));
                        (treeNode);
                    }
                }
            }
        }
        return layUINodes;
    }

    // layui 菜单权限 方式end

前台主代码:

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

        ({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 ( == 0) {
                        //渲染
                        t = ({
                            id: 'treeId'
                            ,
                            elem: '#treeId'  //绑定元素
                            , showCheckbox: true
                            , accordion: false
                            , data: 
                            , oncheck: function (obj) {
                            }
                        });
                        // 获取选中的节点id
                        // getTreeId(());
                        //('treeId', [2]); //批量勾选 id 为 2、3 的节点
                    }
                });
            });
    });

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

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


</script>