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文件中添加以下配置.

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

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

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

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

   [AjaxMethod()]     //  or [AjaxPro.AjaxMethod] 
   public  ArrayList GetSearchItems(  string  strQuery )
   {
       //生成数据源
       ArrayList items = new ArrayList();
       items.Add("King");
       items.Add("Rose");
       return items ;
  }  

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

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

(五). 代码

         1. 页面 Tree.aspx 代码:

<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Tree.aspx.cs "  Inherits = " _Default "   %>
 
  <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
 
  < html xmlns = " http://www.w3.org/1999/xhtml "   >
  < head runat = " server " >
      < title > Ajax Efficient Tree </ title >
      < link type = " text/css "  href = " css/tree.css "  rel = " stylesheet " >
  </ head >
  < body >
      < form id = " form1 "  runat = " server " >
      < div >
          < asp:Panel ID = " Panel1 "  runat = " server "  Height = " 424px "  Width = " 251px " >
              < div id = " CategoryTree "   class = " TreeMenu " ></ div >
          </ asp:Panel >
          < script language = " jscript " >
             var tree  =  document.getElementById( " CategoryTree " );
             var root  =  document.createElement( " li " );
             root.id  =   " li_0 " ;
             tree.appendChild( root );
             ExpandSubCategory(  0  );
             function ExpandSubCategory( categoryID )
              {
                 var liFather = document.getElementById( "li_" + categoryID );
                 if( liFather.getElementsByTagName("li").length > 0)
                 {
                     ChangeStatus( categoryID );
                     return;
                 }
                 liFather.className = "Opened";
                 SwitchNode( categoryID, true );
                 
                 //仅获取当前节点的子Nodes
                 _Default.GetSubCategory( categoryID, GetSubCategory_callback );
             }             
             function SwitchNode( CategoryID, show )
              {
                 var li_father = document.getElementById("li_" + CategoryID);
                 if( show )
                 {
                     var ul = document.createElement("ul");
                     ul.id = "ul_note_" + CategoryID;
                     
                     var note = document.createElement("li");
                     note.className = "Child";              
                     
                     var img = document.createElement("img");
                     img.className = "s";
                     img.src = "css/s.gif";                    
                     
                     var a = document.createElement("a");
                     a.href = "javascript:void(0);";
                     a.innerHTML = "Please waiting";
                     
                     note.appendChild(img);
                     note.appendChild(a);
                     ul.appendChild(note);
                     li_father.appendChild(ul);                                        
                 }   
                 else
                 {
                     var ul = document.getElementById("ul_note_" + CategoryID );
                     if( ul )
                     {
                         li_father.removeChild(ul);
                     }
                 }             
             }
             function GetSubCategory_callback( response )
              {
                var dt = response.value.Tables[0];
                if( dt.Rows.length > 0 )
                {
                     var iCategoryID = dt.Rows[0].FatherID;               
                }                                
                var li_father = document.getElementById("li_" + iCategoryID );
                var ul = document.createElement("ul");
                for( var i = 0; i < dt.Rows.length; i++ )
                {
                     if( dt.Rows[i].IsChild == 1 )
                     {
                         var li = document.createElement("li");
                         li.className = "Child";
                         li.id = "li_" + dt.Rows[i].CategoryID;
                         var img = document.createElement("img");
                         img.id = dt.Rows[i].CategoryID;
                         img.className = "s";
                         img.src = "css/s.gif";
                         var a = document.createElement("a");
                         a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');";
                         a.innerHTML = dt.Rows[i].CategoryName;                                          
                     }
                     else
                     {
                         var li = document.createElement("li");
                         li.className = "Closed";
                         li.id = "li_" + dt.Rows[i].CategoryID;
                         var img = document.createElement("img");
                         img.id = dt.Rows[i].CategoryID;
                         img.className = "s";
                         img.src = "css/s.gif";
                         img.onclick = function(){ ExpandSubCategory( this.id ); };
                         img.alt = "Expand/collapse";
                         var a = document.createElement("a");
                         a.href = "javascript:ExpandSubCategory('" + dt.Rows[i].CategoryID + "');";
                         a.innerHTML = dt.Rows[i].CategoryName;                                         
                     }
                     li.appendChild(img);
                     li.appendChild(a);
                     ul.appendChild(li);
                }
                li_father.appendChild(ul);
                SwitchNode( iCategoryID, false );
             }           
             
              // 单击叶节点时, 异步从服务端获取单个节点的数据.
             function OpenDocument( CategoryID )
              {                
                 _Default.GetNameByCategoryID( CategoryID, GetNameByCategoryID_callback );
             }
             
             function GetNameByCategoryID_callback( response )
              {
                 alert( response.value );
             }
             
             function ChangeStatus( CategoryID )
              {
                 var li_father = document.getElementById("li_" + CategoryID );
                 if( li_father.className == "Closed" )
                 {
                     li_father.className = "Opened";
                 }
                 else
                 {
                     li_father.className = "Closed";
                 }
            }               
          </ script >           
      </ div >
      </ form >     
  </ body >       
  </ html >

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

