拼接字符串，生成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是"名值对"的集合.结构由大 ...
随机推荐
- HTML5 - Canvas【申明：来源于网络】
HTML5 - Canvas 地址:http://hwaphon.site/
- JS常用各种正则表达式（汇总）
匹配URL 这个url的正则表达式判断的JavaScript!比较全面的.它验证的情况包括IP,域名(domain),ftp,二级域名,域名中的文件,域名加上端口!用户名等等信息, function ...
- ng2-tree
[转]https://github.com/valor-software/ng2-tree#eyes-demo demo:http://valor-software.com/ng2-tree/
- windows 10 超级优化，同时解决本地磁盘100%的问题
windows 10 超级优化,同时解决本地磁盘100%的问题 我的系统是笔记本I7处理器,配置了web服务器IIS 和一个数据库(mysql7),同时启用了虚拟机(表中已禁用),以及安装了offic ...
- PostgreSQL 自动输入密码（转）
原文:https://www.cnblogs.com/litmmp/p/5122534.html 在 Shell 命令行中,使用 postgresql-client 连接 PostgreSQL 数据库 ...
- 智能门锁测试程序和PCB板线路通断检测程序经验总结
这次去WZ出差,还是很累的,之前一年多没有搞嵌入式了,更重要的是之前没有接触太深刻GPIO的用法等等原因,导致很心累. 必须掌握的技能: (1)SPI和IIC总线,模拟和专用外设两种方式,他们的重要性 ...
- SpringMVC(四)：什么是HandlerAdapter
一.什么是HandlerAdapter Note that a handler can be of type Object. This is to enable handlers from other ...
- CoreData 执行executefetchrequest卡死解决办法
在大量使用GCD和block以后发现程序会卡死在executefetchrequest执行. 反复测试无果.添加锁也无效.想来想去没发现问题. 容忍了就当人品问题.2天以后实在忍无可忍. 替换perf ...
- javaweb(3)之JSP&EL&JSTL
JSP(Java Server Page) 介绍 什么是 JSP ? 从用户角度看,JSP 就是一个网页. 从开发者角度看,它其实就是一个继承了 Servlet 的 java 类,所以可以直接说 JS ...
- 家庭记账本之微信小程序（七）
最后成果 在经过对微信小程序的简单学习后,对于微信小程序也稍有理解,在浏览学习过别人的东西后自己也制作了一个,觉得就是有点low,在今后的学习中会继续完善这个微信小程序 //index.js //获取 ...