多層json的構造，取值，還有使用bootstrap的tree view在前端展現的相關問題

bootstrap-tree view是一款很是好用的插件，它能夠添加任意多層節點，效果以下所示：

使用以前須要在HTML頁面添加依賴文件：

<link href="bootstrap.css" rel="stylesheet">
<script src="jquery.js"></script> <script src="bootstrap-treeview.js"></script>

它的樹結構以下所示：

var tree = [

   {

     text: "Parent 1" ,

     nodes: [

       {

         text: "Child 1" ,

         nodes: [

           {

             text: "Grandchild 1"

           },

           {

             text: "Grandchild 2"

           }

         ]

       },

       {

         text: "Child 2"

       }

     ]

   },

   {

     text: "Parent 2"

   }

]; 


text參數是必選項，固然你還能夠根據實際須要添加其餘參數，以下圖所示，這是我項目中遇到的一個須要展現的部分樹結構。。

[
  {
    "id": 33, "text": "書籍\/雜誌\/報紙", "nodes":[ { "id": 50004788, "text": "工業\/農業技術", "nodes": [ { "id": 50004956, "text": "交通\/運輸" }, { "id": 50004782, "text": "農業", "nodes": [ { "id": 50004786, "text": "農業基礎科學" }, { "id": 50004787, "text": "園藝" }, { "id": 50004785, "text": "林業" }, { "id": 50004784, "text": "漁業" }, { "id": 50004783, "text": "畜牧\/養殖" } ] } 　　　　　] 　　　　} 　　] 　} ]

這個樹有四層，實際展現效果以下：

剛開始由於我以前作過一些基礎工做，這些結構我都有，因此我手動地按照tree view要求的結構構造了個人json文件，但我要在前端頁面展現出來，所以我還要讀取json文件，再把它封裝一下傳到前端。。。。這個過程費了我老大的勁了。。。。。真的是，最初爲了省事，結果最後愈來愈麻煩。。。下面我將我這個費勁的過程記錄一下。不過這樣也是有好處的，好比樹結構是固定不變的，就能夠採用這個方法。

首先是讀取文件，此處要注意字符問題，若是代碼中有中文，必定要注意在讀文件的過程當中要設置字符編碼。

 1 String cateList = "";  2 try {  3 String url = Thread.currentThread().getContextClassLoader().getResource("xx.json").getFile();  4 FileInputStream fis = new FileInputStream(url);  5 InputStreamReader isr = new InputStreamReader(fis, "UTF-8");  6 br = new BufferedReader(isr);  7 String tempString = null;  8 StringBuilder sb = new StringBuilder();  9 while ((tempString = br.readLine()) != null) { 10  sb.append(tempString); 11  } 12 cateList = sb.toString(); 13 }catch (IOException e){ 14  e.printStackTrace(); 15 }

這裏我先將xx.json按行讀取，存放到cateList中，而後開始進行json的轉換

 1         JSONArray jsonArray = JSONArray.fromObject(cateList);       //將讀取的數據轉換爲JSONArray  2 Map<String, JSONObject> map_parent = new HashMap<>(); //存放最外層數組  3 Map<String, JSONObject> map = new HashMap<>(); //第二層  4 Map<String, JSONObject> map_child = new HashMap<>(); //第三層  5 Map<String, JSONObject> map_grandchild = new HashMap<>(); //第四層  6 for (int i = 0; i < jsonArray.size(); i++) {  7 CategoryNode node_parent = new CategoryNode();  8 JSONObject jsonObject = jsonArray.getJSONObject(i);  9 node_parent.setId(jsonObject.getInt("id")); 10 node_parent.setText(jsonObject.getString("text")); 11 if(jsonObject.has("nodes")){ 12 JSONArray nodes = jsonObject.getJSONArray("nodes"); 13 CategoryNode node = new CategoryNode(); 14 for(int j=0; j<nodes.size(); j++){ 15 if(nodes.getJSONObject(j).has("nodes")){ 16 JSONArray nodes_child = nodes.getJSONObject(j).getJSONArray("nodes"); 17 CategoryNode node_child = new CategoryNode(); 18 node_child.setId(nodes.getJSONObject(j).getInt("id")); 19 node_child.setText(nodes.getJSONObject(j).getString("text")); 20  node_child.setNodes(nodes_child); 21 String cid_child = String.valueOf(nodes.getJSONObject(j).getInt("id")); 22 JSONObject json_child = JSONObject.fromObject(node_child); 23  map_child.put(cid_child, json_child); 24 for(int k=0; k<nodes_child.size(); k++){ 25 if(nodes_child.getJSONObject(k).has("nodes")) { 26 JSONArray nodes_grandchild = nodes_child.getJSONObject(k).getJSONArray("nodes"); 27 CategoryNode node_grandchild = new CategoryNode(); 28 node_grandchild.setId(nodes_child.getJSONObject(k).getInt("id")); 29 node_grandchild.setText(nodes_child.getJSONObject(k).getString("text")); 30  node_grandchild.setNodes(nodes_grandchild); 31 String cid_grandchild = String.valueOf(nodes_child.getJSONObject(k).getInt("id")); 32 JSONObject json = JSONObject.fromObject(node_grandchild); 33  map_grandchild.put(cid_grandchild, json); 34  } 35  } 36  } 37 node.setId(nodes.getJSONObject(i).getInt("id")); 38 node.setText(nodes.getJSONObject(i).getString("text")); 39 node.setNodes(nodes.getJSONObject(i).getJSONArray("nodes")); 40 String cid_child = String.valueOf(nodes.getJSONObject(i).getInt("id")); 41 JSONObject json = JSONObject.fromObject(node); 42  map.put(cid_child, json); 43  } 44 node_parent.setNodes(jsonObject.getJSONArray("nodes")); 45 JSONObject json = JSONObject.fromObject(node_parent); 46 String cid = String.valueOf(node_parent.id); 47  map_parent.put(cid, json); 48 }else{ 49 JSONObject json = JSONObject.fromObject(node_parent); 50 String id = String.valueOf(node_parent.id); 51  map_parent.put(id, json); 52  } 53 }

