拼接字符串，生成tree格式的JSON数组
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了拼接字符串，生成tree格式的JSON数组，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11034字，纯文字阅读大概需要16分钟。
内容图文
之前做的执法文书的工作，现在需要从C#版本移植到网页版，从Thrift接口获取数据，加载到对应的控件中
之前用的easyui的Tree插件，通过<ul><li><span></span></li></ul>标签的方式生成node树，条理清晰，虽然麻烦点，但是用循环写几行代码就能搞定，但是，在Ajax的函数里面，tree的样式加载不上，显示的格式就是元素自带的含义，<ul>和<li>，无法点击，下面的工作也就无法完成，我将生成tree的函数移出Ajax，样式就能加载上了，调试了两天毫无进展，心一横，换一个Node插件
首先推荐一个JQuery的库-- JQuery插件库，网址如下：http://www.jq22.com/
我在这个插件库里找到一个根据BootStrap开发的树节点，网址如下：http://www.jq22.com/jquery-info10461
调试了一下，生成了一个我需要的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>
1213 <script type="text/javascript">
1415var rootNode= new Array();
1617 $(function() {
18var 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‘],
5152 }
53 ]
54 },
55 {
56 text: ‘太湖‘,
57 href: ‘#parent2‘,
58 tags: [‘0‘]
59 },
60 {
61 text: ‘鄱阳湖‘,
62 href: ‘#parent3‘,
63 tags: [‘0‘]
64 }
65 ];
6667 $(‘#tree‘).treeview({
68 data: defaultData
69 });
7071//node的单击节点事件72 $(‘#tree‘).on(‘nodeSelected‘, function(event, data) {
73 alert(data.tags)
74 });
7576 });
77 </script>
78 </body>
79 </html>
效果如图，单击可以节点的tags属性：
我从thrift获取的结构是一个数组，先返回第一级数据，然后是第二级数据，最后是第三级数据，刚才Demo的数据格式中，我只有根据三级数据数据的fatherid和二级数据的id是否吻合来判断二级数据是否有二级数据，同理判断一级数据是否有二级数据，也就是说，我需要知道所有的数据之后才能知道每个层级的详细数据，然后才能完成Tree格式的数据赋值（我同学让我用递归。我暂时还没明白递归的用法，先按自己的思路来）
所以，思路如下：
首先定义三个空数组，分别存放不同层级的数组，然后遍历从Thrift获取的数组，分别存放到三个空数组中，代码如下：
1
var node = new Array();
2//字符串转数组 3 node = eval(nodelist);
4var nodelength = node.length;
5 6var nodefather = new Array();
7var nodeson = new Array();
8var nodegrandson = new Array();
9var LawsId = "";
10var LawsName = "";
11var LawsFatherId = "";
1213var sonnumber = 0;
14var groungsonnumber = 0;
15for (var i = 0; i < nodelength; i++) {
16if (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 }
22if (node[i].NLevel === 2){
2324 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 }
30if (node[i].NLevel === 3){
3132 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 = "[";
2for(var i = 0;i<nodefatherLength;i++){
3if(i+1 === nodefatherLength){
4 str += "{id:‘" + nodefather[i][0] + "‘,text:‘" + nodefather[i][1] + "‘}";
5break;
6 }
7 str += "{id:‘" + nodefather[i][0] + "‘,text:‘" + nodefather[i][1] + "‘},";
8 }
9 str+="];";
1011var nodedata = eval(str);
1213 $(‘#lawsnode‘).treeview({
14 data: nodedata
15 });
有个小插曲，在我进行eval()函数转JSON数组之前，这是一个字符串数据，字符串数据添加到tree里面还是无法识别的，当时脑袋一热，用substring()函数选择了1-数组.length-1的索引，放到tree里面发现还是字符串，这才想起来直接eval()转数组
效果如图所示：
拼接完一级数据之后，开始拼接二级数据，同理，拼接完三级数据，完成后更新拼接字符串代码如下，我每一行都写了注释，理清逻辑之后还是很好理解的：
1
//
定义一个起始的字符串
2
var str = "[";
3//循环父节点 4for(var i = 0;i<nodefatherLength;i++){
5//如果到达节点的最后一位
6//如果不是最后一个节点，数据字符的末尾需要加一个","隔离开来数据，如果是末尾最后一个数据，则末尾不需要"," 7if(i+1 === nodefatherLength){
8//拼接字符串 9 str += "{id:‘" + nodefather[i][0] + "‘,text:‘" + nodefather[i][1] + "‘";
10for(var ii = 0;ii<nodeSonLength;ii++){
11//如果有二级子节点 12if(nodeson[ii][2] === nodefather[i][0]){
13//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
14//这个判断条件就是字符串的末尾是否为"," 15if(str.charAt(str.length - 1) != ","){
16//为字符串添加node属性 17 str += ",nodes:[";
18 }
19//如果到达数组最后一位 20if(ii+1 === nodeSonLength){
21//如果前一位生成了子节点 22if((nodeson[ii][2] === nodefather[i][0])){
23 str += "{id:‘" + nodeson[ii][0] + "‘,text:‘" + nodeson[ii][1]+ "‘";
24for(var iii = 0;iii<nodeGrandSonLength;iii++) {
25//如果有三级子节点 26if (nodegrandson[iii][2] === nodeson[ii][0]) {
27//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
28//这个判断条件就是字符串的末尾是否为"," 29if(str.charAt(str.length - 1) != ","){
30//为字符串添加node属性 31 str += ",nodes:[";
32 }
33//如果到达数组最后一位 34if(iii+1 === nodeGrandSonLength){
35//如果前一位生成了子节点 36if((nodegrandson[iii][2] === nodeson[ii][0])){
37 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
38break;
39 }
40 }
41//如果是该节点的最后一个子节点 42if(nodegrandson[iii+1][2] != nodeson[ii][0] ){
43//拼接数组 44 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
45//跳出循环 46break;
47 }
48else{
49//添加三级子节点 50 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘},";
51 }
52 }
53 }
54 str += "}]";
55break;
56 }
57 }
58//如果是该节点的最后一个子节点 59if(nodeson[ii+1][2] != nodefather[i][0] ){
60//拼接数组 61 str += "{id:‘" + nodeson[ii][0] + "‘,text:‘" + nodeson[ii][1]+ "‘";
62for(var iii = 0;iii<nodeGrandSonLength;iii++) {
63//如果有三级子节点 64if (nodegrandson[iii][2] === nodeson[ii][0]) {
65//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
66//这个判断条件就是字符串的末尾是否为"," 67if(str.charAt(str.length - 1) != ","){
68//为字符串添加node属性 69 str += ",nodes:[";
70 }
71//如果到达数组最后一位 72if(iii+1 === nodeGrandSonLength){
73//如果前一位生成了子节点 74if((nodegrandson[iii][2] === nodeson[ii][0])){
75 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
76break;
77 }
78 }
79//如果是该节点的最后一个子节点 80if(nodegrandson[iii+1][2] != nodeson[ii][0] ){
81//拼接数组 82 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
83//跳出循环 84break;
85 }
86else{
87//添加三级子节点 88 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘},";
89 }
90 }
91 }
92 str += "}]";
93//跳出循环 94break;
95 }
96//添加二级子节点 97else{
98 str += "{id:‘" + nodeson[ii][0] + "‘,text:‘" + nodeson[ii][1]+ "‘";
99//循环三级数据存放的数组，判断是否有孙节点100for(var iii = 0;iii<nodeGrandSonLength;iii++) {
101//如果有三级子节点102if (nodegrandson[iii][2] === nodeson[ii][0]) {
103//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
104//这个判断条件就是字符串的末尾是否为","105if(str.charAt(str.length - 1) != ","){
106//为字符串添加node属性107 str += ",nodes:[";
108 }
109//如果到达数组最后一位110if(iii+1 === nodeGrandSonLength){
111//如果前一位生成了子节点112if((nodegrandson[iii][2] === nodeson[ii][0])){
113 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
114break;
115 }
116 }
117//如果是该节点的最后一个子节点118if(nodegrandson[iii+1][2] != nodeson[ii][0] ){
119//拼接数组120 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
121//跳出循环122break;
123 }
124else{
125//添加三级子节点126 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘},";
127 }
128 }
129 }
130 str += "},"131 }
132133 }
134 }
135//跳出循环136break;
137 }
138//如果不是节点的最后一位139 str += "{id:‘" + nodefather[i][0] + "‘,text:‘" + nodefather[i][1]+ "‘" ;
140//循环二级数据存放的数组，判断是否有子节点141for(var ii = 0;ii<nodeSonLength;ii++){
142//如果有二级子节点143if(nodeson[ii][2] === nodefather[i][0]){
144//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
145//这个判断条件就是字符串的末尾是否为","146if(str.charAt(str.length - 1) != ","){
147//为字符串添加node属性148 str += ",nodes:[";
149 }
150//如果到达数组最后一位151if(ii+1 === nodeSonLength){
152//如果前一位生成了子节点153if((nodeson[ii][2] === nodefather[i][0])){
154 str += "{id:‘" + nodeson[ii][0] + "‘,text:‘" + nodeson[ii][1]+ "‘";
155for(var iii = 0;iii<nodeGrandSonLength;iii++) {
156//如果有三级子节点157if (nodegrandson[iii][2] === nodeson[ii][0]) {
158//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
159//这个判断条件就是字符串的末尾是否为","160if(str.charAt(str.length - 1) != ","){
161//为字符串添加node属性162 str += ",nodes:[";
163 }
164//如果到达数组最后一位165if(iii+1 === nodeGrandSonLength){
166//如果前一位生成了子节点167if((nodegrandson[iii][2] === nodeson[ii][0])){
168 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
169break;
170 }
171 }
172//如果是该节点的最后一个子节点173if(nodegrandson[iii+1][2] != nodeson[ii][0] ){
174//拼接数组175 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
176//跳出循环177break;
178 }
179else{
180//添加三级子节点181 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘},";
182 }
183 }
184 }
185 str += "}]";
186break;
187 }
188 }
189//如果是该节点的最后一个子节点190if(nodeson[ii+1][2] != nodefather[i][0] ){
191//拼接数组192 str += "{id:‘" + nodeson[ii][0] + "‘,text:‘" + nodeson[ii][1]+ "‘";
193for(var iii = 0;iii<nodeGrandSonLength;iii++) {
194//如果有三级子节点195if (nodegrandson[iii][2] === nodeson[ii][0]) {
196//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
197//这个判断条件就是字符串的末尾是否为","198if(str.charAt(str.length - 1) != ","){
199//为字符串添加node属性200 str += ",nodes:[";
201 }
202//如果到达数组最后一位203if(iii+1 === nodeGrandSonLength){
204//如果前一位生成了子节点205if((nodegrandson[iii][2] === nodeson[ii][0])){
206 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
207break;
208 }
209 }
210//如果是该节点的最后一个子节点211if(nodegrandson[iii+1][2] != nodeson[ii][0] ){
212//拼接数组213 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
214//跳出循环215break;
216 }
217else{
218//添加三级子节点219 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘},";
220 }
221 }
222 }
223 str += "}]";
224//跳出循环225break;
226 }
227//添加二级子节点228else{
229 str += "{id:‘" + nodeson[ii][0] + "‘,text:‘" + nodeson[ii][1]+ "‘";
230//循环三级数据存放的数组，判断是否有孙节点231for(var iii = 0;iii<nodeGrandSonLength;iii++) {
232//如果有三级子节点233if (nodegrandson[iii][2] === nodeson[ii][0]) {
234//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
235//这个判断条件就是字符串的末尾是否为","236if(str.charAt(str.length - 1) != ","){
237//为字符串添加node属性238 str += ",nodes:[";
239 }
240//如果到达数组最后一位241if(iii+1 === nodeGrandSonLength){
242//如果前一位生成了子节点243if((nodegrandson[iii][2] === nodeson[ii][0])){
244 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
245break;
246 }
247 }
248//如果是该节点的最后一个子节点249if(nodegrandson[iii+1][2] != nodeson[ii][0] ){
250//拼接数组251 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘}]";
252//跳出循环253break;
254 }
255else{
256//添加三级子节点257 str += "{id:‘" + nodegrandson[iii][0] + "‘,text:‘" + nodegrandson[iii][1]+ "‘},";
258 }
259 }
260 }
261 str += "},"262 }
263264 }
265 }
266//子节点的拼接267 str += "},";
268 }
269//字符串的末尾收尾270 str+="}];";
效果如图所示：
可以看到三级数据还是显示的很清楚的
刚才的代码写的有些匆忙，大量的重复代码和大姨妈一般的注释，我去修改代码去了
原文：http://www.cnblogs.com/Liu30/p/7337968.html
内容总结
以上是互联网集市为您收集整理的拼接字符串，生成tree格式的JSON数组全部内容，希望文章能够帮你解决拼接字符串，生成tree格式的JSON数组所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】