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>

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

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;
	} }
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
  
84
  
85
  
86
  
87
  
88
  
89
  
90
  
91
  
92
  
93
  
94
  
95
  
96
  
97
  
98
  
99
  
100
  
101
  
102
  
103
  
104
  
105
  
106
  
107
  
108
  
109
  
110
  
111
  
112
  
113
  
114
  
115
  
116
  
117
  
118
  
119
  
120
  
121
  
122
 

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

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; }

}
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
 

控制类调用：

@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;
	}
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

返回的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":[ ] }
]

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
 

前端调用：

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

  
 

  
1
  
2
 

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

  
 

  
1
  
2
  
3
 

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); } });

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

实现树形菜单：

文章来源: smilenicky.blog.csdn.net，作者：smileNicky，版权归原作者所有，如需转载，请联系作者。

原文链接：smilenicky.blog.csdn.net/article/details/85418473