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

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

 <!--右侧单位列表开始-->
        <div id="unit-list" class="easyui-panel">
            <div id="unit-list_title">
                单位列表
                <a id="unit-list-close-btn" class="fa fa-times" style="float: right" href="javascript:;"></a>
            </div>
            <ul id="tt" class="easyui-tree" data-options="url:'',method:'get',animate:true"></ul>
        </div>
        <!--右侧单位列表结束-->
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;
}

猜你喜欢

转载自blog.csdn.net/qq_18144905/article/details/82455316