前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >bootstrap treeview实现菜单树

bootstrap treeview实现菜单树

作者头像
SmileNicky
发布2019-01-17 16:19:45
4.3K0
发布2019-01-17 16:19:45
举报
文章被收录于专栏:Nicky's blogNicky's blog

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

实现树形菜单:

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年12月31日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档