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

2006年08月27日 20:41:00

(一). 说明

用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

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1128545