本博客,介绍通过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);
}
});

实现树形菜单:

bootstrap treeview实现菜单树的更多相关文章

  1. 初始化bootstrap treeview树节点

    最近在做启明星图库时,使用了Jquery Bootstrap  Treeview插件.但是,遇到了一个初始化的问题.先看效果如下: 当用户打开图库时,左边分类第一个类别是“所有分类”,默认需要选中. ...

  2. 基于bootstrup treeview多级列表树插件

    <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. bootstrap 下拉菜单不显示的解决办法

    bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...

  4. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  5. java实现的可以无限级别添加子节点的菜单树

    网上大部分菜单树,都是单独用js代码来实现的,这样做的缺点是:用户无法动态的设置菜单项,比如,超级管理员可能需要根据每个用户的权限,赋予他们不同的系统功能,不同的功能对应着不同数量的菜单项. 对于此问 ...

  6. 以正确的姿势实现一棵JavaScript菜单树

    菜单树是常见的前端特效, 一般长下面这样 还有各种形态的变种, 有长这样的 也有长这样的 尽管这些菜单的相貌都不尽相同, 在功能实现的本质上却都是相同的.实现程序的大致流程如下 读取服务器端的菜单数据 ...

  7. Bootstrap下拉菜单

    前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

  8. vue中组件之间的相互调用,及通用后台管理系统左侧菜单树的迭代生成

    由于本人近期开始学习使用vue搭建一个后端管理系统的前端项目,在左侧生成菜单树的时候遇到了一些问题.在这里记录下 分析:由于本人设定的菜单可以使多级结构,直接使用vue的v-for 遍历并不是很方便. ...

  9. Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

    1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. Java中的Integer和int

    Java中的Integer是引用类型,而int是基本类型.Integer是int的包装器类型. java中的基本类型有布尔类型boolean;字符类型char;整数类型byte,int,long,sh ...

  2. Unity3D 在Update中不要过多地修改Transform 信息

    前文说到碰撞检测时候,不要在Update内部尝试移动GameObject 来检查碰撞检测,这样是徒劳无功.但是 说到 因为你移动的过程中其实并没有将实际的移动位置更新到物理引擎,只是做了个缓存而已, ...

  3. 第一个VS2015 Xaramin Android项目(终)

    其实还有一个问题没解决,也拖很久了.中途公司的项目太紧导致无法学习更新. 之前的问题是这样的:项目搭建成功了,App也成功发布到虚拟机.便尝试增加控件 Xaml 设计界面如下: 但是在虚拟机运行却这样 ...

  4. 图解HTTP第六章

    HTTP 报文 1>HTTP 报文 2>HTTP 请求报文 在请求中,HTTP 报文由方法.URI.HTTP 版本.HTTP 首部字段.报文主体(不一定需要)等部分构成. 3>HTT ...

  5. k8s初始化搭建方法

    http://www.cnblogs.com/cocowool/p/kubeadm_install_kubernetes.html https://www.kubernetes.org.cn/doc- ...

  6. vuex的mutations传值

    mutations是要通过方法触发的,用于更改store里的数据的.this.$store.commit("mutationsName") 例子: store.js import ...

  7. 数据结构C语言版-队列

    #include <stdlib.h> #include <stdio.h> #include <iostream> using namespace std; ty ...

  8. 【慕课网实战】六、以慕课网日志分析为例 进入大数据 Spark SQL 的世界

    DataFrame它不是Spark SQL提出的,而是早起在R.Pandas语言就已经有了的.   A Dataset is a distributed collection of data:分布式的 ...

  9. WebServices 注解汇总

    Web Service 元数据注释 @WebService 1.serviceName: 对外发布的服务名,指定 Web Service 的服务名称:wsdl:service.缺省值为 Java 类的 ...

  10. CSS3新增特性及知识学习线路