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>

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">

<title>Ajax Efficient Tree</title>

</head>

<body>

<div>

<asp:Panel ID="Panel1" runat="server" Height="424px" Width="251px">

</asp:Panel>

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