拼接字符串，生成tree格式的JSON数组
Posted StephenCurry
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拼接字符串，生成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][以上是关于拼接字符串，生成tree格式的JSON数组的主要内容，如果未能解决你的问题，请参考以下文章
c# 拼接字符串并转化为json数据时，总是无法转到所需格式
从数据库里拿到数据，组成json格式并返回给前端生成动态树。