拼接字符串，生成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 id="tree"></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>
效果如图，单击可以节点的tags属性：
我从thrift获取的结构是一个数组，先返回第一级数据，然后是第二级数据，最后是第三级数据，刚才Demo的数据格式中，我只有根据三级数据数据的fatherid和二级数据的id是否吻合来判断二级数据是否有二级数据，同理判断一级数据是否有二级数据，也就是说，我需要知道所有的数据之后才能知道每个层级的详细数据，然后才能完成Tree格式的数据赋值（我同学让我用递归。我暂时还没明白递归的用法，先按自己的思路来）
所以，思路如下：
首先定义三个空数组，分别存放不同层级的数组，然后遍历从Thrift获取的数组，分别存放到三个空数组中，代码如下：
1 var node = new Array(); 2 //字符串转数组 3 node = eval(nodelist); 4 var nodelength = node.length; 5 6 var nodefather = new Array(); 7 var nodeson = new Array(); 8 var nodegrandson = new Array(); 9 var LawsId = ""; 10 var LawsName = ""; 11 var LawsFatherId = ""; 12 13 var sonnumber = 0; 14 var groungsonnumber = 0; 15 for (var i = 0; i < nodelength; i++) { 16 if (node[i].NLevel === 1){ 17 LawsId = node[i].NID; 18 LawsName = node[i].szName; 19 LawsFatherId = node[i].NParentID; 20 nodefather[i] = new Array(LawsId,LawsName,LawsFatherId); 21 } 22 if (node[i].NLevel === 2){ 23 24 LawsId = node[i].NID; 25 LawsName = node[i].szName; 26 LawsFatherId = node[i].NParentID; 27 nodeson[sonnumber]= new Array(LawsId,LawsName,LawsFatherId); 28 sonnumber++; 29 } 30 if (node[i].NLevel === 3){ 31 32 LawsId = node[i].NID; 33 LawsName = node[i].szName; 34 LawsFatherId = node[i].NParentID; 35 nodegrandson[groungsonnumber] = new Array(LawsId,LawsName,LawsFatherId); 36 groungsonnumber++; 37 } 38 }
分别获取三个层级数据的个数
var nodefatherLength = nodefather.length; var nodeSonLength = nodeson.length; var nodeGrandSonLength = nodegrandson.length;
所有数据整理完毕，下面开始字符串的拼接
首先定义一个字符串str；
var str = "[";
接着循环第一层级的数据
1 var str = "["; 2 for(var i = 0;i<nodefatherLength;i++){ 3 if(i+1 === nodefatherLength){ 4 str += "{id:'" + nodefather[i][0] + "',text:'" + nodefather[i][1] + "'}"; 5 break; 6 } 7 str += "{id:'" + nodefather[i][0] + "',text:'" + nodefather[i][1] + "'},"; 8 } 9 str+="];"; 10 11 var nodedata = eval(str); 12 13 $('#lawsnode').treeview({ 14 data: nodedata 15 });
有个小插曲，在我进行eval()函数转JSON数组之前，这是一个字符串数据，字符串数据添加到tree里面还是无法识别的，当时脑袋一热，用substring()函数选择了1-数组.length-1的索引，放到tree里面发现还是字符串，这才想起来直接eval()转数组
效果如图所示：
拼接完一级数据之后，开始拼接二级数据，同理，拼接完三级数据，完成后更新拼接字符串代码如下，我每一行都写了注释，理清逻辑之后还是很好理解的：
1 //定义一个起始的字符串 2 var str = "["; 3 //循环父节点 4 for(var i = 0;i<nodefatherLength;i++){ 5 //如果到达节点的最后一位 6 //如果不是最后一个节点，数据字符的末尾需要加一个","隔离开来数据，如果是末尾最后一个数据，则末尾不需要"," 7 if(i+1 === nodefatherLength){ 8 //拼接字符串 9 str += "{id:'" + nodefather[i][0] + "',text:'" + nodefather[i][1] + "'"; 10 for(var ii = 0;ii<nodeSonLength;ii++){ 11 //如果有二级子节点 12 if(nodeson[ii][2] === nodefather[i][0]){ 13 //首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加 14 //这个判断条件就是字符串的末尾是否为"," 15 if(str.charAt(str.length - 1) != ","){ 16 //为字符串添加node属性 17 str += ",nodes:["; 18 } 19 //如果到达数组最后一位 20 if(ii+1 === nodeSonLength){ 21 //如果前一位生成了子节点 22 if((nodeson[ii][2] === nodefather[i][0])){ 23 str += "{id:'" + nodeson[ii][0] + "',text:'" + nodeson[ii][1]+ "'"; 24 for(var iii = 0;iii<nodeGrandSonLength;iii++) { 25 //如果有三级子节点 26 if (nodegrandson[iii][2] === nodeson[ii][0]) { 27 //首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加 28 //这个判断条件就是字符串的末尾是否为"," 29 if(str.charAt(str.length - 1) != ","){ 30 //为字符串添加node属性 31 str += ",nodes:["; 32 } 33 //如果到达数组最后一位 34 if(iii+1 === nodeGrandSonLength){ 35 //如果前一位生成了子节点 36 if((nodegrandson[iii][2] === nodeson[ii][0])){ 37 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 38 break; 39 } 40 } 41 //如果是该节点的最后一个子节点 42 if(nodegrandson[iii+1][2] != nodeson[ii][0] ){ 43 //拼接数组 44 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 45 //跳出循环 46 break; 47 } 48 else{ 49 //添加三级子节点 50 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'},"; 51 } 52 } 53 } 54 str += "}]"; 55 break; 56 } 57 } 58 //如果是该节点的最后一个子节点 59 if(nodeson[ii+1][2] != nodefather[i][0] ){ 60 //拼接数组 61 str += "{id:'" + nodeson[ii][0] + "',text:'" + nodeson[ii][1]+ "'"; 62 for(var iii = 0;iii<nodeGrandSonLength;iii++) { 63 //如果有三级子节点 64 if (nodegrandson[iii][2] === nodeson[ii][0]) { 65 //首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加 66 //这个判断条件就是字符串的末尾是否为"," 67 if(str.charAt(str.length - 1) != ","){ 68 //为字符串添加node属性 69 str += ",nodes:["; 70 } 71 //如果到达数组最后一位 72 if(iii+1 === nodeGrandSonLength){ 73 //如果前一位生成了子节点 74 if((nodegrandson[iii][2] === nodeson[ii][0])){ 75 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 76 break; 77 } 78 } 79 //如果是该节点的最后一个子节点 80 if(nodegrandson[iii+1][2] != nodeson[ii][0] ){ 81 //拼接数组 82 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 83 //跳出循环 84 break; 85 } 86 else{ 87 //添加三级子节点 88 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'},"; 89 } 90 } 91 } 92 str += "}]"; 93 //跳出循环 94 break; 95 } 96 //添加二级子节点 97 else{ 98 str += "{id:'" + nodeson[ii][0] + "',text:'" + nodeson[ii][1]+ "'"; 99 //循环三级数据存放的数组，判断是否有孙节点 100 for(var iii = 0;iii<nodeGrandSonLength;iii++) { 101 //如果有三级子节点 102 if (nodegrandson[iii][2] === nodeson[ii][0]) { 103 //首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加 104 //这个判断条件就是字符串的末尾是否为"," 105 if(str.charAt(str.length - 1) != ","){ 106 //为字符串添加node属性 107 str += ",nodes:["; 108 } 109 //如果到达数组最后一位 110 if(iii+1 === nodeGrandSonLength){ 111 //如果前一位生成了子节点 112 if((nodegrandson[iii][2] === nodeson[ii][0])){ 113 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 114 break; 115 } 116 } 117 //如果是该节点的最后一个子节点 118 if(nodegrandson[iii+1][2] != nodeson[ii][0] ){ 119 //拼接数组 120 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 121 //跳出循环 122 break; 123 } 124 else{ 125 //添加三级子节点 126 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'},"; 127 } 128 } 129 } 130 str += "}," 131 } 132 133 } 134 } 135 //跳出循环 136 break; 137 } 138 //如果不是节点的最后一位 139 str += "{id:'" + nodefather[i][0] + "',text:'" + nodefather[i][1]+ "'" ; 140 //循环二级数据存放的数组，判断是否有子节点 141 for(var ii = 0;ii<nodeSonLength;ii++){ 142 //如果有二级子节点 143 if(nodeson[ii][2] === nodefather[i][0]){ 144 //首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加 145 //这个判断条件就是字符串的末尾是否为"," 146 if(str.charAt(str.length - 1) != ","){ 147 //为字符串添加node属性 148 str += ",nodes:["; 149 } 150 //如果到达数组最后一位 151 if(ii+1 === nodeSonLength){ 152 //如果前一位生成了子节点 153 if((nodeson[ii][2] === nodefather[i][0])){ 154 str += "{id:'" + nodeson[ii][0] + "',text:'" + nodeson[ii][1]+ "'"; 155 for(var iii = 0;iii<nodeGrandSonLength;iii++) { 156 //如果有三级子节点 157 if (nodegrandson[iii][2] === nodeson[ii][0]) { 158 //首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加 159 //这个判断条件就是字符串的末尾是否为"," 160 if(str.charAt(str.length - 1) != ","){ 161 //为字符串添加node属性 162 str += ",nodes:["; 163 } 164 //如果到达数组最后一位 165 if(iii+1 === nodeGrandSonLength){ 166 //如果前一位生成了子节点 167 if((nodegrandson[iii][2] === nodeson[ii][0])){ 168 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 169 break; 170 } 171 } 172 //如果是该节点的最后一个子节点 173 if(nodegrandson[iii+1][2] != nodeson[ii][0] ){ 174 //拼接数组 175 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 176 //跳出循环 177 break; 178 } 179 else{ 180 //添加三级子节点 181 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'},"; 182 } 183 } 184 } 185 str += "}]"; 186 break; 187 } 188 } 189 //如果是该节点的最后一个子节点 190 if(nodeson[ii+1][2] != nodefather[i][0] ){ 191 //拼接数组 192 str += "{id:'" + nodeson[ii][0] + "',text:'" + nodeson[ii][1]+ "'"; 193 for(var iii = 0;iii<nodeGrandSonLength;iii++) { 194 //如果有三级子节点 195 if (nodegrandson[iii][2] === nodeson[ii][0]) { 196 //首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加 197 //这个判断条件就是字符串的末尾是否为"," 198 if(str.charAt(str.length - 1) != ","){ 199 //为字符串添加node属性 200 str += ",nodes:["; 201 } 202 //如果到达数组最后一位 203 if(iii+1 === nodeGrandSonLength){ 204 //如果前一位生成了子节点 205 if((nodegrandson[iii][2] === nodeson[ii][0])){ 206 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 207 break; 208 } 209 } 210 //如果是该节点的最后一个子节点 211 if(nodegrandson[iii+1][2] != nodeson[ii][0] ){ 212 //拼接数组 213 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 214 //跳出循环 215 break; 216 } 217 else{ 218 //添加三级子节点 219 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'},"; 220 } 221 } 222 } 223 str += "}]"; 224 //跳出循环 225 break; 226 } 227 //添加二级子节点 228 else{ 229 str += "{id:'" + nodeson[ii][0] + "',text:'" + nodeson[ii][1]+ "'"; 230 //循环三级数据存放的数组，判断是否有孙节点 231 for(var iii = 0;iii<nodeGrandSonLength;iii++) { 232 //如果有三级子节点 233 if (nodegrandson[iii][2] === nodeson[ii][0]) { 234 //首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加 235 //这个判断条件就是字符串的末尾是否为"," 236 if(str.charAt(str.length - 1) != ","){ 237 //为字符串添加node属性 238 str += ",nodes:["; 239 } 240 //如果到达数组最后一位 241 if(iii+1 === nodeGrandSonLength){ 242 //如果前一位生成了子节点 243 if((nodegrandson[iii][2] === nodeson[ii][0])){ 244 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 245 break; 246 } 247 } 248 //如果是该节点的最后一个子节点 249 if(nodegrandson[iii+1][2] != nodeson[ii][0] ){ 250 //拼接数组 251 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'}]"; 252 //跳出循环 253 break; 254 } 255 else{ 256 //添加三级子节点 257 str += "{id:'" + nodegrandson[iii][0] + "',text:'" + nodegrandson[iii][1]+ "'},"; 258 } 259 } 260 } 261 str += "}," 262 } 263 264 } 265 } 266 //子节点的拼接 267 str += "},"; 268 } 269 //字符串的末尾收尾 270 str+="}];";
效果如图所示：
可以看到三级数据还是显示的很清楚的
代码写的有些匆忙，大量的重复代码和大姨妈一般的注释，我封装了一下，代码如下：
1 var i = 0; 2 var ii = 0; 3 var iii = 0; 4 5 var str = "["; 6 for(i = 0;i<nodefatherLength;i++){ 7 if(i+1 === nodefatherLength){ 8 str += "{id:'" + nodefather[i][0] + "',text:'" + nodefather[i][1] + "'"; 9 StringSonNode(nodeson); 10 break; 11 } 12 str += "{id:'" + nodefather[i][0] + "',text:'" + nodefather[i][1]+ "'" ; 13 StringSonNode(nodeson); 14 str += "},"; 15 } 16 str+="}];"; 17 18 //生成子节点 19 function StringSonNode(son) { 20 for(ii = 0;ii<nodeSonLength;ii++){ 21 if(son[ii][2] === nodefather[i][0]){ 22 if(str.charAt(str.length - 1) !== ","){ 23 str += ",nodes:["; 24 } 25 if(ii+1 === nodeSonLength){ 26 if((son[ii][2] === nodefather[i][0])){ 27 str += "{id:'" + son[ii][0] + "',text:'" + son[ii][1]+ "'"; 28 StringGrandSonNode(nodegrandson); 29 str += "}]"; 30 break; 31 } 32 } 33 if(son[ii+1][2] !== nodefather[i][0] ){ 34 str += "{id:'" + son[ii][0] + "',text:'" + son[ii][1]+ "'"; 35 StringGrandSonNode(nodegrandson); 36 str += "}]"; 37 break; 38 } 39 else{ 40 str += "{id:'" + son[ii][0] + "',text:'" + son[ii][1]+ "'"; 41 StringGrandSonNode(nodegrandson); 42 str += "}," 43 } 44 45 } 46 } 47 } 48 49 //生成孙节点 50 function StringGrandSonNode(grandson) { 51 for(iii = 0;iii<nodeGrandSonLength;iii++) { 52 if (grandson[iii][2] === nodeson[ii][0]) { 53 if(str.charAt(str.length - 1) !== ","){ 54 str += ",nodes:["; 55 } 56 if(iii+1 === nodeGrandSonLength){ 57 if((grandson[iii][2] === nodeson[ii][0])){ 58 str += "{id:'" + grandson[iii][0] + "',text:'" + grandson[iii][1]+ "'}]"; 59 break; 60 } 61 } 62 if(nodegrandson[iii+1][2] !== nodeson[ii][0] ){ 63 str += "{id:'" + grandson[iii][0] + "',text:'" + grandson[iii][1]+ "'}]"; 64 break; 65 } 66 else{ 67 str += "{id:'" + grandson[iii][0] + "',text:'" + grandson[iii][1]+ "'},"; 68 } 69 } 70 } 71 }
