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

相关文章
|
3月前
|
JSON 前端开发 JavaScript
javascript 实现纯前端将数据导出excel两种方式
<html> <head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p> <button onclick='tableToExcel()'>导出</button> </head> <body> <script> const tableToExcel = () => { // 要导出的json数据 const jsonData = [ { name:'路人甲', ph
36 0
|
8月前
|
JavaScript 数据库
js动态添加datagrid表头&批量保存实战研究
最近小编在做项目的时候,遇到了这样一个需求:如下图所示,表头中的"一般"和"优秀"是动态添加的,添加上对应的票数之后,选中多行,单击保存,将动态添加的列数据转换成行保存到数据库中
extjs5 表单校验 同步和异步
最近学习extjs5 需要表单校验 但是发现有问题 即使手机不存在 还是 提示 手机存在
91 0
|
JSON JavaScript 数据格式
|
JavaScript 前端开发
|
缓存 索引 数据格式
从零开始学_JavaScript_系列(十一)——dojo(5)(GRID表格进阶:更新值,name,重置表结构/缓存,重绘表格)
如果没接触过dojo,或者是dojo的gridx控件,请查看我之前几篇博客,写的已经非常详细了 最重要的,更新grid中指定单元格的值,请拉到最后看(59) 至此,grid表格日常所需的常见功能已经基本完结。如果有其他功能需求,请评论提出。 (54)获得某列的name属性 代码: grid.column(2).name(); 效果: ①获得第2+1=3列的na
2241 0