AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载) [转]
来源：互联网 发布：好玩的手机游戏知乎 编辑：程序博客网 时间：2024/05/02 10:32
一). 说明
用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
用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
- AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载) [转]
- AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架生成高效率的Tree
- AjaxPro.NET框架实现服务端即时数据验证(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架实现服务端即时数据验证(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架实现服务端即时数据验证(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架实现服务端即时数据验证(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET框架完成服务端即时数据验证(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET实现TextBox智能获取服务端数据功能(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET实现TextBox智能获取服务端数据功能(Asp.net 2.0)(示例代码下载)
- AjaxPro.NET实现TextBox智能获取服务端数据功能(Asp.net 2.0)(示例代码下载)
- 《青蛇》主题曲《流光飞舞》
- 分页方案
- SQL 判断是否自增列
- 遍历执行dll中的某个方法
- JMS 向 actioveMQ 发送消息
- AjaxPro.NET框架生成高效率的Tree(Asp.net 2.0)(示例代码下载) [转]
- 循环遍历父容器，更新父容器中相同控件的值
- AgoBot 僵尸网络研究笔记（十六）
- 解决IE7的window.close()弹出确认提示框
- 常用的正则表达式
- End-User Form Design
- 2008 反思中国灾害防范意识
- TCP/IP协议中的三个参数 (IP地址、子网掩码和网关地址)
- Java-多线程编程
