Bootstrap treeview 多级树形菜单中 如何实现页面跳转时节点自动选中

前言:

        方向: java - Spring MVC - 前端框架 Bootstrap - Bootstrap treeview

        案例目标:处理树状布局中页面跳转选中回显问题;

        案例必备小知识:

                Spring MVC

                前端框架:Bootstrap

案例在线:

        1.构建Bootstrap框架(树状结构):

                1.1:创建菜单实体类:

                使用@JsonProperty将属性序列化为与树状结构属性一致的名称

                 1.2:使用递归算法将数据中的菜单数据加载至List<Menu>中

<resultMap id="rm" type="Menu" autoMapping="true">
    <id column="mid" property="mid"/>
    <collection property="menuList" select="getTree" column="mid"/>
</resultMap>
<select id="getTree" resultMap="rm">
    select *
    from t_menu where pid = #{mid}
</select>

                1.3:菜单页加载树状结构

 

//ajax加载树状结构
$.post(
    "/getTree",
    function (obj){
        $("#list-tab").treeview({ //加载树
            data:obj,  //添加节点数据
            onNodeSelected: function (a,b){  //点击节点触发节点事件
                if (null!=b.href && ""!=b.href){
                    $("#nav-tabContent").load(b.href);  //通过href加载页面数据到菜单的右侧
                }
            }
        })
    }
);

        2.菜单效果展示:

         3.问题描述:

                当点击左侧菜单栏时,菜单项会自动选中,并加载数据,但在右侧页面进行跳转时只能加载数据,不能自动选中左侧菜单项;

        4.解决方案:

                在页面跳转时携带跳转路径,在菜单页进行判断并选中菜单项;

//核心代码
$("#list-tab").treeview("expandAll"); //展开所有节点

var node = $("#list-tab").treeview('getUnselected'); //获取所有未选中的节点并组成数组

if (null!='${url}' && ""!='${url}'){
    for(var i = 0;i<node.length;i++){//循环数组
        if ('${url}'==node[i].href){ //判断路径
            $("#nav-tabContent").load(node[i].href); //加载右侧数据
            $("#list-tab").treeview('selectNode',[node[i]]); //选中菜单项
        }
    }
}

小结:

        获取所有节点的方法有很多种,本案例中采用'getUnselected'方法获取,大家也可以通过其他方法实现功能;

声明:

        此文内容已经过测试可用,若有问题,请及时联系小编;

        此文仅支持交流学习之用,不支持用作它途,欢迎大家交流指正;