上面兩塊代碼就是我從json文件取數據並將數據構形成傳到前端使js可以解析的數據的過程。。。。CategoryNode是我本身構造的bean，裏面是這棵樹的參數的定義以及get，set方法。

 

重點來了~~下面我要講的是我經過調用接口動態獲取json文件須要的信息，並將這些信息按照tree view的格式構造的過程。。。。個人json結構裏面包含了id，text，nodes，其中nodes是一個JSONArray，整棵樹其實就是一個大的nodes包含了數個小的nodes。所以就須要用到遞歸，由於是多層結構，且節點不肯定是不是孩子節點，咱們須要判斷，而後使用遞歸繼續調用。。。代碼以下：

 1 private List uploadCat(Long pid){  2 TaobaoClient client = new DefaultTaobaoClient(SERVER_URL, APP_KEY, SECRET);  3 ItemcatsGetRequest req = new ItemcatsGetRequest();  4 req.setFields("cid,name,is_parent");  5  req.setParentCid(pid);  6 JSONArray cat = new JSONArray();  7 List<Map> list = new ArrayList<>();  8 try {  9 ItemcatsGetResponse rsp = client.execute(req); 10 JSONObject body = JSONObject.fromObject(rsp.getBody()); 11 //下面這行是獲取接口返回的信息，item_cat是一個JSONArray 12 cat = body.getJSONObject("itemcats_get_response").getJSONObject("item_cats").getJSONArray("item_cat"); 13 14 for(int i=0; i<cat.size(); i++){ 15 Map map = new HashMap(); 16 JSONObject json = new JSONObject(); 17 boolean flag = (boolean) cat.getJSONObject(i).get("is_parent"); 18 //判斷是不是父節點，若是是父節點，那麼就要給它構造一個nodes 19 if(flag){ 20 map.put("text", cat.getJSONObject(i).getString("name")); 21 cid = cat.getJSONObject(i).getInt("cid"); 22 map.put("id", cid); 23 pid = new Long((long) cid); 24 map.put("nodes", uploadCat(pid)); //這裏是遞歸調用 25 json = JSONObject.fromObject(map); 26 }else{ 27 map.put("text", cat.getJSONObject(i).getString("name")); 28 cid = cat.getJSONObject(i).getInt("cid"); 29 map.put("id", cid); 30 json = JSONObject.fromObject(map); 31  } 32  list.add(json); 33  } 34 }catch (ApiException e){ 35  e.printStackTrace(); 36  } 37 return list; 38 }

最後經過servlet的一些處理，使這棵樹可以傳到前端頁面展現。。。

前端js中加載樹：

 1 $("#tmallTree").treeview({  2 data: data.result, //後臺傳過來的樹  3 selectedBackColor:"#78A5F1", //設置選中節點的顏色  4 highlightSelected: true, //選中節點時高亮顯示  5 onhoverColor: "#DFF1FB", //鼠標滑過期節點顏色  6 //下面的代碼是設置點擊時不用特地點那個「+」號，而是點擊整個li標籤也能夠展開節點  7 onNodeSelected: function(event, data) {  8 if(data.nodes!=null){  9 var select_node = $('#tmallTree').treeview('getSelected'); 10 if(select_node[0].state.expanded){ 11 $('#tmallTree').treeview('collapseNode',select_node); 12 select_node[0].state.selected=false; 13  } 14 else{ 15 $('#tmallTree').treeview('expandNode',select_node); 16 select_node[0].state.selected=false; 17  } 18 }else{ 19 //獲取選中節點的id 20 node = $("#tmallTree").treeview('getSelected')[0].id; 21  } 22  } 23 });

最後頁面展現出來的效果就如前面的圖所示。。。大功告成~~~