接上篇 checkbox数据的带入

首先带回回来的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     }