之前做的执法文书的工作,现在需要从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数组的更多相关文章

  1. toJSON() 方法,将 Date 对象转换为字符串,并格式化为 JSON 数据格式。

    JavaScript toJSON() 方法 定义和用法 toJSON() 方法可以将 Date 对象转换为字符串,并格式化为 JSON 数据格式. JSON 数据用同样的格式就像x ISO-8601 ...

  2. 超简单的处理JSON格式和JSON数组格式的String

    现在网站上有不少处理JSON格式的工具类,但是我找了一天,发现大都是需要编写相应对象类来进行处理,比较麻烦,比如:Gson,json-lib.Gson,json-lib这些处理那些接口之类的参数名字和 ...

  3. 根据导出的查询结果拼接字符串,生成sql语句并保存到txt文件中

    import os os.chdir("C:/") path = os.getcwd() print(path) f = open("sql.csv") # p ...

  4. ajax处理返回的三种格式(json格式 , xml通用格式 , html文本格式)(数据类型:整数、字符串、数组、对象)(基础最重要!)

    ajax方法的参数 常用的ajax参数比如url,data,type,包括预期返回类型dataType,发送到服务器的数据的编码类型contentType,成功方法,失败方法,完成方法.除了这些以外还 ...

  5. java代码中fastjson生成字符串和解析字符串的方法和javascript文件中字符串和json数组之间的转换方法

    1.java代码中fastjson生成字符串和解析字符串的方法 List<TemplateFull> templateFulls = new ArrayList<TemplateFu ...

  6. Reflection和Expression Tree解析泛型集合快速定制特殊格式的Json

    很多项目都会用到Json,而且大部分的Json都是格式固定,功能强大,转换简单等,标准的key,value集合字符串:直接JsonConvert.SerializeObject(List<T&g ...

  7. JSON 数组格式

    JSON 数据格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人 ...

  8. json字符串的标准格式

    现在越来越多的项目和开发插件等默认都会支持和使用json数据格式,作为数据保持.传输的一种方式. 说是其中一种,就标示还有好多其他格式.比如:最多是xml.webservice的标准数据格式. 不过由 ...

  9. 使用JavaScriptSerializer序列化集合、字典、数组、DataTable为JSON字符串 分类: 前端 数据格式 JSON 2014-10-30 14:08 169人阅读 评论(0) 收藏

    一.JSON简介 JSON(JavaScript Object Notation,JavaScript对象表示法)是一种轻量级的数据交换格式. JSON是"名值对"的集合.结构由大 ...

随机推荐

  1. 【JS基础】对象

    delete 可以删除对象属性及变量 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);// ...

  2. 微软往年校招招面试题AC全解。

    因为4月初要参加微软的online.所以今天把微软的面试题拿出来做了,自己解答了题目.下面附上我的解答代码. -----------16年9月校招:  第一道题:Farthest Point(最远的整 ...

  3. Android 学习笔记之ContentProvider实现数据共享....

    PS:最近听老师说打算让我参与企业的app制作,让我加快学习的进度...好吧,貌似下周还有考试...貌似实验室这个app也要做...暂时不管了...那就只能加快进度了,感觉略微的有点激动和紧张,总算是 ...

  4. MVC框架 - 异常处理

    在ASP.NET中,错误处理是通过使用标准的尝试捕捉方法或使用应用程序事件.ASP.NET MVC附带内置支持,被称为异常过滤器功能异常处理.在这里我们要学习两种方法:一个是定义HandleError ...

  5. js中的一些零碎方法

    ajax表单提交: $.post("do_login", f.serializeArray(), function(data) { if (data.status + " ...

  6. WebStorm主题设置

    对于使用WebStorm作为开发工具的筒子们.应该忍受不了默认的主题吧,可是自己去一个一个设置又太繁琐.So,去网上下个主题那是必须的. 搜来一圈,发现一个站点提供了不少主题.闲话少说,进入正题. 1 ...

  7. CentOS7.2非HA分布式部署Openstack Pike版 (实验)

    部署环境 一.组网拓扑 二.设备配置 笔记本:联想L440处理器:i3-4000M 2.40GHz内存:12G虚拟机软件:VMware® Workstation 12 Pro(12.5.2 build ...

  8. 项目中常用的19条MySQL优化

    声明一下:下面的优化方案都是基于 " Mysql-索引-BTree类型 " 的 一.EXPLAIN 做MySQL优化,我们要善用 EXPLAIN 查看SQL执行计划. 下面来个简单 ...

  9. 利用策略模式实现了同一接口的多个Servicel实现类,如何同时注入Controller

    解决方法如上图,通过给实现类起别名,并在controller中,通过@Qualifier注解获取不同的实现类,之前没有这样写,会出现这样的情况: 通过@autowired注解注入dao层时为空,会报空 ...

  10. vim环境配置

    ctags ctags对浏览代码非常的方便,可以在函数.变量之间跳来跳去等等. 下载 下载路径:http://ctags.sourceforge.net/ 我已经下载过了,路径:/home1/fuju ...