bootstrap treeview实现菜单树

本博客，介绍通过Bootstrap的treeview插件实现菜单树的功能。

treeview链接：http://www.htmleaf.com/Demo/201502141380.html

ORM框架是Mybatis的，这里其实就是单表查询而已，获取要做菜单树的信息表，这张表必须要有一个parentSeq，然后通过关联实现。

<sql id="groupDefineColum">
            gr.seq,gr.group_name,gr.group_desc,gr.group_type,gr.parent_seq,case when (select count(1)
                        from t_group_define
                       where parent_seq = gr.seq)> 0 then ‘true‘ else ‘false‘
            end as subFlag
    </sql>
    
    <!-- 获取信息->
    <select id="listGroupDefineInfo" resultType="GroupDefineModel">
        select <include refid="groupDefineColum"></include>
        from t_group_define gr
    </select>

Model类：

package com.group.model;


/**
 * 
 * <pre>
 *  分组定义模型
 * </pre>
 *
 * @author nicky
 * <pre>
 * 修改记录
 *    修改后版本:     修改人：  修改日期: 2018年11月7日   修改内容:
 * </pre>
 */
public class GroupDefineModel implements Serializable{

    private static final long serialVersionUID = 1L;
    
    private String seq;//UUID主键
    
    private String uuid;//uuid
    
    private String groupName;//分组名称
    
    private String groupDesc;//分组描述
    
    private Long groupType;//分组的类型（暂时只对true_false表进行分组，1：truefalse表）
    
    private String parentSeq;//父分组主键
    
    private String href;//链接,格式为：#href
    
    private String subFlag;//判断一个树是否有子级节点
    
    private String state;//树表格是否展开属性
    
    private List<GroupDefineModel> subGroup;//子级分组列表

    public String getSeq() {
        return seq;
    }

    public void setSeq(String seq) {
        this.seq = seq;
    }

    public String getUuid() {
        return uuid;
    }

    public void setUuid(String uuid) {
        this.uuid = uuid;
    }
    
    public String getGroupName() {
        return groupName;
    }

    public void setGroupName(String groupName) {
        this.groupName = groupName;
    }

    public String getGroupDesc() {
        return groupDesc;
    }

    public void setGroupDesc(String groupDesc) {
        this.groupDesc = groupDesc;
    }

    public Long getGroupType() {
        return groupType;
    }

    public void setGroupType(Long groupType) {
        this.groupType = groupType;
    }

    public String getParentSeq() {
        return parentSeq;
    }

    public void setParentSeq(String parentSeq) {
        this.parentSeq = parentSeq;
    }

    public String getHref() {
        return href;
    }

    public void setHref(String href) {
        this.href = href;
    }

    public String getSubFlag() {
        return subFlag;
    }

    public void setSubFlag(String subFlag) {
        this.subFlag = subFlag;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public List<GroupDefineModel> getSubGroup() {
        return subGroup;
    }

    public void setSubGroup(List<GroupDefineModel> subGroup) {
        this.subGroup = subGroup;
    }

    
}

然后通过我封装的工具类构建数据

package com.group.util;

import java.util.ArrayList;
import java.util.List;

import org.apache.commons.lang3.StringUtils;

/**
 * 
 * <pre>
 *  构建一棵分组树
 * </pre>
 *
 * @author nicky
 * <pre>
 * 修改记录
 *    修改后版本:     修改人：  修改日期: 2018年11月7日   修改内容:
 * </pre>
 */
public class GroupTreeUtils {
    public List<GroupDefineModel> groups;

    public List<GroupDefineModel> list = new ArrayList<GroupDefineModel>();

