`
yourgame
  • 浏览: 355272 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

TreeLoader扩展,支持josn-plugin返回的json对象中包含的数组值

阅读更多
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>
4
1
分享到:
评论
3 楼 88112870 2009-11-30  
路径写成相对的呢
2 楼 blueyanghualong 2009-11-16  
请教您个问题

n = tabs.add({
'id' : node.id,
'title' : node.text,
closable : true,
autoScroll : true,
html : '<div class="frame-block">'
+ '<span>&nbsp;</span>' + '<img src='
+ showUrl +
                //'http://localhost:8080/pushvod/docUpload/PJE6W/11.jpg'
+' alt="" />' + '</div>'
});
我现在想动态生成图片 根据url 路径: 比如当我的
showUrl='http://localhost:8080/pushvod/docUpload/PJE6W/11.jpg'时写成死的 图片可以看到
但是 用showUrl代替时  图片却不显示 查看图片属性文件居然生成了以下的代码 为何会这样?
http://localhost:8080/pushvod/docUpload/test/11.jpgNaN%3C/div
1 楼 csjava 2009-10-12  
   

相关推荐

    Ext.tree.TreeLoader附带封装的json类

    在本文中,我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻...

    Extjs Tree + JSON + Struts2 例子

    ExtJS 是一个流行的 JavaScript 框架,用于构建富客户端应用,它支持多种数据源,包括 JSON。Struts2 是一个 Java Web 开发框架,提供了 JSON 插件来方便地处理 JSON 数据。在尝试构建这个示例时,开发者遇到了数据...

    ext2.2+struts2使用json传输数据生成的树

    为了返回`JSON`数据,我们需要配置Action类返回一个`JsonResult`类型的结果,这可以通过添加`struts-plugin.xml`中的相关配置实现。同时,在Action类中,我们可以将需要转换为`JSON`的数据集合(例如,树的节点信息...

    Extjs tree的简单小例子

    - 服务器返回的数据是一个JSON数组,每个对象包含`id`属性,用于标识节点。 7. **数据格式** - 返回的JSON数据表示树的节点结构,每个节点包含`id`,用于唯一标识。在实际应用中,可能还包括其他属性,如文本、...

    ExtJS_Tree利用_JSON_在Struts_2实现Ajax动态加载树结点

    在本文中,我们将深入探讨如何使用ExtJS框架的Tree组件,结合JSON数据格式以及Struts 2框架,来实现Ajax动态加载树形结构的节点。这是一项常见的需求,特别是在构建可扩展、用户友好的Web应用时,动态加载的树结构...

    Extjs Json树封装

    在本文中,我们将深入探讨"Extjs Json树封装"这一主题,包括如何使用JSON数据加载树形结构,以及涉及到的相关工具和源码。 首先,我们需要理解JSON树的概念。在ExtJS中,一个JSON树是由多个JSON对象组成的,每个...

    JSON ——数据库结果集转换

    标题和描述均提到了“JSON —— 数据库结果集转换”,这主要涉及到将数据库查询结果转化为JSON格式的数据,以便于在网络传输中使用。在现代Web开发中,JSON(JavaScript Object Notation)是一种轻量级的数据交换...

    extjs 总结

    - `loader`: 负责加载和解析树节点数据的对象,通常为 `Ext.tree.TreeLoader`。 - `selModel`: 选择模型,定义了用户如何选择树中的节点,默认是 `Ext.tree.DefaultSelectionModel`。 - `pathSeparator`: 分隔树...

    Ext tree json 动态加载完美实例

    在本例中,服务器返回的JSON字符串包含节点信息,如ID、文本、子节点等。Tree Panel的`loader`可以通过`dataUrl`属性指定服务器端接口URL,当用户展开节点时,会自动发送请求获取子节点数据。 **4. 多选与单选功能*...

    extJs 2异步树 源程序.

    在这个例子中,当用户展开根节点时,`TreeLoader`会发送请求到`tree_data.json`,服务器应返回一个包含子节点的JSON数组。加载完成后,`load`事件会被触发,你可以在此处进行进一步的操作,如渲染节点图标、处理错误...

    Extjs树分页组件扩展

    通过扩展TreeLoader,我们可以添加新的方法和属性来支持分页加载。例如,可以添加一个`pageSize`属性来定义每页显示的节点数量,以及一个`loadPage`方法来请求特定页码的数据。 **PagingToolbar的扩展** ...

    ExtjsTree

    - **JSON数据结构**:树形数据通常以JSON数组形式提供,每个元素代表一个节点,包含id、text、children等属性。 - **XML数据结构**:也可以使用XML格式,每个节点对应XML的一个元素,通过配置解析器进行解析。 4....

    Ext.Tree.Panel

    - 数据格式通常是JSON,包含`children`数组来表示子节点。每个节点对象可能包含`text`(显示文本)、`leaf`(是否叶子节点)和`expanded`(是否展开)等属性。 6. **事件处理**: - `TreePanel`提供了丰富的事件...

    多叉树结合JavaScript树形控件实现无限级树形结构(一种构建多级有序树形结构JSON(或XML)数据源的方法)

    3. 文件二 `branchTreeJSON.jsp`:后端处理逻辑,获取数据库中的层次数据,并将其转换为 JSON 格式返回给 TreeLoader。 综合以上内容,实现无限级树形结构的步骤包括: 1. 设计数据库表结构,包含 id 和 parentId ...

    多叉树结合JavaScript树形控件实现无限级树形菜单(一种构建多级有序树形结构JSON(或XML)数据源的方法).pdf

    `branchTreeJSON.jsp`则负责处理这个请求,从数据库中获取数据,然后调用`ExtTreeHelper.createExtTree()`方法将数据转换为树结构对象,并将其转换为JSON字符串返回。 `ExtTreeHelper.createExtTree()`的具体实现未...

    ext2的树组件的使用

    在JSON数据的生成过程中,每个树节点由一个对象表示,包含如`text`(节点显示的文本)、`id`(节点ID)、`cls`(CSS类名,通常用于自定义样式)、`leaf`(是否为叶子节点)等属性。例如,如果某个节点是叶子节点且没有子节点...

    Ext下使用的跨域treeloader

    Extjs 原始的treeloader无法通过跨域读取jsonp数据,非常恼人,查了网上一些资料后自己写了一个。能够实现跨域的jsonp读取加载节点。没有太多时间调试,可能不完美。

    extjs 的权限问题 要求控制的对象是 菜单,按钮,URL

    服务器端在处理请求时,已经根据用户的权限信息过滤掉了用户无权限访问的菜单项或按钮,因此返回给客户端的JSON数据已经包含了权限控制的逻辑。 菜单的数据结构通常用一个List集合表示,每个菜单项(JsonMenu)包含...

    extjs tree 节点 链接 新窗口

    `data.json`应该返回一个包含树节点信息的JSON数组。 标签“extjs tree 节点 链接 新窗口显示”进一步强调了在新窗口中打开链接的需求。你可以通过监听TreeNode的`click`事件来实现这个功能,如果节点有`href`属性...

Global site tag (gtag.js) - Google Analytics