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. }




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com