    /**
     *  buildGroupTree：(构建分组树)
      * @author nicky
      * @date   2018年11月7日下午4:34:00
      * @return
     */
    public List<GroupDefineModel> buildGroupTree(List<GroupDefineModel> groups) {
        this.groups = groups;
        for (GroupDefineModel gr : groups){
            if("0".equals(gr.getParentSeq())) {//根级目录
                GroupDefineModel group = new GroupDefineModel();
                group.setSeq(gr.getSeq());
                group.setParentSeq(gr.getParentSeq());
                group.setGroupName(gr.getGroupName());
                group.setGroupDesc(gr.getGroupDesc());
                group.setGroupType(gr.getGroupType());
                group.setHref("#"+gr.getSeq());
                group.setSubGroup(treeChild(gr.getSeq()));
                list.add(group);
            }
        }
        return list;
    }
    
    /**
     *  treeChild:(递归遍历子级分组)
      * @author nicky
      * @date   2018年11月7日下午4:33:47
      * @return
     */
    public List<GroupDefineModel> treeChild(String seq){
        List<GroupDefineModel> list = new ArrayList<GroupDefineModel>();
        for(GroupDefineModel gr : groups){
            GroupDefineModel group = new GroupDefineModel();
            if(seq.equals(gr.getParentSeq())){
                group.setSeq(gr.getSeq());
                group.setParentSeq(gr.getParentSeq());
                group.setGroupName(gr.getGroupName());
                group.setGroupDesc(gr.getGroupDesc());
                group.setGroupType(gr.getGroupType());
                group.setHref("#"+gr.getSeq());
                group.setSubGroup(treeChild(gr.getSeq()));//递归循环
                list.add(group);
            }
        }
        return list;
    }

}

控制类调用：

@RequestMapping("/toGroupPage")
    public ModelAndView toGroupPage(HttpServletRequest request,TrueFalseModel t){
         ModelAndView model = new ModelAndView();
         try {
             logger.info("跳转到页面");
             // 分组树构建 
             List<GroupDefineModel> groupDefineList = groupDefineService.listGroupDefineInfo();
    
             GroupTreeUtils treeUtil = new GroupTreeUtils();
             groupDefineList = treeUtil.buildGroupTree(groupDefineList);
             String groupTreeJson = JSON.toJSONString(groupDefineList);
             groupTreeJson = groupTreeJson.replace("groupName","text");
             groupTreeJson = groupTreeJson.replace("subGroup","nodes");
             logger.info("分组树信息："+groupTreeJson);
             model.addObject("groupTreeJson",groupTreeJson);
             model.setViewName("group/groupList");
         } catch (Exception e) {
             logger.error("t跳转到页面出错！",e);
         }
         return model;
    }

返回的json数据

[
    {
        "groupDesc":"移动门户描述","text":"移动门户","groupType":1,"href":"#7CF98E8FE9870991E0530100007F9288","parentSeq":"0","seq":"7CF98E8FE9870991E0530100007F9288","nodes":[
            {
                "groupDesc":"文章收藏描述","text":"文章收藏","href":"#7CF98E8FE9880991E0530100007F9288","parentSeq":"7CF98E8FE9870991E0530100007F9288","seq":"7CF98E8FE9880991E0530100007F9288","nodes":[

                ]
            }
        ]
    },{
        "groupDesc":"测试","text":"网上申办","href":"#7CF946FFABE8083FE0530100007FF726","seq":"7CF946FFABE8083FE0530100007FF726","nodes":[

        ]
    }
]

前端调用：

<link rel="stylesheet" href="${resource}/bootstrap/bootstrap.min.css" />
<script type="text/javascript" src="${resource}/treeview/bootstrap-treeview.js"></script>

<div id="groupTree" class="group_tree" >
            <div class="div_group" id="div_group"></div>
        </div>

js：

/* 分组树事件绑定  */
            var groupTreeData = ‘${groupTreeJson}‘;
            $(‘#div_group‘).treeview({
                color : "#428bca",enableLinks: true,data : groupTreeData,onNodeSelected : function(event,node) {
                    document.getElementById(node.seq).scrollIntoView();
                },onNodeUnselected:function (event,node) {
                    // var anh = $(‘#top‘).offset().top;
                    // debugger
                    // $("#content").stop().animate({scrollTop:anh},400);
                }
            });

实现树形菜单：