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 });
最后页面展示出来的效果就如前面的图所示。。。大功告成~~~