使用Ext.tree.TreePanel调用webservice动态构建树

项目中有个需求需要使用树，并且树的节点比较多，需要动态加载，看了Ext.tree.TreePanel中的例子，TreeLoader只能接受Json数据。webservice传输的是xml文档，不能直接调用。在网上找了2天，终于解决这个问题。
default.aspx页面

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax._Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6     <title>Ajax</title>
7     <link href="ext-2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
8
9     <script src="ext-2.0/ext-base.js" type="text/javascript"></script>
10
11     <script src="ext-2.0/ext-all.js" type="text/javascript"></script>
12
13     <script src="ext-2.0/ext-lang-zh_CN.js" type="text/javascript"></script>
14
15     <script src="js/XmlTreeLoader.js" type="text/javascript"></script>
16
17 </head>
18 <body>
19     <form id="form1" runat="server">
20     <div id="tree" style="width: 400px; height: 500px;">
21     </div>
22     </form>
23
24     <script language="javascript" type="text/javascript">
25         Ext.onReady(function(){
26             Ext.BLANK_IMAGE_URL="ext-2.0/resources/images/default/s.gif";
27             var tree = new Ext.tree.TreePanel({
28                 el:'tree',
29                 animate:true,
30                 autoScroll:true,
31                 containerScroll: true,
32                 loader: new Ext.ux.XmlTreeLoader({
33                     dataUrl:"http://localhost/WebService/WebService.asmx/GetCompany",
34                     requestMethod:"post"
35                 })
36             });
37
38             // set the root node
39             var root = new Ext.tree.AsyncTreeNode({
40                 text: '全部',
41                 draggable:false,
42                 id:'0'
43             });
44             tree.setRootNode(root);
45
46             // render the tree
47             tree.render();
48             root.expand();
49         });
50     </script>
51
52 </body>
53 </html>
54

自定义的xmlTreeLoad.js

Ext.namespace('Ext.ux');

Ext.ux.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
    processResponse: function(response, node, callback){
        var doc = response.responseXML.documentElement;
        try
        {
        node.beginUpdate();
        this.parseXml(doc,node);
        node.endUpdate();
        if (typeof callback == "function") {
            callback(this, node);
        }
        }
        catch(e)
        {
            //Ext.ux.XmlTreeLoader.superclass.handleFailure.call(response);
        }
    },
    parseXml: function(doc,node){

        var nodes=Ext.DomQuery.select("/TreeNode",doc);

        Ext.each(nodes,function(item){
            var text=Ext.DomQuery.selectValue("Text",item,"");
            var value=Ext.DomQuery.selectValue("Value",item,"");
            var leaf=Ext.DomQuery.selectValue("Leaf",item,true);
            if (text&&value)
            {
                var child=null;
                if (leaf==true)
                {
                    child=new Ext.tree.TreeNode({
                        text:text,
                        id:value,
                        leaf:leaf
                    });
                }
                else
                {
                    child=new Ext.tree.AsyncTreeNode({
                        text:text,
                        id:value,
                        leaf:leaf
                    });
                }

                if (child)
                {
                    node.appendChild(child);
                }
            }
        });
    }
});

webservice.cs

    public class WebService : System.Web.Services.WebService
    {
        [WebMethod]
        public List<Json.TreeNode> GetCompany(string node)
        {
            int id = 0;
            try
            {
                id = Convert.ToInt32(node);
            }
            catch
            {
            }
            TreeNodeCollection nodes = new TreeNodeCollection();
            ArticleManager.CreateCompanyTree(nodes);
            if (id != 0)
            {
                nodes = ArticleManager.GetTreeNode(nodes, id.ToString());
            }
            List<Json.TreeNode> result = new List<Json.TreeNode>();
            foreach (TreeNode item in nodes)
            {
                Json.TreeNode tn = new Json.TreeNode();
                tn.Value = item.Value;
                tn.Text = item.Text;
                tn.Leaf=item.ChildNodes.Count<=0?true:false;
                result.Add(tn);
            }
            return result;
        }
    }

Json.TreeNode.cs

namespace WebService.Json
{
    public class TreeNode
    {
        public string Value
        {
            get;
            set;
        }
        public string Text
        {
            get;
            set;
        }
        public bool Leaf
        {
            get;
            set;
        }
    }
}

动态加载的关键在于xmlTreeload中Node的建立，如果需要向后台请求数据则leaf=false,并且节点类型为Ext.tree.AsyncTreeNode。反之则为Ext.tree.TreeNode。

posted @ 2008-01-21 13:50 willsun 阅读(7799) 评论(11) 收藏举报

刷新页面返回顶部

willsun

使用Ext.tree.TreePanel调用webservice动态构建树

公告