将JSON Plugin返回值作为TreeLoader内容

chineseoa

浏览: 102961 次
性别:
来自: 上海

最近访客更多访客>>

HVT2017

whatlonelytear

oscaryao

davide201

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

技术小结

json EXT JavaScript CSS Struts

JSON Plugin插件返回值为 {nodes:[{"id":1,"leaf":false,"qtip":"a","text":"a"}]}格式，而TreeLoader要求是一数组格式，如何将该对象转化为数据，可通过重写Ext.tree.TreeLoader的processResponse方法实现，关键代码：

        TonyTreeLoader = function(config) {
            TonyTreeLoader.superclass.constructor.call(this, config);
        }
        Ext.extend(TonyTreeLoader, Ext.tree.TreeLoader, {
            processResponse : function(response, node, callback){
                var json = response.responseText;
                /*added to remove result wrapper from JSON*/
                if(json.indexOf('{"nodes":') == 0) json = json.substring(9, json.length-1);
                alert(json);
                try {
                    var o = eval("("+json+")");
                    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();
                    if(typeof callback == "function"){
                        callback(this, node);
                    }
                }catch(e){
                    this.handleFailure(response);
                }
            }
        });

下面给出一份完整示意代码：

1. HTML

该HTML中TreeLoader数据源自一Action返回内容

temp.html

------------------------------------------------------------------------------------------------------

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="plugins/extjs/ext-2.0/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="stylesheet/ext-patch.css" />
        <script type="text/javascript" src="plugins/extjs/ext-2.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="plugins/extjs/ext-2.0/ext-all.js"></script>
        <script type="text/javascript" src="javascript/common.js"></script>

        <script type="text/javascript">
        Ext.BLANK_IMAGE_URL = 'plugins/extjs/ext-2.0/resources/images/default/s.gif';
        Ext.QuickTips.init();
        TonyTreeLoader = function(config) {
            TonyTreeLoader.superclass.constructor.call(this, config);
        }
        Ext.extend(TonyTreeLoader, Ext.tree.TreeLoader, {
            processResponse : function(response, node, callback){
                var json = response.responseText;
                /*added to remove result wrapper from JSON*/
                if(json.indexOf('{"nodes":') == 0) json = json.substring(9, json.length-1);
                try {
                    var o = eval("("+json+")");
                    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();
                    if(typeof callback == "function"){
                        callback(this, node);
                    }
                }catch(e){
                    this.handleFailure(response);
                }
            }
        });

        Ext.onReady(function(){
            var tp=new Ext.tree.TreePanel({
                            renderTo:"hello",
                             root:new Ext.tree.AsyncTreeNode({
                                 id:"root",
                                   text:"日志分类",
                                   expanded:true
                            }),
                                   loader:new TonyTreeLoader({
                                    url:"topicCategory.action",
                                    listeners:{
                                        "beforeload":function(treeLoader,node) {
                                            treeLoader.baseParams.id=(node.id!="root"?node.id:"");
                                        }
                                    }
                                   })
             })
        });
        </script>
    </head>
    <body>
        <div id="hello"></div>
    </body>
</html>

2. Action

import bean.Node;
import java.util.*;

public class TopicCategoryAction {
    static Node v1 = new Node(1, false, "a", "a");
    static Node v11 = new Node(11, false, "b", "b");
    static Node v111 = new Node(111, true, "c", "c");
    static Node v2 = new Node(2, true, "d", "d");

    static Map<String, Node[]> data = new HashMap<String, Node[]>();

    static {
       data.put("", new Node[] { v1, v2 });
       data.put("1", new Node[] { v11 });
       data.put("11", new Node[] { v111 });
    }

    static public Node[] getData(String id) {
       Node[] temp = null;
       return (temp = data.get(id)) == null ? new Node[0] : temp;
    }

    private String id = "";
    private Node[] nodes;

    public String execute() {
       if (id == null || id.trim().length() < 1) {
           id = "";
       }
       nodes = getData(id);

       return "success";
    }

    public void setId(String id) {
       this.id = id;
    }

    public Node[] getNodes() {
       return nodes;
    }
}

该Action使用一Map模拟来自数据库的查询内容，简化操作。其间有涉及到一自定义类型 Node, 代码如下：

package bean;

public class Node {
    private int id;
    private boolean leaf;
    private String qtip;
    private String text;

    public Node(){}

    public Node(int id,boolean leaf, String qtip,String text) {
       this.id=id;
       this.leaf=leaf;
       this.qtip=qtip;
       this.text=text;
    }

    public String toString() {
       return "{id:"+id+"," +
               "leaf:"+leaf+"," +
               "qtip:\""+qtip+"\"," +
               "text:\""+text+"\"}";
    }

... 省去属性对应的setter/getter方法

}

3. struts.xml

Action写后不忘在struts.xml文件中配置，内容如下：

</struts>

最后 temp.html 运行效果如下：

查看图片附件

分享到：

Oracle中动态SQL的使用 | filter的详细配置

2008-10-27 22:02
浏览 5012
评论(2)
查看更多

2 楼 sunchaohui_koko 2009-09-14

为什么要这样？
var data = Ext.util.JSON.decode(response.responseText);
var o = data.items;
//items是Map里面的key.这样就可以了呀

1 楼 albb 2008-10-29

tony
什么时候briup讲授ext，回去听听，最近捣鼓了GWT-Ext,很麻烦

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论