using  System;
  using  System.Data;
  using  System.Configuration;
  using  System.Web;
  using  System.Web.Security;
  using  System.Web.UI;
  using  System.Web.UI.WebControls;
  using  System.Web.UI.WebControls.WebParts;
  using  System.Web.UI.HtmlControls;
 
  public  partial  class  _Default : System.Web.UI.Page 
  {
    //此对象用于存放所有的节点数
    public static DataSet dsAllNodes = new DataSet();
 
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));       
        CreateNodes();
    }
 
    private DataTable CreateStructure()
    {
       DataTable dt = new DataTable();
       dt.Columns.Add(new DataColumn("CategoryID", typeof(int)));
       dt.Columns.Add(new DataColumn("CategoryName", typeof(string)));
       dt.Columns.Add(new DataColumn("FatherID", typeof(string)));
       dt.Columns.Add(new DataColumn("IsChild", typeof(bool)));
       return dt;
    }
    public void CreateNodes()
    {
       DataTable dt = this.CreateStructure();
 
       DataRow drNew = dt.NewRow();
       drNew["CategoryID"] = 1;
       drNew["CategoryName"] = "物品类别";
       drNew["FatherID"] = 0;
       dt.Rows.Add( drNew );
 
       drNew = dt.NewRow();
       drNew["CategoryID"] = 2;
       drNew["CategoryName"] = "水果";
       drNew["FatherID"] = 1;
       dt.Rows.Add( drNew );
 
       drNew = dt.NewRow();
       drNew["CategoryID"] = 3;
       drNew["CategoryName"] = "工具";
       drNew["FatherID"] = 1;
       dt.Rows.Add( drNew );
 
       drNew = dt.NewRow();
       drNew["CategoryID"] = 4;
       drNew["CategoryName"] = "萍果";
       drNew["FatherID"] = 2;
       dt.Rows.Add( drNew );
 
       drNew = dt.NewRow();
       drNew["CategoryID"] = 5;
       drNew["CategoryName"] = "香蕉";
       drNew["FatherID"] = 2;
       dt.Rows.Add( drNew );
 
       drNew = dt.NewRow();
       drNew["CategoryID"] = 6;
       drNew["CategoryName"] = "桔子";
       drNew["FatherID"] = 2;
       dt.Rows.Add( drNew );
 
       drNew = dt.NewRow();
       drNew["CategoryID"] = 7;
       drNew["CategoryName"] = "萝卜";
       drNew["FatherID"] = 2;
       dt.Rows.Add( drNew );
 
       drNew = dt.NewRow();
       drNew["CategoryID"] = 8;
       drNew["CategoryName"] = "钢笔";
       drNew["FatherID"] = 3;
       dt.Rows.Add( drNew );
 
       drNew = dt.NewRow();
       drNew["CategoryID"] = 9;
       drNew["CategoryName"] = "铅笔";
       drNew["FatherID"] = 3;
       dt.Rows.Add( drNew );
 
       drNew = dt.NewRow();
       drNew["CategoryID"] = 10;
       drNew["CategoryName"] = "尺子";
       drNew["FatherID"] = 3;
       dt.Rows.Add( drNew );
       
       drNew = dt.NewRow();
       drNew["CategoryID"] = 11;
       drNew["CategoryName"] = "橡皮";
       drNew["FatherID"] = 3;
       dt.Rows.Add( drNew );
 
       dsAllNodes.Tables.Add(dt);
    }
 
    [AjaxPro.AjaxMethod]
    public DataSet GetSubCategory(int CategoryID)
    {
       DataSet ds = new DataSet();
       DataTable dt = this.CreateStructure();
       DataRow[] drSelect = dsAllNodes.Tables[0].Select("FatherID=" + CategoryID.ToString());
       foreach (DataRow drTemp in drSelect)
       {
          DataRow dr = dt.NewRow();
          dr["CategoryID"] = drTemp["CategoryID"];
          dr["CategoryName"] = drTemp["CategoryName"];
          dr["FatherID"] = drTemp["FatherID"];
          dr["IsChild"] = IsLeaf( int.Parse( drTemp["CategoryID"].ToString() ) );
          dt.Rows.Add(dr);
       }
       ds.Tables.Add(dt);
       return ds;
    }
 
    [AjaxPro.AjaxMethod]
    public bool IsLeaf(int Category)
    {
        foreach(DataRow dr in dsAllNodes.Tables[0].Rows)
        {
           if (dr["FatherID"] != null && int.Parse(dr["FatherID"].ToString()) == Category)
           {
              return false;  
           }
        }
        return true;
    }
 
    [AjaxPro.AjaxMethod]
    public string GetNameByCategoryID(string CategoryID )
    {
       foreach( DataRow dr in dsAllNodes.Tables[0].Rows )
       {
          if( dr["CategoryID"].ToString() == CategoryID.ToString() )
          {
             return dr["CategoryName"].ToString();
          }
       }
       return "";
    }
 }

(六). 示例代码下载:
        http://www.cnitblog.com/Files/ChengKing/AjaxPro.net_EfficientTree.rar