拼接字符串，生成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是"名值对"的集合.结构由大 ...
随机推荐
- linux中时间命令详解
DATE hling@hling:~$ date2018年 04月 11日 星期三 19:43:04 CSThling@hling:~$ date +%Y%M%d20184311hling@hling ...
- C语言面试笔记（8/26）
在32位的机器环境下,char.short.int.float.double这样的内置数据类型sizeof值的大小分别为1,2,4,4,8: C++标模板库(standard Template Lib ...
- imu_tk标定算法
IMU(惯性测量单位)是机器人中非常流行的传感器:其中,它们被用于惯性导航[1],姿态估计[2]和视觉惯性导航[3],[4],也使用 智能手机设备[5]. 机器人技术中使用的IMU通常基于MEMS(微 ...
- SQL Server 将查询结果导出插入的简单方式
https://blog.csdn.net/danny_style/article/details/45166391 1.首先将查询结果添加到一个原数据库中不存在的表,表名随意命名. 例: selec ...
- linux学习：【第3篇】远程连接及软件安装
狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! linux学习:[第3篇]远程连接及软件安装 远程连接 xshell , xftp软件官网 : ...
- JDBC事务（二）转账示例
示例采用三层框架 web层: package cn.sasa.web; import java.io.IOException; import javax.servlet.ServletExceptio ...
- 【Python全栈-后端开发】Django进阶之Model操作复习
Django进阶之Model操作复习 一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - ...
- 深入浅出Vue基于“依赖收集”的响应式原理（转）
add by zhj: 文章写的很通俗易懂,明白了Object.defineProperty的用法 原文:https://zhuanlan.zhihu.com/p/29318017 每当问到VueJS ...
- c++stack容器介绍
c++stack(堆栈)是一个容器的改编,它实现了一个先进后出的数据结构(FILO) 使用该容器时需要包含#include<stack>头文件: 定义stack对象的示例代码如下: sta ...
- Oracle 11g R2创建数据库之手工建库方式
在之前的博文当中梳理了关于DBCA静默方式创建数据库的过程,本文就手工通过SQL*PLUS客户端采用CREATE DATABASE语句创建数据库.这种建库方式就是完全使用手工SQL语句创建数据库,通常 ...