easyUI 之动态填充树状列表【easyui-tree】

通过服务器API请求数据,使用【easyui-tree】实现动态填充单位列表的展示 

 
        
单位列表
    var EnterPriseAllList_tree = format_tree_data(EnterPriseAllList);//格式化单位列表
    $("#tt").tree({//Easy ui tree 加载列表 
         data: EnterPriseAllList_tree
    });
    
    
    //=======================================
    //格式化接收到的单位列表,easy UI 用于显示
    //=========================================
    function format_tree_data(data) {
        var unit_Type = [
            "人员密集类",//11,12
            "石油化工类",//21,22
            "高层建筑类",
            "大型仓储类",
            "地下建筑类",
            "其他类"
        ];
        var tree_list_array = [];
    
        $.each(unit_Type, function (i, obj) {
            var List_obj;
            if (i == 0) {
                List_obj = {
                    "id": i + 1,
                    "text": obj,
                    "state": "opened",
                    "iconCls": "fa fa-home icon-unit-list",
                    "children": [
                        {
                            "id": (i + 1) * 10 + 1,
                            "text": "一级重点单位",
                            "state": "opened",
                            "iconCls": "fa fa-home icon-unit-list",
                            "children": []
                        }, {
                            "id": (i + 1) * 10 + 2,
                            "text": "二级重点单位",
                            "state": "closed",
                            "iconCls": "fa fa-home icon-unit-list",
                            "children": []
                        }
                    ]
                };
    
            } else {
                List_obj = {
                    "id": i + 1,
                    "text": obj,
                    "state": "closed",
                    "iconCls": "fa fa-home icon-unit-list",
                    "children": [
                        {
                            "id": (i + 1) * 10 + 1,
                            "text": "一级重点单位",
                            "state": "closed",
                            "iconCls": "fa fa-home icon-unit-list",
                            "children": []
                        }, {
                            "id": (i + 1) * 10 + 2,
                            "text": "二级重点单位",
                            "state": "closed",
                            "iconCls": "fa fa-home icon-unit-list",
                            "children": []
                        }
                    ]
                };
            }
            
            tree_list_array.push(List_obj);
        });
        
        $.each(data, function (i, obj) {        
            var unit = {
                "id": obj.Id,
                "text": obj.Name,
                "iconCls": "fa fa-hand-o-right icon-unit-list",
            };
            switch (obj.Type) {
                case "人员密集类":
                    if (obj.Level == "一级重点单位") {                    
                        tree_list_array[0].children[0].children.push(unit);
                    }
                    else {
                        tree_list_array[0][1].children[1].children.push(unit);
                    }
                    break;
                case "石油化工类":
                    if (obj.Level == "一级重点单位") {
                        console.log(tree_list_array[0].children[0]);
                        tree_list_array[1].children[0].children.push(unit);
                    }
                    else {
                        tree_list_array[1][1].children[1].children.push(unit);
                    }
                    break;
                case "高层建筑类":
                    if (obj.Level == "一级重点单位") {
                        console.log(tree_list_array[0].children[0]);
                        tree_list_array[2].children[0].children.push(unit);
                    }
                    else {
                        tree_list_array[2][1].children[1].children.push(unit);
                    }
                    break;
                case "大型仓储类":
                    if (obj.Level == "一级重点单位") {
                        console.log(tree_list_array[0].children[0]);
                        tree_list_array[03].children[0].children.push(unit);
                    }
                    else {
                        tree_list_array[3][1].children[1].children.push(unit);
                    }
                    break;
                case "地下建筑类":
                    if (obj.Level == "一级重点单位") {
                        console.log(tree_list_array[0].children[0]);
                        tree_list_array[4].children[0].children.push(unit);
                    }
                    else {
                        tree_list_array[4][1].children[1].children.push(unit);
                    }
                    break;
                case "其他类":
                    if (obj.Level == "一级重点单位") {
                        console.log(tree_list_array[0].children[0]);
                        tree_list_array[5].children[0].children.push(unit);
                    }
                    else {
                        tree_list_array[5][1].children[1].children.push(unit);
                    }
                    break;
                default:
                    return;
            };        
        });
        return tree_list_array;
    }

    easyUI 之动态填充树状列表【easyui-tree】_第1张图片

     

     

     

    你可能感兴趣的:(JavaScript)