jQuery树插件zTree.js如何应用后台返回的不标准数据
2016-09-13 11:47
381 查看
应用zTree插件,有2种数据格式,一种是标准数据,一种是简单数据,具体请看下面不能直接应用的数据示例:
1. 后台返回标准json数据但是不能直接应用:
原因:应用ztree,json数据必须要有name和children字段,参见:view-source:http://www.treejs.cn/v3/demo/cn/core/standardData.html
不能直接应用数据如下:
解决方法:
2. 后台返回简单json数据但是不能直接应用:
原因:应用ztree,json数据必须要有id、pId和name字段,参见:view-source:http://www.treejs.cn/v3/demo/cn/core/simpleData.html
不能直接应用数据如下:
解决方法:
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 { } } }, });
相关文章推荐
- zTree -- jQuery 树插件(后台异步获取数据-asp.net mvc模式下)
- 使用ASP.NET的C#语言写后台如何将数据返回给微信小程序的JS
- 后台返回一个string类型的json格式数据,前台js如何读取?
- jquery 插件ztree的应用------动态加载树节点数据
- 使用JQuery.js & JQuery.form.js 插件完成对StrutsAction的异步请求,返回JSON数据
- jquery 插件ztree的应用------动态加载树节点数据
- js_前台页面如何设置radio、checkbox、select三者的值以及绑定事件,方便后台接收数据
- js,jquery无法获取后台(Response.Write())返回的json
- js返回数据到后台
- c#如何接受js返回ScriptObject对象存储的json数据
- jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
- 如何在.NET MVC中使用jQuery并返回JSON数据
- jquery+ajax每秒向后台发送请求数据然后返回页面的代码
- struts2拦截器如何返回json数据?如何使用Jquery(ExtJs)接收拦截器返回的数据?
- js中如何处理服务端返回的数据集
- js+JQuery返回顶部功能如何实现
- jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
- jQuery备忘之(一):jQuery处理.Net后台返回的Xml格式与Json格式的数据的比较分析
- jquery 插件ztree的应用------简单的树(tree)
- FireFox中使用JQuery的ajaxfileupload插件返回JSON格式数据提示保存的解决方法。