昨天花了半天的时间搞的， 其中碰到一个很郁闷的错误, 就是我写完运行, 程序不能无刷新调用服务器端方法. 调了1个多小时才发现原来忘记加<form runat="server">. 特郁闷啊....
需要先安装ajax.pro的补丁,不然会报"缺少对象"的错误,ajax.pro google下就有了.
下载地址: .NET+Ajax.Pro实现无刷新动态树
下载地址: CSS实现静态树
.NET+Ajax.Pro实现无刷新动态树代码:
客户端代码:DynamicTree.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicTree.aspx.cs" Inherits="DynamicTree" %>
<!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 id="Head1" runat="server">
<title>无标题页</title>
<link type="text/css" href="Tree.css" rel="stylesheet" />
<script type="text/javascript">
var li_ClickingNode; // 用户点击的节点
var CategoryID = 0;
// 展开和折叠父节点
function ExpandCategory( objImg )
{
li_ClickingNode = objImg.parentNode; // 获得用户点击的节点
// 获得点击节点的ID
CategoryID = li_ClickingNode.id.substr( li_ClickingNode.id.indexOf( "_" ) + 1 );
if ( "Closed" == li_ClickingNode.className )
{
li_ClickingNode.className = "Opened";
switchNode( true ); // 显示 "请稍候，正在加载......"
// 调用服务器方法，获得该节点的子节点
DynamicTree.GetSubCategoryS( CategoryID, GetSubCategory_CallBack );
}
else if ( "Opened" == li_ClickingNode.className )
{
li_ClickingNode.className = "Closed";
// 当折叠父节点时删除显示的子节点
li_ClickingNode.removeChild( document.getElementById("ul_" + CategoryID) );
}
}
// 显示和隐藏 "请稍候，正在加载......"
function switchNode( show )
{
if ( show ) // 显示 "请稍候，正在加载......"
{
// 用户添加从数据库获得的子节点
var ul = document.createElement( "UL" );
ul.id = "ul_" + CategoryID;
var li = document.createElement( "LI" );
li.className = "Child"; // 表示该节点为父节点
// 创建节点前的图片
var img = document.createElement( "IMG" );
img.src = "";
// 创建超联接，功能和img一样
var a = document.createElement( "A" );
a.href = "javascript:void(0)";
a.innerHTML = "请稍候，正在加载......"; // 显示节点值
/* 添加子节点 */
li.appendChild( img );
li.appendChild( a );
ul.appendChild( li ); // 将子节点添加到ul中
li_ClickingNode.appendChild( ul );
}
else // 隐藏 "请稍候，正在加载......"
{
var ul = document.getElementById( "ul_" + CategoryID );
if ( ul )
{
li_ClickingNode.removeChild( ul );
}
}
}
function GetSubCategory_CallBack( response )
{
var ds = response.value;
if ( ds != null && typeof(ds) == "object" && ds.Tables[0] != null )
{
// 用户添加从数据库获得的子节点
var ul = document.createElement( "UL" );
ul.id = "ul_" + CategoryID;
// 遍历用户点击的父节点的子节点
for ( var i = 0; i < ds.Tables[0].Rows.length; i++ )
{
if ( 1 == ds.Tables[0].Rows[i].hasChild ) // 表示该子节点是有子节点
{
// 创建节点
var li = document.createElement( "LI" );
li.id = "li_" + ds.Tables[0].Rows[i].CategoryID;
li.className = "Closed"; // 表示该节点为父节点
// 创建节点前的图片
var img = document.createElement( "IMG" );
img.src = "";
img.alt = ds.Tables[0].Rows[i].CategoryName;
// 点击图片调用展开该父节点的函数
img.onclick = function() { ExpandCategory(this); };
// 创建超联接，功能和img一样
var a = document.createElement( "A" );
a.href = "javascript:ExpandCategory(this)";
a.innerHTML = ds.Tables[0].Rows[i].CategoryName; // 显示节点值
/* 添加子节点 */
li.appendChild( img );
li.appendChild( a );
ul.appendChild( li ); // 将子节点添加到ul中
}
else // 表示该节点无子节点
{
// 创建节点
var li = document.createElement( "LI" );
li.id = "li_" + ds.Tables[0].Rows[i].CategoryID;
li.className = "Child"; // 表示该节点为子节点
// 创建节点前的图片
var img = document.createElement( "IMG" );
img.src = "";
img.alt = ds.Tables[0].Rows[i].CategoryName;
// 创建超联接
var a = document.createElement( "A" );
a.href = "javascript:ShowMsg(this)";
a.innerHTML = ds.Tables[0].Rows[i].CategoryName; // 显示节点值
/* 添加子节点 */
li.appendChild( img );
li.appendChild( a );
ul.appendChild( li ); // 将子节点添加到ul中
}
} // End Of for ( var i = 0; i < ds.Tables[0].Rows.length; i++ )
switchNode( false ); // 隐藏 "请稍候，正在加载......"
// 将从数据库中获得的子节点添加到用户点击的父节点中
li_ClickingNode.appendChild( ul );
}// End Of if ( ds != null && typeof(ds) == "object" && ds.Tables[0] != null )
}
/* 添加根节点 */
function showRootNode()
{
li_ClickingNode = document.getElementById("Category");
DynamicTree.GetSubCategoryS( 0, GetSubCategory_CallBack );
}
function ShowMsg( objA )
{
alert( "子节点" );
}
</script>
</head>
<body onload="showRootNode()">
<form id="form1" runat="server">
<div id="Category">
<h4>DynamicTreeDemo</h4>
<ul id="CategoryTree">
<%--<li id="li_1" class="Closed"> <img src="" alt="我的文档" onclick="ExpandCategory( this )" /> <a href="javascript:void(0)"> 我的文档 </a> </li>--%>
</ul>
</div>
</form>
</body>
</html>
服务器端代码:DynamicTree.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;
using System.Data.Sql;
using System.Data.SqlClient;
public partial class DynamicTree : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(DynamicTree));
}
[AjaxPro.AjaxMethod]
public string test(int nGategoryID)
{
return "abc" + nGategoryID.ToString();
}
[AjaxPro.AjaxMethod]
public DataSet GetSubCategoryS(int nGategoryID)
{
SqlConnection sqlCon = new SqlConnection("Server=127.0.0.1; uid=sa; pwd=sa; database=pubs");
SqlCommand sqlCmd = new SqlCommand();
SqlDataAdapter sqlDA = new SqlDataAdapter();
DataSet objDS = new DataSet();
string strSQL = "";
strSQL = "Select CategoryID, CategoryName, FatherID, dbo.isLeaf(CategoryID) As hasChild ";
strSQL += "From Tree Where FatherID = " + nGategoryID;
sqlCmd.CommandText = strSQL;
sqlCmd.Connection = sqlCon;
sqlDA.SelectCommand = sqlCmd;
try
{
sqlCon.Open();
sqlDA.Fill(objDS, "Tree");
return objDS;
}
catch (Exception ex)
{
Response.Write(ex.Message);
return objDS;
}
finally
{
sqlCon.Close();
}
}
}
CSS代码:Tree.css
a{ text-decoration:none }
a,a:visited{ color:#000000; background:inherit; }
body{ margin:0; padding:20px; font:12px tahoma, 宋体, sans-serif; }
h4{ margin:0; padding:0; font-size:18px; text-align:center; }
img{ cursor:hand; }
#Category
{
float:left; width:250px; border:1px solid #99BEEF;;
background:#D2E4FC; color:inherit; margin:3px; padding:3px;
}
#Category ul{ margin:0 0 0 10px; padding:2px 0 0 0; list-style:none; }
#Category li{ margin:0 0 0 10px; padding:2px 0 0 0; }
#Category .Opened{ }
#Category .Closed{ }
#Category .Child { }
#Category .Closed ul{ display:none; }
#Category .Opened img{ background:url(Image/Opened.gif); background-repeat:no-repeat; width:16px; height:16px; }
#Category .Closed img{ background:url(Image/Closed.gif); background-repeat:no-repeat; width:16px; height:16px; }
#Category .Child img{ background:url(Image/Child.gif); background-repeat:no-repeat; width:16px; height:16px; cursor:default; }
评论