接上篇 checkbox数据的带入

Posted 2020-10-04 橘子红

  首先带回回来的json数据 先转换为树形结构 

才能方便之后遍历 添加数据，这是一段递归把数据变为树形结构的方法

// 把返回到LIST转为树形结构
function getTree(data, fid) {
    var result = [];
    var temp;
    for (var i = 0; i < data.length; i++) {
        if (data[i].fid == fid) {
            var obj = {
                "text" : data[i].gnmc,
                "gnid" : data[i].gnid,
                "yxbz" : data[i].yxbz
            };
            temp = getTree(data, data[i].gnid);
            if (temp.length > 0) {
                obj.children = temp;
            }
            result.push(obj);
        }
    }
    return result;
}

但注意：该方法使用的数据是这样存储的 fid是它的父级元素id  例如：gnid 13 的父级为gnid 12  ，gnid 12的父级为1 是这样的结构。

首先得到的数据 data = JSON.parse(data); //JSON.parse() 方法解析一个JSON字符串，构造由字符串描述的javascript值或对象

在转换为树形结构 var treeList = getTree(data, null);

对树形结构遍历 进行页面结构拼接 数据添加

 

 1 var html1j = "";
 2     var html2j = "";
 3     for (var i = 0; i < treeList.length; i++) {
 4         html1j += "<div class=\'kuai\'><div class=\\"row row-box tree-title\\">"
 5                 + "<span class=\'h4 yjtitle\' >" + treeList[i].text
 6                 + "</span> <span class=\'qiyongSpan\'>"
 7                 + "<label class=\'ant-checkbox-wrapper\'> "
 8                 + "<span class=\'ant-checkbox ant-checkbox-checked\' id=\'"
 9                 + treeList[i].gnid + "\' onclick=\'xuan1J(this.id)\'>"
10                 + "<input type=\'checkbox\' class=\'ant-checkbox-input\' value=\'"
11                 + treeList[i].yxbz + "\'></input>";
12         if (treeList[i].yxbz == \'Y\') {
13             html1j += "<span class=\'ant-checkbox-inner chose\' style=\'background-color:#108ee9;\'></span>"
14                     + "</span>" + "<span>启用</span>";
15         } else {
16             html1j += "<span class=\'ant-checkbox-inner\' ></span>" + "</span>"
17                     + "<span>禁用</span>";
18             ;
19         }
20 
21         html1j += "</label>"
22                 + "</span>"
23                 + "<button class=\'btn btn-info rt\' style=\'margin-top: 0%; margin-right: 2%;\' id=\'" 
24                 + "b" + i + "\' onclick=\'shouqifn(" + i + ")\'>收起</button>"
25                 + "</div>"; /* +"<div class=\'tree-body\' id=\'"+"a"+i+"\'>" */
26         if (treeList[i].children) {
27             html2j += "<div class=\'tree-body\' id=\'" + "a" + i + "\'>";
28             for (var j = 0; j < treeList[i].children.length; j++) {
29                 html2j += "<div class=\'cbt-item\'>"  //里面具体样式用单引号   每一段用双引号 可以不分行用双引号括起来  也可向这样用分开 用加号连
30                         + "<div class=\'cbt-item-h\'>"
31                         + "<label class=\'ant-checkbox-wrapper\'>"
32                         + "<span class=\'ant-checkbox ant-checkbox-checked\' id=\'"
33                         + treeList[i].children[j].gnid
34                         + "\' onclick=\'xuan2J(this.id)\'>"
35                         + "<input type=\'checkbox\' class=\'ant-checkbox-input\' value=\'"
36                         + treeList[i].children[j].yxbz + "\' ></input>";
37                 if (treeList[i].children[j].yxbz == \'Y\') {
38                     html2j += "<span class=\'ant-checkbox-inner chose\'style=\'background-color:#108ee9;\'></span>";
39 　　　　　　　　　　　　　　　　　　　　
40                 } else {
41                     html2j += "<span class=\'ant-checkbox-inner\'></span>";
42                 }
43 
44                 html2j += "</span>" + "<span>" + treeList[i].children[j].text //注意拼接的格式 “+数据+”
45                         + "</span>" + "</label>";
46 
47                 if (treeList[i].children[j].children) { //可以对数据判断 由结果来拼接
48                     for (var k = 0; k < treeList[i].children[j].children.length; k++) {
49                         html2j += "<span class=\'cbt-line\'></span>";
50                     }
51 
52                 }
53 
54                 html2j += "</div>" + "<div class=\'cbt-root\'>";
55 
56                 if (treeList[i].children[j].children) {
57 
58                     for (var k = 0; k < treeList[i].children[j].children.length; k++) {
59                         html2j += "<label class=\'cbt-root-c ant-checkbox-wrapper\'>"
60                                 + "<span class=\'ant-checkbox ant-checkbox-checked\' id=\'"
61                                 + treeList[i].children[j].children[k].gnid
62                                 + "\' onclick=\'xuan3J(this.id)\'>"
63                                 + "<input type=\'checkbox\' class=\'ant-checkbox-input\' value=\'"
64                                 + treeList[i].children[j].children[k].yxbz
65                                 + "\' >";
66                         if (treeList[i].children[j].children[k].yxbz == "Y") {
67                             html2j += "</input>"
68                                     + "<span class=\'ant-checkbox-inner chose\'style=\'background-color:#108ee9;\'>";
69                             /* $("#"+id).find(\'span\').css({"background-color":"#108ee9"}); */
70                         } else {
71                             html2j += "</input>"
72                                     + "<span class=\'ant-checkbox-inner \'>";
73                         }
74                         html2j += "</span>" + "</span>" + "<span>"
75                                 + treeList[i].children[j].children[k].text
76                                 + "</span>" + "</label>";
77                     }
78 
79                 }
80                 html2j += "</div></div>";
81             }
82             html2j += "</div>";
83         }
84         $(\'div.xuanbody\').append(html1j + html2j);
85         html1j = "";
86         html2j = "";
87 
88     }