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

技术2022-05-11 57

(一). 说明

用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

专利

最新回复(0)