使用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。

转载于:https://www.cnblogs.com/willsun/archive/2008/01/21/1047157.html