Bootstrap系列之treeview实现菜单树

华为云博客 技术博客 13836 21

本博客，介绍通过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

（完）