Bootstrap系列之treeview实现菜单树

红太狼 2021-09-17 11:14 425阅读 0赞

本博客，介绍通过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":[
    
            ]
        }
    ]

前端调用：

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);
                    }
    			});

实现树形菜单：  
![在这里插入图片描述][20181230234403884.png]

[20181230234403884.png]: /images/20210812/847699ee4d964c7a8028c9ed69c118ac.png