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_definewhere 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;//uuidprivate String groupName;//分组名称private String groupDesc;//分组描述private Long groupType;//分组的类型（暂时只对true_false表进行分组，1：truefalse表）private String parentSeq;//父分组主键private String href;//链接,格式为：#hrefprivate 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);}});

实现树形菜单：

Bootstrap系列之treeview实现菜单树相关推荐

Bootstrap系列 -- 26. 下拉菜单标题
Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"><butt ...
Bootstrap系列 -- 28. 下拉菜单状态
下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus). 下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled).这两种状态使用方法 ...
Unity菜单树 TreeView
今天说一下读取Json文件,生成菜单树. 菜单树可以直接去Asset Store搜索TreeView,下载免费的那个那么拿到菜单树之后,怎么将Json数据植入到我菜单树里面呢? 这就需要我们对Jso ...
ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
Unity菜单树模糊查询
接上周菜单树,链接: 菜单树生成. 菜单树的优势体现在便于上下级转换,但是当树的节点较多,深度较大的时候,想要找到某个节点,光靠一级一级展开也是麻烦于是查询功能也就很有必要了. 首先创建一个Inpu ...
仿WINDWS无限级Ajax菜单树升级1.2版(菜单名支持非法字符)
仿WINDWS无限级Ajax菜单树升级1.2版(菜单名支持非法字符) 1.1版出现了输入非法字符与空格后导致程序出错的BUG,我对程序再次升级为1.2版,这次将支持非法字符式的菜单名 ...
Mybatis通过colliection属性递归获取菜单树
1.现有商品分类数据表category结构如下,三个字段都为varchar类型 2.创建商品分类对应的数据Bean /*** */ package com.xdw.dao;import java.ut ...
仿WINDWS无限级Ajax菜单树升级1.3版(修补了严重BUG)
仿WINDWS无限级Ajax菜单树升级1.3版(修补了严重BUG) WINDWS无限级Ajax菜单树又升级了(1.3版) 对以下BUG进行了修复 1.只能在文字上 ...
php 显示下拉菜单,PHP在下拉列表中显示菜单树
菜单树的功能: function category_tree($parent_id) { $sql = "SELECT * FROM menu WHERE parent_id ='" ...

Bootstrap系列之treeview实现菜单树

Bootstrap系列之treeview实现菜单树相关推荐

最新文章

热门文章