jQuery树插件zTree.js如何应用后台返回的不标准数据
应用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": "[email protected]",
"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": "[email protected]",
"mobilePhone": "18655558888",
"createData": 1472441686,
"createUserId": 1,
"webId": 1,
"roleId": 101
},
{
"id": 2,
"code": "xxx",
"password": "123123",
"email": "[email protected]",
"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 {
}
}
},
});