Extjs4操作TreeStore处理proxyAjax获取的数据

Extjs4操作TreeStore处理proxyAjax获取的数据

最近在搞extjs4 TreeStore时有一个需求 就是要处理一下后台传过来的json数据然后再显示，看api也没有找到解决办法 ，最后看源码在Ext.data.proxy.Server 看到这么一个方法

1. extractResponseData: function(response) {
2. return response;
3. },

然后我再 proxy 中重写了这个方法

1. Ext.define("App.store.MenuStore",{
2. extend:'Ext.data.TreeStore',
3. model:'App.model.MenuModel',
4. proxy:{
5. type:'ajax',
6. url:app.contextPath + '/base/syresource!doNotNeedSecurity_getMainMenu.action',
7. reader:"json",
8. extractResponseData: function(response) {
9. var json = Ext.loadFilter(Ext.JSON.decode(response.responseText),{parentField : 'pid'});
10. Ext.each(json,function(record){
11. if(Ext.isEmpty(record.children)){
12. record.expanded = false;
13. record.leaf = true;
14. }else{
15. record.expanded = true;
16. }
17. });
18. response.responseText = Ext.JSON.encode(json);
19. return response
20. }
21. },
22. autoLoad: true
23. });

 

大家都喜欢ztree的简单数据结构（扁平pid结构数据集），而Extjs并没有给我们提供，于是只有我们自己动手了。

标准的 JSON 数据需要嵌套表示节点的父子包含关系

例如：

1. var nodes = [
2. {name: "父节点1", children: [
3. {name: "子节点1"},
4. {name: "子节点2"}
5. ]}
6. ];

简单模式的 JSON 数据仅需要使用 id / pId 表示节点的父子包含关系

例如：

 

1. var nodes = [
2. {id:1, pId:0, name: "父节点1"},
3. {id:11, pId:1, name: "子节点1"},
4. {id:12, pId:1, name: "子节点2"}
5. ];

 

这是我希望转换的json数据

 

1. [
2. {
3. "iconCls": "ext-icon-application_view_tile",
4. "id": "xtgl",
5. "target": "",
6. "text": "系统管理",
7. "url": "/welcome.jsp"
8. },
9. {
10. "iconCls": "ext-icon-newspaper_link",
11. "id": "zygl",
12. "pid": "xtgl",
13. "target": "cmp",
14. "text": "资源管理",
15. "url": "App.view.ResourceView"
16. },
17. {
18. "iconCls": "ext-icon-tux",
19. "id": "jsgl",
20. "pid": "xtgl",
21. "target": "cmp",
22. "text": "角色管理",
23. "url": "App.view.RoleView"
24. },
25. {
26. "iconCls": "ext-icon-group_link",
27. "id": "jggl",
28. "pid": "xtgl",
29. "target": "cmp",
30. "text": "机构管理",
31. "url": "App.view.OrganizationView"
32. },
33. {
34. "iconCls": "ext-icon-user_suit",
35. "id": "yhgl",
36. "pid": "xtgl",
37. "target": "cmp",
38. "text": "用户管理",
39. "url": "App.view.UserView"
40. },
41. ]

ExtJs只认识嵌套的json数据，这就需要我们进行转换了，转换的方法如下：

1. Ext.loadFilter= function(data, opt) {
2. var idField, textField, parentField;
3. if (opt.parentField) {
4. idField = opt.idField || 'id';
5. textField = opt.textField || 'text';
6. parentField = opt.parentField || 'pid';
7. var i, l, treeData = [], tmpMap = [];
8. for (i = 0, l = data.length; i < l; i++) {
9. tmpMap[data[i][idField]] = data[i];
10. }
11. for (i = 0, l = data.length; i < l; i++) {
12. if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) {
13. if (!tmpMap[data[i][parentField]]['children'])
14. tmpMap[data[i][parentField]]['children'] = [];
15. data[i]['text'] = data[i][textField];
16. data[i]['leaf'] = true;//判断为叶子节点
17. tmpMap[data[i][parentField]]['children'].push(data[i]);
18. } else {
19. data[i]['text'] = data[i][textField];
20. treeData.push(data[i]);
21. }
22. }
23. return treeData;
24. }
25. return data;
26. }

 原文地址http://www.bieryun.com/2061.html