本部落格，介紹通過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":"文章收藏",
                "groupType":1,
                "href":"#7CF98E8FE9880991E0530100007F9288",
                "parentSeq":"7CF98E8FE9870991E0530100007F9288",
                "seq":"7CF98E8FE9880991E0530100007F9288",
                "nodes":[

                ]
            }
        ]
    },
    {
        "groupDesc":"測試",
        "text":"網上申辦",
        "groupType":1,
        "href":"#7CF946FFABE8083FE0530100007FF726",
        "parentSeq":"0",
        "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);
                }
            });

實現樹形選單：