Bootstrap系列之treeview实现菜单树
【摘要】 本博客，介绍通过Bootstrap的treeview插件实现菜单树的功能。
treeview链接：http://www.htmleaf.com/Demo/201502141380.html
ORM框架是Mybatis的，这里其实就是单表查询而已，获取要做菜单树的信息表，这张表必须要有一个parentSeq，然后通过关联实现。
<sql id="groupDefin...
本博客，介绍通过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
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）