拼接字符串，生成tree格式的JSON数组

之前做的执法文书的工作，现在需要从C#版本移植到网页版，从Thrift接口获取数据，加载到对应的控件中

之前用的easyui的Tree插件，通过<ul><li><span></span></li></ul>标签的方式生成node树，条理清晰，虽然麻烦点，但是用循环写几行代码就能搞定，但是，在Ajax的函数里面，tree的样式加载不上，显示的格式就是元素自带的含义，<ul>和<li>，无法点击，下面的工作也就无法完成，我将生成tree的函数移出Ajax，样式就能加载上了，调试了两天毫无进展，心一横，换一个Node插件

首先推荐一个JQuery的库-- JQuery插件库，我在这个插件库里找到一个根据BootStrap开发的树节点

调试了一下，生成了一个我需要的Demo（提示一下，想要生成Tree效果，还需要加载bootstrap的css），代码如下：

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <html>
 3 <head>
 4 <title>测试页面</title>
 5     <link rel="stylesheet" type="text/css" href="lib/css/bootstrap-treeview.css">
 6     <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.css">
 7 </head>
 8 <body>
 9 <div ></div>
10 <script type="text/javascript" src="lib/js/jquery-3.2.1.js"></script>
11 <script type="text/javascript" src="lib/js/bootstrap-treeview.js"></script>
12 
13 <script type="text/javascript">
14 
15     var rootNode= new Array();
16 
17     $(function() {
18         var defaultData = [
19             {
20                 id : "211201",
21                 text: '洪泽湖',
22                 tags: ['洪泽湖'],
23                 nodes: [
24                     {
25                         text: '东咀站',
26                         href: '#child1',
27                         tags: ['2'],
28                         nodes: [
29                             {
30                                 text: '光电',
31                                 href: '#grandchild1',
32                                 tags: ['0'],
33                                 nodes: [
34                                     {
35                                         text: '设备还不错',
36                                         href: '#child1',
37                                         tags: ['2']
38                                     }]
39                             },
40                             {
41                                 text: '雷达',
42                                 href: '#grandchild2',
43                                 tags: ['0']
44                             }
45                         ]
46                     },
47                     {
48                         text: '胡庄站',
49                         href: '#child2',
50                         tags: ['0'],
51 
52                     }
53                 ]
54             },
55             {
56                 text: '太湖',
57                 href: '#parent2',
58                 tags: ['0']
59             },
60             {
61                 text: '鄱阳湖',
62                 href: '#parent3',
63                 tags: ['0']
64             }
65         ];
66 
67         $('#tree').treeview({
68             data: defaultData
69         });
70 
71         //node的单击节点事件
72         $('#tree').on('nodeSelected', function(event, data) {
73            alert(data.tags)
74         });
75 
76     });
77 </script>
78 </body>
79 </html>

View Code