AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载)

(一). 说明

        用Tree显示菜单及物品列表(从服务端获取数据)比较方便, 当前显示Tree 主要有两种方式:

        1. 在Tree初始化时将数据全部一次性从服务端获取, 获取完数据后页面展开或收缩时就不再需要获取数据,          

            这样, 获取完数据使用时效率比较高, 但当树节点很多时, 在每次初始化时会有较大的延迟.

        2. 初始化时只加载展开的节点, 当用户需要查看某个节点下的数据时, 再去取数据, 这样, 初始化时延迟会相

            对减少, 但每次单击节点时要获取数据, 页面每次都要刷新, 所以也会产生延迟.

        此事例用Ajax实现第二种方式, 每次只动态加载要展开的节点数据(闭合节点不展开时,则不获取其子节点的

        数据),  另外加载节点时页面不会刷新.

(二). 运行示例图

(三). AjaxPro.NET简介

         首先对AjaxPro.NET作一下介绍, AjaxPro.NET是一个优秀的Ajax框架, 在实际应用中只要添加其DLL

         引用并进行简单的配置, 即可以非常方便的在客户端直接调用服务端方法, 来获取Tree节点.

(四).使用AjaxPro.NET预配置

       1. 添加 AjaxPro.dll 文件的引用(示例代码中已经包含,直接COPY过来使用即可).

       2. 在Web.config文件中添加以下配置,           

1  < httpHandlers >
2               < add verb = " POST,GET "  path = " ajaxpro/*.ashx "  type = " AjaxPro.AjaxHandlerFactory, AjaxPro "   />             
3 </ httpHandlers >

 

 

       3. 在要使用AjaxPro.NET框架的页面 *.aspx.cs 的 Page_Load事件中加如下代码:

 

AjaxPro.Utility.RegisterTypeForAjax( typeof (_Default));

 

       4. 经过以上三步骤后, 只要在后台服务端的方法前面增加属性[AjaxMethod]后:

 

 1   [AjaxMethod()]     //  or [AjaxPro.AjaxMethod] 
 2  public  ArrayList GetSearchItems(  string  strQuery )
 3  {
 4        // 生成数据源
 5       ArrayList items  =   new  ArrayList();
 6       items.Add( " King " );
 7       items.Add( " Rose " );
 8        return  items ;
 9  } 
10 

 

        就可以在客户端直接使用服务端方法, 非常方便, 客户端调用后台代码如下:

var returnValue  =  后台代码类名.GetSearchItems(参数);

