使用 ExtJS TreePanel 从 ASP.NET AJAX Web Service 获取、绑定和显示树

1.Web Service

[WebService(Namespace  =   " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem( false )]
[System.Web.Script.Services.ScriptService]
public   class  TreeService : System.Web.Services.WebService
{
    [WebMethod]
     public  List < TreeNode >  GetTree()
    {
        List < TreeNode >  list  =   new  List < TreeNode > ();

         for  ( int  i  =   1 ; i  <=   4 ;  ++ i)
        {
            TreeNode parent  =   new  TreeNode();
            parent.id  =  i;
            parent.text  =   " 节点 "   +  i;
            parent.leaf  =   false ;
            parent.children  =   new  List < TreeNode > ();

             for  ( int  j  =   1 ; j  <=   2 ;  ++ j)
            {
                TreeNode child  =   new  TreeNode();
                child.id  =  i  *   10   +  j;
                child.text  =   " 节点 "   +  child.id;
                child.leaf  =   true ;
                parent.children.Add(child);
            }

            list.Add(parent);
        }

         return  list;
    }
}

请注意上面代码中的粗体部分。如果不指定此属性，ScriptManager 就不会为我们生成此 Web Service 的客户端代理，我们也就无法在客户端调用此 Web Service 中的方法。下列代码为树的节点类：

public   class  TreeNode
{
     public   int  id {  get ;  set ; }
     public   string  text {  get ;  set ; }
     public   bool  leaf {  get ;  set ; }
     public  List < TreeNode >  children {  get ;  set ; }
}

需要注意的是，节点类的各属性名称必须与上面代码中完全相同，且必须全部是小写字母（数据类型可以不一样，如：您可以将 id 属性改为 String 型），否则 ExtJS 的 TreePanel 将无法识别。

2.客户端

< form id = " form1 "  runat = " server " >

     < asp:ScriptManager ID = " ScriptManager1 "  runat = " server " >
         < Services >
             < asp:ServiceReference Path = " Services/TreeService.asmx "   / >
         < / Services>
     < / asp:ScriptManager>

     < div id = " tree " >< / div>

     < script type = " text/javascript " >

        Ext.onReady( function () {

             //  调用 Web Service
            TreeService.GetTree(onSuccessed);

             function  onSuccessed(result) {
                 //  result 为 Web Service 方法 GetTree 的 JSON 形式返回值
                 var  tree  =   new  Ext.tree.TreePanel({
                    el:  " tree " ,
                    animate:  true ,
                    title:  " ExtJS 树 " ,
                    collapsible:  true ,
                    enableDD:  true ,
                    enableDrag:  true ,
                    rootVisible:  true ,
                    autoScroll:  true ,
                    autoHeight:  true ,
                    width:  150 ,
                    lines:  true ,
                    root:  new  Ext.tree.AsyncTreeNode({
                        id:  " root " ,
                        text:  " 根节点 " ,
                        expanded:  true ,
                        leaf:  false ,
                        children: result     //  将从 Web Service 取到的所有节点绑定到根节点下。
                    })
                });

                tree.render();
            }

        });

     < / script>

< / form>

在客户端，我们首先调用 Web Service 的 GetTree 方法获取节点列表，然后创建 TreePanel 控件，并生成“根节点”。由于使用 Web Service 客户端代理与 Web Service 交互时发送和接收的数据均为 JSON 形式（可参考《ASP.NET AJAX 中在客户端用 WebRequest 调用 Web Service》一文），因此，我们从 GetTree 方法取得的数据必然也是 JSON 形式。于是我们就可以将返回的数据直接送给 TreePanel。在上面代码中，我们将返回的节点数据绑定到根节点的“children”属性上。

程序的运行截图如下：