拼接字符串，生成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），代码如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试页面</title>
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap-treeview.css">
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.css">
</head>
<body>
<div id="tree"></div>
<script type="text/javascript" src="lib/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="lib/js/bootstrap-treeview.js"></script> <script type="text/javascript"> var rootNode= new Array(); $(function() {
var defaultData = [
{
id : "211201",
text: '洪泽湖',
tags: ['洪泽湖'],
nodes: [
{
text: '东咀站',
href: '#child1',
tags: ['2'],
nodes: [
{
text: '光电',
href: '#grandchild1',
tags: ['0'],
nodes: [
{
text: '设备还不错',
href: '#child1',
tags: ['2']
}]
},
{
text: '雷达',
href: '#grandchild2',
tags: ['0']
}
]
},
{
text: '胡庄站',
href: '#child2',
tags: ['0'], }
]
},
{
text: '太湖',
href: '#parent2',
tags: ['0']
},
{
text: '鄱阳湖',
href: '#parent3',
tags: ['0']
}
]; $('#tree').treeview({
data: defaultData
}); //node的单击节点事件
$('#tree').on('nodeSelected', function(event, data) {
alert(data.tags)
}); });
</script>
</body>
</html>
效果如图，单击可以节点的tags属性：
我从thrift获取的结构是一个数组，先返回第一级数据，然后是第二级数据，最后是第三级数据，刚才Demo的数据格式中，我只有根据三级数据数据的fatherid和二级数据的id是否吻合来判断二级数据是否有二级数据，同理判断一级数据是否有二级数据，也就是说，我需要知道所有的数据之后才能知道每个层级的详细数据，然后才能完成Tree格式的数据赋值（我同学让我用递归。我暂时还没明白递归的用法，先按自己的思路来）
所以，思路如下：
首先定义三个空数组，分别存放不同层级的数组，然后遍历从Thrift获取的数组，分别存放到三个空数组中，代码如下：
var node = new Array();
//字符串转数组
node = eval(nodelist);
var nodelength = node.length; var nodefather = new Array();
var nodeson = new Array();
var nodegrandson = new Array();
var LawsId = "";
var LawsName = "";
var LawsFatherId = ""; var sonnumber = 0;
var groungsonnumber = 0;
for (var i = 0; i < nodelength; i++) {
if (node[i].NLevel === 1){
LawsId = node[i].NID;
LawsName = node[i].szName;
LawsFatherId = node[i].NParentID;
nodefather[i] = new Array(LawsId,LawsName,LawsFatherId);
}
if (node[i].NLevel === 2){ LawsId = node[i].NID;
LawsName = node[i].szName;
LawsFatherId = node[i].NParentID;
nodeson[sonnumber]= new Array(LawsId,LawsName,LawsFatherId);
sonnumber++;
}
if (node[i].NLevel === 3){ LawsId = node[i].NID;
LawsName = node[i].szName;
LawsFatherId = node[i].NParentID;
nodegrandson[groungsonnumber] = new Array(LawsId,LawsName,LawsFatherId);
groungsonnumber++;
}
}
分别获取三个层级数据的个数
var nodefatherLength = nodefather.length;
var nodeSonLength = nodeson.length;
var nodeGrandSonLength = nodegrandson.length;
所有数据整理完毕，下面开始字符串的拼接
首先定义一个字符串str；
var str = "[";
接着循环第一层级的数据
var str = "[";
for(var i = 0;i<nodefatherLength;i++){
if(i+1 === nodefatherLength){
str += "{id:'" + nodefather[i][0] + "',text:'" + nodefather[i][1] + "'}";
break;
}
str += "{id:'" + nodefather[i][0] + "',text:'" + nodefather[i][1] + "'},";
}
str+="];"; var nodedata = eval(str); $('#lawsnode').treeview({
data: nodedata
});
有个小插曲，在我进行eval()函数转JSON数组之前，这是一个字符串数据，字符串数据添加到tree里面还是无法识别的，当时脑袋一热，用substring()函数选择了1-数组.length-1的索引，放到tree里面发现还是字符串，这才想起来直接eval()转数组
效果如图所示：
拼接完一级数据之后，开始拼接二级数据，同理，拼接完三级数据，完成后更新拼接字符串代码如下，我每一行都写了注释，理清逻辑之后还是很好理解的：
//定义一个起始的字符串
var str = "[";
//循环父节点
for(var i = ;i<nodefatherLength;i++){
//如果到达节点的最后一位
//如果不是最后一个节点，数据字符的末尾需要加一个","隔离开来数据，如果是末尾最后一个数据，则末尾不需要","
if(i+ === nodefatherLength){
//拼接字符串
str += "{id:'" + nodefather[i][] + "',text:'" + nodefather[i][] + "'";
for(var ii = ;ii<nodeSonLength;ii++){
//如果有二级子节点
if(nodeson[ii][] === nodefather[i][]){
//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
//这个判断条件就是字符串的末尾是否为","
if(str.charAt(str.length - ) != ","){
//为字符串添加node属性
str += ",nodes:[";
}
//如果到达数组最后一位
if(ii+ === nodeSonLength){
//如果前一位生成了子节点
if((nodeson[ii][] === nodefather[i][])){
str += "{id:'" + nodeson[ii][] + "',text:'" + nodeson[ii][]+ "'";
for(var iii = ;iii<nodeGrandSonLength;iii++) {
//如果有三级子节点
if (nodegrandson[iii][] === nodeson[ii][]) {
//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
//这个判断条件就是字符串的末尾是否为","
if(str.charAt(str.length - ) != ","){
//为字符串添加node属性
str += ",nodes:[";
}
//如果到达数组最后一位
if(iii+ === nodeGrandSonLength){
//如果前一位生成了子节点
if((nodegrandson[iii][] === nodeson[ii][])){
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
break;
}
}
//如果是该节点的最后一个子节点
if(nodegrandson[iii+][] != nodeson[ii][] ){
//拼接数组
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
//跳出循环
break;
}
else{
//添加三级子节点
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'},";
}
}
}
str += "}]";
break;
}
}
//如果是该节点的最后一个子节点
if(nodeson[ii+][] != nodefather[i][] ){
//拼接数组
str += "{id:'" + nodeson[ii][] + "',text:'" + nodeson[ii][]+ "'";
for(var iii = ;iii<nodeGrandSonLength;iii++) {
//如果有三级子节点
if (nodegrandson[iii][] === nodeson[ii][]) {
//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
//这个判断条件就是字符串的末尾是否为","
if(str.charAt(str.length - ) != ","){
//为字符串添加node属性
str += ",nodes:[";
}
//如果到达数组最后一位
if(iii+ === nodeGrandSonLength){
//如果前一位生成了子节点
if((nodegrandson[iii][] === nodeson[ii][])){
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
break;
}
}
//如果是该节点的最后一个子节点
if(nodegrandson[iii+][] != nodeson[ii][] ){
//拼接数组
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
//跳出循环
break;
}
else{
//添加三级子节点
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'},";
}
}
}
str += "}]";
//跳出循环
break;
}
//添加二级子节点
else{
str += "{id:'" + nodeson[ii][] + "',text:'" + nodeson[ii][]+ "'";
//循环三级数据存放的数组，判断是否有孙节点
for(var iii = ;iii<nodeGrandSonLength;iii++) {
//如果有三级子节点
if (nodegrandson[iii][] === nodeson[ii][]) {
//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
//这个判断条件就是字符串的末尾是否为","
if(str.charAt(str.length - ) != ","){
//为字符串添加node属性
str += ",nodes:[";
}
//如果到达数组最后一位
if(iii+ === nodeGrandSonLength){
//如果前一位生成了子节点
if((nodegrandson[iii][] === nodeson[ii][])){
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
break;
}
}
//如果是该节点的最后一个子节点
if(nodegrandson[iii+][] != nodeson[ii][] ){
//拼接数组
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
//跳出循环
break;
}
else{
//添加三级子节点
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'},";
}
}
}
str += "},"
} }
}
//跳出循环
break;
}
//如果不是节点的最后一位
str += "{id:'" + nodefather[i][] + "',text:'" + nodefather[i][]+ "'" ;
//循环二级数据存放的数组，判断是否有子节点
for(var ii = ;ii<nodeSonLength;ii++){
//如果有二级子节点
if(nodeson[ii][] === nodefather[i][]){
//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
//这个判断条件就是字符串的末尾是否为","
if(str.charAt(str.length - ) != ","){
//为字符串添加node属性
str += ",nodes:[";
}
//如果到达数组最后一位
if(ii+ === nodeSonLength){
//如果前一位生成了子节点
if((nodeson[ii][] === nodefather[i][])){
str += "{id:'" + nodeson[ii][] + "',text:'" + nodeson[ii][]+ "'";
for(var iii = ;iii<nodeGrandSonLength;iii++) {
//如果有三级子节点
if (nodegrandson[iii][] === nodeson[ii][]) {
//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
//这个判断条件就是字符串的末尾是否为","
if(str.charAt(str.length - ) != ","){
//为字符串添加node属性
str += ",nodes:[";
}
//如果到达数组最后一位
if(iii+ === nodeGrandSonLength){
//如果前一位生成了子节点
if((nodegrandson[iii][] === nodeson[ii][])){
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
break;
}
}
//如果是该节点的最后一个子节点
if(nodegrandson[iii+][] != nodeson[ii][] ){
//拼接数组
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
//跳出循环
break;
}
else{
//添加三级子节点
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'},";
}
}
}
str += "}]";
break;
}
}
//如果是该节点的最后一个子节点
if(nodeson[ii+][] != nodefather[i][] ){
//拼接数组
str += "{id:'" + nodeson[ii][] + "',text:'" + nodeson[ii][]+ "'";
for(var iii = ;iii<nodeGrandSonLength;iii++) {
//如果有三级子节点
if (nodegrandson[iii][] === nodeson[ii][]) {
//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
//这个判断条件就是字符串的末尾是否为","
if(str.charAt(str.length - ) != ","){
//为字符串添加node属性
str += ",nodes:[";
}
//如果到达数组最后一位
if(iii+ === nodeGrandSonLength){
//如果前一位生成了子节点
if((nodegrandson[iii][] === nodeson[ii][])){
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
break;
}
}
//如果是该节点的最后一个子节点
if(nodegrandson[iii+][] != nodeson[ii][] ){
//拼接数组
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
//跳出循环
break;
}
else{
//添加三级子节点
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'},";
}
}
}
str += "}]";
//跳出循环
break;
}
//添加二级子节点
else{
str += "{id:'" + nodeson[ii][] + "',text:'" + nodeson[ii][]+ "'";
//循环三级数据存放的数组，判断是否有孙节点
for(var iii = ;iii<nodeGrandSonLength;iii++) {
//如果有三级子节点
if (nodegrandson[iii][] === nodeson[ii][]) {
//首先判断，前面是否已经生成了node标签，如果没有，说明是首次添加
//这个判断条件就是字符串的末尾是否为","
if(str.charAt(str.length - ) != ","){
//为字符串添加node属性
str += ",nodes:[";
}
//如果到达数组最后一位
if(iii+ === nodeGrandSonLength){
//如果前一位生成了子节点
if((nodegrandson[iii][] === nodeson[ii][])){
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
break;
}
}
//如果是该节点的最后一个子节点
if(nodegrandson[iii+][] != nodeson[ii][] ){
//拼接数组
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'}]";
//跳出循环
break;
}
else{
//添加三级子节点
str += "{id:'" + nodegrandson[iii][] + "',text:'" + nodegrandson[iii][]+ "'},";
}
}
}
str += "},"
} }
}
//子节点的拼接
str += "},";
}
//字符串的末尾收尾
str+="}];";
效果如图所示：
可以看到三级数据还是显示的很清楚的
代码写的有些匆忙，大量的重复代码和大姨妈一般的注释，我封装了一下，代码如下：
var i = ;
var ii = ;
var iii = ; var str = "[";
for(i = ;i<nodefatherLength;i++){
if(i+ === nodefatherLength){
str += "{id:'" + nodefather[i][] + "',text:'" + nodefather[i][] + "'";
StringSonNode(nodeson);
break;
}
str += "{id:'" + nodefather[i][] + "',text:'" + nodefather[i][]+ "'" ;
StringSonNode(nodeson);
str += "},";
}
str+="}];"; //生成子节点
function StringSonNode(son) {
for(ii = ;ii<nodeSonLength;ii++){
if(son[ii][] === nodefather[i][]){
if(str.charAt(str.length - ) !== ","){
str += ",nodes:[";
}
if(ii+ === nodeSonLength){
if((son[ii][] === nodefather[i][])){
str += "{id:'" + son[ii][] + "',text:'" + son[ii][]+ "'";
StringGrandSonNode(nodegrandson);
str += "}]";
break;
}
}
if(son[ii+][] !== nodefather[i][] ){
str += "{id:'" + son[ii][] + "',text:'" + son[ii][]+ "'";
StringGrandSonNode(nodegrandson);
str += "}]";
break;
}
else{
str += "{id:'" + son[ii][] + "',text:'" + son[ii][]+ "'";
StringGrandSonNode(nodegrandson);
str += "},"
} }
}
} //生成孙节点
function StringGrandSonNode(grandson) {
for(iii = ;iii<nodeGrandSonLength;iii++) {
if (grandson[iii][] === nodeson[ii][]) {
if(str.charAt(str.length - ) !== ","){
str += ",nodes:[";
}
if(iii+ === nodeGrandSonLength){
if((grandson[iii][] === nodeson[ii][])){
str += "{id:'" + grandson[iii][] + "',text:'" + grandson[iii][]+ "'}]";
break;
}
}
if(nodegrandson[iii+][] !== nodeson[ii][] ){
str += "{id:'" + grandson[iii][] + "',text:'" + grandson[iii][]+ "'}]";
break;
}
else{
str += "{id:'" + grandson[iii][] + "',text:'" + grandson[iii][]+ "'},";
}
}
}
}
拼接字符串，生成tree格式的JSON数组的更多相关文章
- toJSON() 方法，将 Date 对象转换为字符串，并格式化为 JSON 数据格式。
JavaScript toJSON() 方法 定义和用法 toJSON() 方法可以将 Date 对象转换为字符串,并格式化为 JSON 数据格式. JSON 数据用同样的格式就像x ISO-8601 ...
- 超简单的处理JSON格式和JSON数组格式的String
现在网站上有不少处理JSON格式的工具类,但是我找了一天,发现大都是需要编写相应对象类来进行处理,比较麻烦,比如:Gson,json-lib.Gson,json-lib这些处理那些接口之类的参数名字和 ...
- 根据导出的查询结果拼接字符串,生成sql语句并保存到txt文件中
import os os.chdir("C:/") path = os.getcwd() print(path) f = open("sql.csv") # p ...
- ajax处理返回的三种格式（json格式 , xml通用格式 , html文本格式）（数据类型：整数、字符串、数组、对象）（基础最重要！）
ajax方法的参数 常用的ajax参数比如url,data,type,包括预期返回类型dataType,发送到服务器的数据的编码类型contentType,成功方法,失败方法,完成方法.除了这些以外还 ...
- java代码中fastjson生成字符串和解析字符串的方法和javascript文件中字符串和json数组之间的转换方法
1.java代码中fastjson生成字符串和解析字符串的方法 List<TemplateFull> templateFulls = new ArrayList<TemplateFu ...
- Reflection和Expression Tree解析泛型集合快速定制特殊格式的Json
很多项目都会用到Json,而且大部分的Json都是格式固定,功能强大,转换简单等,标准的key,value集合字符串:直接JsonConvert.SerializeObject(List<T&g ...
- JSON 数组格式
JSON 数据格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人 ...
- json字符串的标准格式
现在越来越多的项目和开发插件等默认都会支持和使用json数据格式,作为数据保持.传输的一种方式. 说是其中一种,就标示还有好多其他格式.比如:最多是xml.webservice的标准数据格式. 不过由 ...
- 使用JavaScriptSerializer序列化集合、字典、数组、DataTable为JSON字符串 分类： 前端 数据格式 JSON 2014-10-30 14:08 169人阅读 评论(0) 收藏
一.JSON简介 JSON(JavaScript Object Notation,JavaScript对象表示法)是一种轻量级的数据交换格式. JSON是"名值对"的集合.结构由大 ...
随机推荐
- python中元组与数组的区别
列表: a=['12', '3rr'] 元组: t=(21,34) 列表可以修改,而元组不可以修改,如果元组中仅有一个元素,则要在元素后加上逗号. 元组和列表的查询方式一样. 元组只可读不可修改. 如 ...
- FTPClient工具类
package com.vcredit.ddcash.server.commons.net; import com.vcredit.ddcash.server.commons.model.FtpPar ...
- UI常用接口使用规范
//////////////////////////////////////////////////////////////////////////////////////////////// /// ...
- 利用XML语法 SQL 列转行
--行转列 固定xml语法 declare @xml xml ; set @xml=cast('<v>2</v><v>4</v><v>3&l ...
- [iptables] 如何用iptables管理桥接模式下的设备
场景:qemu虚拟机通过tap设备与host的物理网卡通过bridge桥接上网. 如下: [root@host100 ~]# brctl show bridge name bridge id STP ...
- shell脚本----周期压缩备份日志文件
一.日志文件样式 二.目标 1.备份压缩.log结尾&&时间样式为“date +%Y%m%d”的日志文件(如:20170912.20160311等) 2.可指定压缩范围(N天前至当天) ...
- redis发布订阅、事务、脚本
Redis 发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图展示了频道 cha ...
- 019-并发编程-java.util.concurrent之-Semaphore 信号量
一.概述 Semaphore是一个计数信号量.从概念上将,Semaphore包含一组许可证.如果有需要的话,每个acquire()方法都会阻塞,直到获取一个可用的许可证.每个release()方法都会 ...
- Linux的is not in the sudoers file 解决
https://blog.csdn.net/hxpjava1/article/details/79566822
- 外网无法ip访问服务器解决方法 (原)
示例ip:119.75.1.1 windows server示例 一.检查网络是否通畅 打开dos窗口(windows+r , 输入cmd回车 )输入命令: ping 119.75 ...