jQuery树插件zTree.js如何应用后台返回的不标准数据

来源：互联网发布：黑蜘蛛软件编辑：程序博客网时间：2024/04/29 21:35

应用zTree插件，有2种数据格式，一种是标准数据，一种是简单数据，具体请看下面不能直接应用的数据示例：

1. 后台返回标准json数据但是不能直接应用：

原因：应用ztree，json数据必须要有name和children字段，参见：view-source:http://www.treejs.cn/v3/demo/cn/core/standardData.html

不能直接应用数据如下：

{    "code": 200,    "message": "操作成功",    "data": [        {            "id": 107,            "name": "测试不通过(给开发人员)",            "createData": 1472441685,            "createUserId": 1,            "webId": 1,            "postUsers": [                {                    "id": 3,                    "code": "x",                    "password": "123123",                    "email": "fuxiaodong@iyunwen.com",                    "mobilePhone": "18655558888",                    "createData": 1472441686,                    "createUserId": 1,                    "webId": 1,                    "roleId": 101                }            ]        },        {            "id": 105,            "name": "验收",            "createData": 1472441685,            "createUserId": 1,            "webId": 1,            "postUsers": [                {                    "id": 4,                    "code": "xx",                    "password": "123123",                    "email": "meiaohan@iyunwen.com",                    "mobilePhone": "18655558888",                    "createData": 1472441686,                    "createUserId": 1,                    "webId": 1,                    "roleId": 101                },                {                    "id": 2,                    "code": "xxx",                    "password": "123123",                    "email": "wangdewei@iyunwen.com",                    "mobilePhone": "18655558888",                    "createData": 1472441686,                    "createUserId": 1,                    "webId": 1,                    "roleId": 101                }            ]        }    ]}

解决方法：

            Base.request({                url: '...',                params: {                    webId: 1                },                callback: function(data) {                    if(data.data) {                        var html ='';                        if(data.data[0]) {                            var formatData = [],                                len = data.data.length;                            for(var p in data.data) {                                formatData[p] = {};                                formatData[p]['children'] = [];                                formatData[p]['name'] = data.data[p].name;                                for(var c in data.data[p].postUsers) {                                    formatData[p]['children'][c] = {};                                    formatData[p]['children'][c]['name'] = data.data[p].postUsers[c].code;                                    formatData[p]['children'][c]['my_id'] = data.data[p].postUsers[c].id;                                }                            }                            var treeData = [];                            treeData[0] = {};                            treeData[0]['name'] = '所有岗位';                            treeData[0]['children'] = formatData;                            treeData[0]['open'] = true;                            $.fn.zTree.init($("#ztree"), setting, treeData);                        }else {                        }                    }else {                        layer.msg(data.message);                    }                },            });

2. 后台返回简单json数据但是不能直接应用：

原因：应用ztree，json数据必须要有id、pId和name字段，参见：view-source:http://www.treejs.cn/v3/demo/cn/core/simpleData.html

不能直接应用数据如下：

{    "message": "接口调用成功！",    "status": 0,    "list": [        {            "ParentId": 0,            "Value": null,            "Isleaf": 1,            "Webid": 5988,            "Intval": null,            "Adduserid": 6414,            "Mode": 0,            "Name": "1",            "Time": "2016-09-02",            "Del": 0,            "Describ": null,            "Id": 82980,            "Orderid": 0        },        {            "ParentId": 0,            "Value": null,            "Isleaf": 1,            "Webid": 5988,            "Intval": null,            "Adduserid": 6414,            "Mode": 0,            "Name": "2",            "Time": "2016-09-13",            "Del": 0,            "Describ": null,            "Id": 84190,            "Orderid": 1        },        {            "ParentId": 0,            "Value": null,            "Isleaf": 1,            "Webid": 5988,            "Intval": null,            "Adduserid": 6414,            "Mode": 0,            "Name": "3",            "Time": "2016-09-13",            "Del": 0,            "Describ": null,            "Id": 84191,            "Orderid": 2        }    ]}

解决方法：

    Base.request({        url: '...',        params: {            m: 0,        },        callback: function(data) {            if(data.status) {                Base.gritter(data.message, false);            }else {                var html ='';                if(data.list[0]) {                    var formatData = [],                        len = data.list.length;                    for(var key in data.list) {                        formatData[key] = {};                        formatData[key]['name'] = data.list[key]['Name'];                        formatData[key]['pId'] = data.list[key]['ParentId']+1;                        formatData[key]['id'] = data.list[key]['Id']+1;                    }                    formatData[len] = {};                    formatData[len]['name'] = '全部分类';                    formatData[len]['pId'] = 0;                    formatData[len]['id'] = 1;                    formatData[len]['open'] = true;                    $.fn.zTree.init($("#ztree"), setting, formatData);                    treeObj = $.fn.zTree.getZTreeObj("ztree");                }else {                }                            }        },    });

1 0