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