Extjs 4操作TreeStore処理proxyAjaxで取得したデータ
最近はextjs 4 TreeStoreをやっていますが、背景から送られてきたjsonのデータを処理してから表示する必要があります.appiを見ても解決方法が見つからないです.最後にソースはExt.data.proxy.Serverで見ました.
[javascript] view plin copy
extract ResonseData: function(レスポンス) { return レスポンス } そして私はproxyの中でこの方法を書き直しました.
標準的なJSONデータは、ノードを表す親子の関係を入れ替える必要がある.
[javascript] view plin copy
extract ResonseData: function(レスポンス) { return レスポンス } そして私はproxyの中でこの方法を書き直しました.
Ext.define("App.store.MenuStore",{
extend:'Ext.data.TreeStore',
model:'App.model.MenuModel',
proxy:{
type:'ajax',
url:app.contextPath + '/base/syresource!doNotNeedSecurity_getMainMenu.action',
reader:"json",
extractResponseData: function(response) {
var json = Ext.loadFilter(Ext.JSON.decode(response.responseText),{parentField : 'pid'});
Ext.each(json,function(record){
if(Ext.isEmpty(record.children)){
record.expanded = false;
record.leaf = true;
}else{
record.expanded = true;
}
});
response.responseText = Ext.JSON.encode(json);
return response
}
},
autoLoad: true
});
みんなはztreeの簡単なデータ構造が好きです.Extjsは私達に提供してくれません.だから私達だけが手がけました.標準的なJSONデータは、ノードを表す親子の関係を入れ替える必要がある.
:
簡単なモードのJSONデータは、ID/pIdだけを使用してノードの親子の関係を表しています.var nodes = [ {name: " 1", children: [ {name: " 1"}, {name: " 2"} ]} ];
:
これは私が変えたいjsonデータです.var nodes = [ {id:1, pId:0, name: " 1"}, {id:11, pId:1, name: " 1"}, {id:12, pId:1, name: " 2"} ];
ExtJsは入れ子のjsonデータしか認識していません.これは私達が変換する必要があります.変換の方法は以下の通りです.[ { "iconCls": "ext-icon-application_view_tile", "id": "xtgl", "target": "", "text": " ", "url": "/welcome.jsp" }, { "iconCls": "ext-icon-newspaper_link", "id": "zygl", "pid": "xtgl", "target": "cmp", "text": " ", "url": "App.view.ResourceView" }, { "iconCls": "ext-icon-tux", "id": "jsgl", "pid": "xtgl", "target": "cmp", "text": " ", "url": "App.view.RoleView" }, { "iconCls": "ext-icon-group_link", "id": "jggl", "pid": "xtgl", "target": "cmp", "text": " ", "url": "App.view.OrganizationView" }, { "iconCls": "ext-icon-user_suit", "id": "yhgl", "pid": "xtgl", "target": "cmp", "text": " ", "url": "App.view.UserView" }, ]
Ext.loadFilter= function(data, opt) { var idField, textField, parentField; if (opt.parentField) { idField = opt.idField || 'id'; textField = opt.textField || 'text'; parentField = opt.parentField || 'pid'; var i, l, treeData = [], tmpMap = []; for (i = 0, l = data.length; i < l; i++) { tmpMap[data[i][idField]] = data[i]; } for (i = 0, l = data.length; i < l; i++) { if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) { if (!tmpMap[data[i][parentField]]['children']) tmpMap[data[i][parentField]]['children'] = []; data[i]['text'] = data[i][textField]; data[i]['leaf'] = true;// tmpMap[data[i][parentField]]['children'].push(data[i]); } else { data[i]['text'] = data[i][textField]; treeData.push(data[i]); } } return treeData; } return data; }