之前做的执法文书的工作，现在需要从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][]+ "'},";
}
}
}
}