(五). 代码

  1. 页面 Tree.aspx 代码:

  1  <% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Tree.aspx.cs "  Inherits = " _Default "   %>
  2 
  3  <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
  4 
  5  < html xmlns = " http://www.w3.org/1999/xhtml "   >
  6  < head runat = " server " >
  7       < title > Ajax Efficient Tree </ title >
  8       < link type = " text/css "  href = " css/tree.css "  rel = " stylesheet " >
  9  </ head >
 10  < body >
 11       < form id = " form1 "  runat = " server " >
 12       < div >
 13           < asp:Panel ID = " Panel1 "  runat = " server "  Height = " 424px "  Width = " 251px " >
 14               < div id = " CategoryTree "   class = " TreeMenu " ></ div >
 15           </ asp:Panel >
 16           < script language = " jscript " >
 17              var tree  =  document.getElementById( " CategoryTree " );
 18              var root  =  document.createElement( " li " );
 19              root.id  =   " li_0 " ;
 20              tree.appendChild( root );
 21              ExpandSubCategory(  0  );
 22              function ExpandSubCategory( categoryID )
 23              {
 24                  var liFather  =  document.getElementById(  " li_ "   +  categoryID );
 25                   if ( liFather.getElementsByTagName( " li " ).length  >   0 )
 26                  {
 27                      ChangeStatus( categoryID );
 28                       return ;
 29                  }
 30                  liFather.className  =   " Opened " ;
 31                  SwitchNode( categoryID,  true  );
 32                  
 33                   // 仅获取当前节点的子Nodes
 34                  _Default.GetSubCategory( categoryID, GetSubCategory_callback );
 35              }            
 36              function SwitchNode( CategoryID, show )
 37              {
 38                  var li_father  =  document.getElementById( " li_ "   +  CategoryID);
 39                   if ( show )
 40                  {
 41                      var ul  =  document.createElement( " ul " );
 42                      ul.id  =   " ul_note_ "   +  CategoryID;
 43                      
 44                      var note  =  document.createElement( " li " );
 45                      note.className  =   " Child " ;              
 46                      
 47                      var img  =  document.createElement( " img " );
 48                      img.className  =   " s " ;
 49                      img.src  =   " css/s.gif " ;                    
 50                      
 51                      var a  =  document.createElement( " a " );
 52                      a.href  =   " javascript:void(0); " ;
 53                      a.innerHTML  =   " Please waiting " ;
 54                      
 55                      note.appendChild(img);
 56                      note.appendChild(a);
 57                      ul.appendChild(note);
 58                      li_father.appendChild(ul);                                        
 59                  }   
 60                   else
 61                  {
 62                      var ul  =  document.getElementById( " ul_note_ "   +  CategoryID );
 63                       if ( ul )
 64                      {
 65                          li_father.removeChild(ul);
 66                      }
 67                  }             
 68              }
 69              function GetSubCategory_callback( response )
 70              {
 71                 var dt  =  response.value.Tables[ 0 ];
 72                  if ( dt.Rows.length  >   0  )
 73                 {
 74                      var iCategoryID  =  dt.Rows[ 0 ].FatherID;               
 75                 }                                
 76                 var li_father  =  document.getElementById( " li_ "   +  iCategoryID );
 77                 var ul  =  document.createElement( " ul " );
 78                  for ( var i  =   0 ; i  <  dt.Rows.length; i ++  )
 79                 {
 80                       if ( dt.Rows[i].IsChild  ==   1  )
 81                      {
 82                          var li  =  document.createElement( " li " );
 83                          li.className  =   " Child " ;
 84                          li.id  =   " li_ "   +  dt.Rows[i].CategoryID;
 85                          var img  =  document.createElement( " img " );
 86                          img.id  =  dt.Rows[i].CategoryID;
 87                          img.className  =   " s " ;
 88                          img.src  =   " css/s.gif " ;
 89                          var a  =  document.createElement( " a " );
 90                          a.href  =   " javascript:OpenDocument(' "   +  dt.Rows[i].CategoryID  +   " '); " ;
 91                          a.innerHTML  =  dt.Rows[i].CategoryName;                                          
 92                      }
 93                       else
 94                      {
 95                          var li  =  document.createElement( " li " );
 96                          li.className  =   " Closed " ;
 97                          li.id  =   " li_ "   +  dt.Rows[i].CategoryID;
 98                          var img  =  document.createElement( " img " );
 99                          img.id  =  dt.Rows[i].CategoryID;
100                          img.className  =   " s " ;
101                          img.src  =   " css/s.gif " ;
102                          img.onclick  =  function(){ ExpandSubCategory(  this .id ); };
103                          img.alt  =   " Expand/collapse " ;
104                          var a  =  document.createElement( " a " );
105                          a.href  =   " javascript:ExpandSubCategory(' "   +  dt.Rows[i].CategoryID  +   " '); " ;
106                          a.innerHTML  =  dt.Rows[i].CategoryName;                                         
107                      }
108                      li.appendChild(img);
109                      li.appendChild(a);
110                      ul.appendChild(li);
111                 }
112                 li_father.appendChild(ul);
113                 SwitchNode( iCategoryID,  false  );
114              }          
115              
116               // 单击叶节点时, 异步从服务端获取单个节点的数据.
117              function OpenDocument( CategoryID )
118              {                
119                  _Default.GetNameByCategoryID( CategoryID, GetNameByCategoryID_callback );
120              }
121              
122              function GetNameByCategoryID_callback( response )
123              {
124                  alert( response.value );
125              }
126              
127              function ChangeStatus( CategoryID )
128              {
129                  var li_father  =  document.getElementById( " li_ "   +  CategoryID );
130                   if ( li_father.className  ==   " Closed "  )
131                  {
132                      li_father.className  =   " Opened " ;
133                  }
134                   else
135                  {
136                      li_father.className  =   " Closed " ;
137                  }
138             }              
139           </ script >           
140       </ div >
141       </ form >     
142  </ body >       
143  </ html >

 2. 页面后台文件 Tree.aspx.cs 代码:

  1  using  System;
  2  using  System.Data;
  3  using  System.Configuration;
  4  using  System.Web;
  5  using  System.Web.Security;
  6  using  System.Web.UI;
  7  using  System.Web.UI.WebControls;
  8  using  System.Web.UI.WebControls.WebParts;
  9  using  System.Web.UI.HtmlControls;
 10 
 11  public  partial  class  _Default : System.Web.UI.Page 
 12  {
 13      // 此对象用于存放所有的节点数
 14      public   static  DataSet dsAllNodes  =   new  DataSet();
 15 
 16      protected   void  Page_Load( object  sender, EventArgs e)
 17     {
 18         AjaxPro.Utility.RegisterTypeForAjax( typeof (_Default));       
 19         CreateNodes();
 20     }
 21 
 22      private  DataTable CreateStructure()
 23     {
 24        DataTable dt  =   new  DataTable();
 25        dt.Columns.Add( new  DataColumn( " CategoryID " ,  typeof ( int )));
 26        dt.Columns.Add( new  DataColumn( " CategoryName " ,  typeof ( string )));
 27        dt.Columns.Add( new  DataColumn( " FatherID " ,  typeof ( string )));
 28        dt.Columns.Add( new  DataColumn( " IsChild " ,  typeof ( bool )));
 29         return  dt;
 30     }
 31      public   void  CreateNodes()
 32     {
 33        DataTable dt  =   this .CreateStructure();
 34 
 35        DataRow drNew  =  dt.NewRow();
 36        drNew[ " CategoryID " ]  =   1 ;
 37        drNew[ " CategoryName " ]  =   " 物品类别 " ;
 38        drNew[ " FatherID " ]  =   0 ;
 39        dt.Rows.Add( drNew );
 40 
 41        drNew  =  dt.NewRow();
 42        drNew[ " CategoryID " ]  =   2 ;
 43        drNew[ " CategoryName " ]  =   " 水果 " ;
 44        drNew[ " FatherID " ]  =   1 ;
 45        dt.Rows.Add( drNew );
 46 
 47        drNew  =  dt.NewRow();
 48        drNew[ " CategoryID " ]  =   3 ;
 49        drNew[ " CategoryName " ]  =   " 工具 " ;
 50        drNew[ " FatherID " ]  =   1 ;
 51        dt.Rows.Add( drNew );
 52 
 53        drNew  =  dt.NewRow();
 54        drNew[ " CategoryID " ]  =   4 ;
 55        drNew[ " CategoryName " ]  =   " 萍果 " ;
 56        drNew[ " FatherID " ]  =   2 ;
 57        dt.Rows.Add( drNew );
 58 
 59        drNew  =  dt.NewRow();
 60        drNew[ " CategoryID " ]  =   5 ;
 61        drNew[ " CategoryName " ]  =   " 香蕉 " ;
 62        drNew[ " FatherID " ]  =   2 ;
 63        dt.Rows.Add( drNew );
 64 
 65        drNew  =  dt.NewRow();
 66        drNew[ " CategoryID " ]  =   6 ;
 67        drNew[ " CategoryName " ]  =   " 桔子 " ;
 68        drNew[ " FatherID " ]  =   2 ;
 69        dt.Rows.Add( drNew );
 70 
 71        drNew  =  dt.NewRow();
 72        drNew[ " CategoryID " ]  =   7 ;
 73        drNew[ " CategoryName " ]  =   " 萝卜 " ;
 74        drNew[ " FatherID " ]  =   2 ;
 75        dt.Rows.Add( drNew );
 76 
 77        drNew  =  dt.NewRow();
 78        drNew[ " CategoryID " ]  =   8 ;
 79        drNew[ " CategoryName " ]  =   " 钢笔 " ;
 80        drNew[ " FatherID " ]  =   3 ;
 81        dt.Rows.Add( drNew );
 82 
 83        drNew  =  dt.NewRow();
 84        drNew[ " CategoryID " ]  =   9 ;
 85        drNew[ " CategoryName " ]  =   " 铅笔 " ;
 86        drNew[ " FatherID " ]  =   3 ;
 87        dt.Rows.Add( drNew );
 88 
 89        drNew  =  dt.NewRow();
 90        drNew[ " CategoryID " ]  =   10 ;
 91        drNew[ " CategoryName " ]  =   " 尺子 " ;
 92        drNew[ " FatherID " ]  =   3 ;
 93        dt.Rows.Add( drNew );
 94        
 95        drNew  =  dt.NewRow();
 96        drNew[ " CategoryID " ]  =   11 ;
 97        drNew[ " CategoryName " ]  =   " 橡皮 " ;
 98        drNew[ " FatherID " ]  =   3 ;
 99        dt.Rows.Add( drNew );
100 
101        dsAllNodes.Tables.Add(dt);
102     }
103 
104     [AjaxPro.AjaxMethod]
105      public  DataSet GetSubCategory( int  CategoryID)
106     {
107        DataSet ds  =   new  DataSet();
108        DataTable dt  =   this .CreateStructure();
109        DataRow[] drSelect  =  dsAllNodes.Tables[ 0 ].Select( " FatherID= "   +  CategoryID.ToString());
110         foreach  (DataRow drTemp  in  drSelect)
111        {
112           DataRow dr  =  dt.NewRow();
113           dr[ " CategoryID " ]  =  drTemp[ " CategoryID " ];
114           dr[ " CategoryName " ]  =  drTemp[ " CategoryName " ];
115           dr[ " FatherID " ]  =  drTemp[ " FatherID " ];
116           dr[ " IsChild " ]  =  IsLeaf(  int .Parse( drTemp[ " CategoryID " ].ToString() ) );
117           dt.Rows.Add(dr);
118        }
119        ds.Tables.Add(dt);
120         return  ds;
121     }
122 
123     [AjaxPro.AjaxMethod]
124      public   bool  IsLeaf( int  Category)
125     {
126          foreach (DataRow dr  in  dsAllNodes.Tables[ 0 ].Rows)
127         {
128             if  (dr[ " FatherID " ]  !=   null   &&   int .Parse(dr[ " FatherID " ].ToString())  ==  Category)
129            {
130                return   false ;  
131            }
132         }
133          return   true ;
134     }
135 
136     [AjaxPro.AjaxMethod]
137      public   string  GetNameByCategoryID( string  CategoryID )
138     {
139         foreach ( DataRow dr  in  dsAllNodes.Tables[ 0 ].Rows )
140        {
141            if ( dr[ " CategoryID " ].ToString()  ==  CategoryID.ToString() )
142           {
143               return  dr[ " CategoryName " ].ToString();
144           }
145        }
146         return   "" ;
147     }
148  }

(六). 示例代码下载:

        http://www.cnitblog.com/Files/ChengKing/AjaxPro.net_EfficientTree.rar