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

本文主要是介绍AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

这篇关于AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！