(一). 说明
用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