jQuery-easyUI Tree 后台返回json数据和官网例子有差别，如何处理

最新推荐文章于 2022-10-18 15:16:02 发布

原创最新推荐文章于 2022-10-18 15:16:02 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery-easyui #tree

js 同时被 2 个专栏收录

47 篇文章

订阅专栏

jquery-easyui

1 篇文章

订阅专栏

本文介绍如何处理后台返回的数据格式与jQuery EasyUI树形控件要求不符的情况，通过loadFilter方法实现数据格式转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用jquery-easyUI 时，接收后台返回是数据，可能不是官网例子的一个大数组，而是一个对象包含，多个对象，再包含数组：

官网json格式：

[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
		"text":"File1",
		"checked":true
    },{
		"text":"Books",
		"state":"open",
		"attributes":{
			"url":"/demo/book/abc",
			"price":100
		},
		"children":[{
			"text":"PhotoShop",
			"checked":true
		},{
			"id": 8,
			"text":"Sub Bookds",
			"state":"closed"
		}]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
		"text":"Java"
    },{
		"text":"C#"
    }]
}]

而后台实际返回的json，可能是这样的：

{
  "msg": "success",
  "status":1,
   "data":[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
		"text":"File1",
		"checked":true
    },{
		"text":"Books",
		"state":"open",
		"attributes":{
			"url":"/demo/book/abc",
			"price":100
		},
		"children":[{
			"text":"PhotoShop",
			"checked":true
		},{
			"id": 8,
			"text":"Sub Bookds",
			"state":"closed"
		}]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
		"text":"Java"
    },{
		"text":"C#"
    }]
}]
}

如何获取到渲染树所需的数据呢，这里用到一个方法loadFilter（返回过滤过的数据进行展示）

$('#treePower').tree({     
	          url:"../jquery-easyui/tree_data3.json",
	          method:"get",
	          animate:true,
	          checkbox:true,
	          loadFilter: function(data){ //返回过滤过的数据进行展示。返回数据是标准树格式。
					if (data.data){
						return data.data;
					} else {
						return data;
					}
			    }
              
	        });