Struts2的josn插件 josn-plugin 对我们开发extjs程序很方便,但是他每次返回的数据格式都是以一个对象的方式返回的,对象中可以包含其他格式的数据,比如数组.
这就是一般的返回格式
{"root":[{"address":"shenzhen","company":"Bank of China","manager":"true","name":"Jack","password":"a","userid":"8ad08c8323eeb3ba0123eeb3c6e20001","username":"a","zip":"518000"},{"address":"dongjing","company":"Bank of Japan","manager":"false","name":"Jack Cheng","password":"b","userid":"8ad08c8323eeb3ba0123eeb3c6e20002","username":"b","zip":"518000"}],"totalProperty":2}
struts2后台配置为
<action name="getUsers" class="userAction" method="getUsers">
<result type="json">
<param name="root">
page
</param>
<param name="excludeNullProperties">
true
</param>
<param name="includeProperties">
root.*,totalProperty
</param>
</result>
</action>
而我们做树(TreePanel)的时候需要服务器返回的数据是数组对象的形式.如下
[{"address":"shenzhen","company":"Bank of China","manager":"true","name":"Jack","password":"a","userid":"8ad08c8323eeb3ba0123eeb3c6e20001","username":"a","zip":"518000"},{"address":"dongjing","company":"Bank of Japan","manager":"false","name":"Jack Cheng","password":"b","userid":"8ad08c8323eeb3ba0123eeb3c6e20002","username":"b","zip":"518000"}]
但是json-plugin不支持直接返回这种格式,所以我们可以修改一下TreeLoader的处理函数
//TreeLoader扩展,支持josn-plugin返回的json对象中包含的数组值
Ext.tree.JsonPluginTreeLoader = function (config) {
this.rootName = 'root';
Ext.tree.JsonPluginTreeLoader.superclass.constructor.call(this, config);
}
Ext.extend(Ext.tree.JsonPluginTreeLoader, Ext.tree.TreeLoader, {
processResponse: function (response, node, callback,scope) {
var json = response.responseText;
try {
var o = response.responseData || Ext.decode(json);
//在原代码基础上增加了下面处理---------------------
if (Ext.type(o) == 'object') {//如果返回的是对象则获取他的root部分,rootName是可以在使用的时候配置的
o = o[this.rootName || 'root'];
}
//--------------------------------------------------
node.beginUpdate();
for (var i = 0, len = o.length; i < len; i++) {
var n = this.createNode(o[i]);
if (n) {
node.appendChild(n);
}
}
node.endUpdate();
this.runCallback(callback, scope || node, [node]);
} catch(e) {
this.handleFailure(response);
}
}
});
使用方法
{
xtype: 'treepanel',
loader: new Ext.tree.JsonPluginTreeLoader({
dataUrl: 'xxx.action'
//rootName:'nodes' //这里可以动态配置,已配合服务器返回的数组名称:)
}),
root: new Ext.tree.AsyncTreeNode({
text: '根节点'
})
}
后台struts2的josn配置如下
<action name="getUsers" class="userAction" method="getUsers">
<result type="json">
<param name="root">
page
</param>
<param name="excludeNullProperties">
true
</param>
<param name="includeProperties">
root.*
</param>
</result>
</action>
分享到:
相关推荐
Ext.tree 实例代码文件 并附带封装的json类 ,工程源码,相互指教!
Extjs 原始的treeloader无法通过跨域读取jsonp数据,非常恼人,查了网上一些资料后自己写了一个。能够实现跨域的jsonp读取加载节点。没有太多时间调试,可能不完美。
分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...
分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...
// auto create TreeLoader dataUrl: 'get-nodes.php', root: { nodeType: 'async', text: 'Ext JS', draggable:false, id:'source' } }); // render the tree tree.render(); tree.getRootNode()....
Ext 漂亮界面设计 //实例菜单树形 menuTree:new Ext.tree.TreePanel({ title:'功能菜单', region:'west', ...loader:new Ext.tree.TreeLoader({ dataUrl:'extExampleTree.json', requestMethod: 'GET' }),
该工具生成其他插件使用的文本文件,例如TechManager和ATC ,因此需要这些插件之一才能将树加载到游戏本身中。安装在任何位置解压存档。 启动 TED-v[xx].exe故障排除您可能缺少 .NET 4.5 框架。 。用法启动首先选择...
menu.json json格式数据,模拟从后台返回的json数据 PinyinFilter.js:提供进行拼音过滤所需要的函数 TreeFilter.js:自定义的类,提供树结点的过滤功能(依赖于PinyinFilter.js) JsonTreeLoader.js:自定义的...
2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. 给节点增加提示信息 9. 为节点设置超链接 10. 编辑节点名称 11. 树形的拖放...
3.5.2. TreeLoader外传 之 读取本地json 3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷告诉你咋从...
extjs兼容dwr的代理和DWRTreeLoader
var treeLoader = new Ext.ux.tree.XmlTreeLoader( { dataUrl : '/desc/getDesc.action' }); var rootnode = new Ext.tree.AsyncTreeNode( { text : '投诉分类', id:"0", leaf:'false' }); EXT通过/desc/getDesc...
区别在于,远程脚本调用方式加载树节点信息使用的是WebInvokeTreeLoader,需要通过fn属性来指定用于加载数据的远程方法,并在...而传统的树节点加载器是Ext.tree.TreeLoader,需要指定一个url来获得json数据。
内容包含: 1)ExtJS简介 2)获得ExtJS 3)应用ExtJS 4)布局概述 5)ExtJS版的Hello 6)Ext类库简介 7)Border区域布局 8)ExtJS的组件 9)Column列布局 10)组件的使用 11)Fit布局 12)Form布局 13)组件的配置属性 14)...
其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext.tree.TreeLoader。下面介绍Extjs 中的 Treepanel 实现菜单级联选中效果。 在 ...
loader : new Ext.tree.TreeLoader({ url : 'basedata/do_dm!read.action' }) }); 第二种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm, url : 'basedata/do_dm!read.action', rootVisible:...
loader: new Ext.tree.TreeLoader({ dataUrl:'<%=path%>/treeOperation.do?action=loadTree' }), root:new Ext.tree.AsyncTreeNode({ id : "treeContact", text: '联系人', draggable:false, expanded: ...
如果使用extjs 和 dwr 进行开发,这两个js文件必不可少,所以压缩到一起,进行了保留!
我这是根据别人写的做成PDF文档 第一章 开始ExtJS………………………………………………...……53 8.3 TreeLoader……….………………………………………………………………………………………….………55