198. tree 菜单（使用 bootstrap treeview ）

时间 2019-11-21

标签 tree 菜单使用 bootstrap treeview 栏目 Bootstarp 繁體版

原文原文链接

1. 效果

2. 代码

2.1 前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>javascript

<meta name="viewport" content="width=device-width, initial-scale=1">
       <title>bootstrap入门</title>
       
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
       
       <script src="js/jquery-2.1.4.min.js"></script>
       
       <script src="js/bootstrap.min.js"></script>

       
       <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css"/>
       <link rel="stylesheet" type="text/css" href="css/bootstrap-treeview.min.css"/>
       <script src="js/bootstrap-treeview.js"></script>
       <script src="js/bootstrap-datetimepicker.js"></script>
       <script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
       <style type="text/css">
           #div{outline:0px ;width: 200px; height:100%;}
       </style>
       <script type="text/javascript">
               $(function(){
           //var url="${pageContext.request.contextPath }/loadTreeByUserUtilsNext.action";//动态获取后台json
           var url="./jsonData.json"; //调用本地的js
           var data="";//无参数的写法
           $.post(url,data,function(result){
               console.log(result)
               return $("#div").treeview({
                                   data:result,
                                   color:"#428bca",
                                   levels:2,
                                   onNodeSelected:function(event,node){
                                       console.log("选中了");
                                   },
                                   onNodeUnselected:function(event,node){
                                       console.log("取消了");
                                   }
                               });

           },"json");
               })
       </script>
</head>
<body>

       <div id="div"></div>
</body>
</html>css

须要的json格式html

[{
   "id": "e269accb41c94206aacf8f024ad0e31e",
   "text": "组织架构",
   "level": 1,
   "nodes": [{
       "id": "03f6865dd6404a46b22ae9d03868c4d6",
       "text": "部门管理",
       "level": 2,
       "parentid": "e269accb41c94206aacf8f024ad0e31e",
       "url": "https://baike.baidu.com/item/UUID/5921266?fr=aladdin"
   }, {
       "id": "d8722ead863a4d8fa76ebabe24ef9de4",
       "text": "职位管理",
       "level": 2,
       "parentid": "e269accb41c94206aacf8f024ad0e31e",
       "url": "http://sports.qq.com/"
   }],
   "parentid": "0",
   "url": ""
}, {
   "id": "e701dd7a8be049f69884c587a1ec4a62",
   "text": "员工信息",
   "level": 1,
   "nodes": [{
       "id": "7d958d2027334a53b3d5b149b9c70969",
       "text": "员工管理",
       "level": 2,
       "nodes": [{
           "id": "7e06781b7e4b4338ab4fcae2254e5365",
           "text": "所有",
           "level": 3,
           "parentid": "7d958d2027334a53b3d5b149b9c70969",
           "url": "https://www.baidu.com/"
       }, {
           "id": "dad0fa3d459e41c0b48867c2cdb7c5c0",
           "text": "在职",
           "level": 3,
           "parentid": "7d958d2027334a53b3d5b149b9c70969",
           "url": "https://jingyan.baidu.com/article/d8072ac48a423fec95cefda6.html"
       }, {
           "id": "122ac1dcb8dc4d24a797968cbaa4344a",
           "text": "离职",
           "level": 3,
           "parentid": "7d958d2027334a53b3d5b149b9c70969",
           "url": "https://jingyan.baidu.com/article/6b97984de49a461ca2b0bfcb.html"
       }],
       "parentid": "e701dd7a8be049f69884c587a1ec4a62",
       "url": ""
   }, {
       "id": "362ac1dcb8dc4d24a797968cbaa43689",
       "text": "薪资管理",
       "level": 2,
       "parentid": "e701dd7a8be049f69884c587a1ec4a62",
       "url": "https://www.163.com/"
   }],
   "parentid": "0",
   "url": ""
}]

2.2 后台

2.2.1 action层

2.2.2 service

工具类：前端

package cn.ma.power.utils;java

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;node

import com.alibaba.fastjson.JSONArray;jquery

public class TreeUtils {

   public static String getTreeJson(List<HashMap<Object, Object>> resultMap){
       //定义一个Map集合存储按指定顺序排列好的菜单
       Map<String, List<Map<Object,Object>>> temp = new HashMap<String, List<Map<Object,Object>>>();


       for (HashMap<Object,Object> map : resultMap) {
           //若是temp的键包含这个parentid
           if(temp.containsKey(map.get("parentid").toString())){
               //那么把全部相同parentid的数据所有添加到该parentid键下
               temp.get(map.get("parentid").toString()).add(map);
           }else{
               //初始化temp 第一次用
               List<Map<Object,Object>> list = new ArrayList<Map<Object,Object>>();
               list.add(map);
               temp.put(map.get("parentid").toString(), list);
           }
       }
       //定义一个完整菜单列表
       ArrayList<Map<Object,Object>> array = new ArrayList<Map<Object,Object>>();

       for (HashMap<Object, Object> hashMap : resultMap) {
           //若是temp中的键与当前id一致
           if(temp.containsKey(hashMap.get("id").toString())){
               //说明temp是当前id菜单的子菜单
               hashMap.put("nodes", temp.get(hashMap.get("id").toString()));
           }
           //遇到顶级菜单就添加进完整菜单列表
           if(hashMap.get("parentid").toString().equals("0")){
               array.add(hashMap);
           }

       }
       String resultJson = JSONArray.toJSONString(array);


       return resultJson;
   }git

}
json

2.2.3 mapper

表结构：bootstrap

3. 代码

百度云：

连接：https://pan.baidu.com/s/1k18IQs7yKgIlNXJCkhaC-Q
提取码：f6f2

码云：

https://gitee.com/Luck_Me/menu_tree/tree/master

198. tree 菜单 （使用 bootstrap treeview ）