WEB开发网
开发学院WEB开发Ajax Ajax实现无刷新树 阅读

Ajax实现无刷新树

　2007-03-20 11:16:49　来源：WEB开发网　　　
核心提示：1.建立一个aspx页面html代码<html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>小山</ti

1.建立一个aspx页面
html代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
　  <title>小山</title>
　  <link type="text/CSS" href="../../Styles/tree_css/tree.css" rel="stylesheet">
</head>
<body>
　  <form id="Form1" runat="server">
　  <table width=100% cellpadding=0 cellspacing=0 border=0>
　　　  <colgroup>
　　　　　  <col width=180 />
　　　　　  <col />
　　　  </colgroup>
　　　  <tr>
　　　　　  <td>
　　　　　　　  <div class="TreeMenu" id="CategoryTree" style="width: 100%; height: 489px">
　　　　　　　  </div>
　　　　　  </td>
　　　　　  <td>
　　　　　　　  <iframe id=furl height=20 style="height: 497px; width: 100%;"></iframe>
　　　　　  </td>
　　　  </tr>
　  </table>　 
　　　　　　　　　　　　　 
　　　　　  <script language="jscript">
　　　　　  function el(id)
　　　　　  {
　　　　　　　  return document.getElementById(id);　　　　　　　 
　　　　　  }
　　　　　  function ExpandSubCategory(iCategoryID)
　　　　　  {
　　　　　　　  var li_father = el("li_" + iCategoryID);
　　　　　　　  if (li_father.getElementsByTagName("li").length > 0) //分类已下载
　　　　　　　  {
　　　　　　　　　  ChangeStatus(iCategoryID);
　　　　　　　　　  return;
　　　　　　　  }
　　　　　　　 
　　　　　　　  li_father.className = "Opened";
　　　　　　　 
　　　　　　　  switchNote(iCategoryID, true);
　　　　　　　  AjaxMethod.GetSubCategory(iCategoryID, GetSubCategory_callback);　　　　　　　 
　　　　　  }

　　　  function GetSubCategory_callback(response)
　　　　　  {
　　　　　　　  var dt = response.value.Tables[0];
　　　　　　　  if (dt.Rows.length > 0)
　　　　　　　  {
　　　　　　　　　  var iCategoryID = dt.Rows[0].FatherID;
　　　　　　　  }
　　　　　　　  var li_father = el("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 = "../../Styles/tree_css/s.gif";
　　　　　　　　　　　 
　　　　　　　　　　　  var a = document.createElement("a");
　　　　　　　　　　　  var id = dt.Rows[i].CategoryID;
　　　　　　　　　　　  a.onmouSEOver = function()
　　　　　　　　　　　  {
　　　　　　　　　　　　　  PReviewImage(id);
　　　　　　　　　　　  };
　　　　　　　　　　　  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 = "../../Styles/tree_css/s.gif";
　　　　　　　　　　　  img.onclick = function () {
　　　　　　　　　　　　　  ExpandSubCategory(this.id);
　　　　　　　　　　　  };
　　　　　　　　　　　  img.alt = "展开/折叠";
　　　　　　　　　　　 
　　　　　　　　　　　  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);
　　　　　　　 
　　　　　　　  switchNote(iCategoryID, false);
　　　　　  }
　　　　　 
　　　　　  // 叶子节点的单击响应函数
　　　　　  function OpenDocument(iCategoryID)
　　　　　  {
　　　　　　　  // 预加载信息
　　　　　　　  PreloadFormUrl(iCategoryID);
　　　　　  }
　　　　　 
　　　　　  function PreviewImage(iCategoryID)
　　　　　  {
　　　　　　　 
　　　　　  }

　　　  function ChangeStatus(iCategoryID)
　　　　　  {
　　　　　　　  var li_father = el("li_" + iCategoryID);
　　　　　　　  if (li_father.className == "Closed")
　　　　　　　  {
　　　　　　　　　  li_father.className = "Opened";
　　　　　　　  }
　　　　　　　  else
　　　　　　　  {
　　　　　　　　　  li_father.className = "Closed";
　　　　　　　  }　　　　　　　 
　　　　　  }

　　　  function switchNote(iCategoryID, show)
　　　　　  {
　　　　　　　  var li_father = el("li_" + iCategoryID);
　　　　　　　  if (show)
　　　　　　　  {
　　　　　　　　　  var ul = document.createElement("ul");
　　　　　　　　　  ul.id = "ul_note_" + iCategoryID;
　　　　　　　　　 
　　　　　　　　　  var note = document.createElement("li");
　　　　　　　　　  note.className = "Child";
　　　　　　　　　 
　　　　　　　　　  var img = document.createElement("img");
　　　　　　　　　  img.className = "s";
　　　　　　　　　  img.src = "../../Styles/tree_css/s.gif";
　　　　　　　　　 
　　　　　　　　　  var a = document.createElement("a");
　　　　　　　　　  a.href = "javascript:void(0);";
　　　　　　　　　  a.innerHTML = "请稍候";
　　　　　　　　　 
　　　　　　　　　  note.appendChild(img);
　　　　　　　　　  note.appendChild(a);
　　　　　　　　　  ul.appendChild(note);
　　　　　　　　　  li_father.appendChild(ul);
　　　　　　　  }
　　　　　　　  else
　　　　　　　  {
　　　　　　　　　  var ul = el("ul_note_" + iCategoryID);
　　　　　　　　　  if (ul)
　　　　　　　　　  {
　　　　　　　　　　　  li_father.removeChild(ul);
　　　　　　　　　  }　　　　　　　 
　　　　　　　  }
　　　　　  }

　　　  // 加载根节点
　　　　　  var tree = el("CategoryTree");
　　　　　  var root = document.createElement("li");
　　　　　  root.id = "li_0";
　　　　　  tree.appendChild(root);
　　　　　 
　　　　　  // 加载页面时显示第一级分类
　　　　　  ExpandSubCategory(0);
　　　　　 
　　　　　  function PreloadFormUrl(iCategoryID)
　　　　　  {
　　　　　　　  // 采用同步调用的方式获取图片的信息　　　　　　　 
　　　　　　　  var ds = AjaxMethod.GetFormsList(iCategoryID).value;
　　　　　　　  // 如果返回了结果
　　　　　　　  if (ds)
　　　　　　　  {
　　　　　　　　　  // 判断数据表是否不为空
　　　　　　　　　  if (ds.Tables[0].Rows.length > 0)
　　　　　　　　　  {
　　　　　　　　　　　  // 返回的信息数据表
　　　　　　　　　　　  dt = ds.Tables[0];
　　　　　　　　　　　  el("furl").src = dt.Rows[0].FormUrl;　　　　　　　　　　　　　　　　　 
　　　　　　　　　  }
　　　　　　　　　  else // 分类下没有
　　　　　　　　　  {　　　　　　　　　　　 
　　　　　　　　　  }
　　　　　　　  }　　　　　　　 
　　　　　  }
　　　　　  </script>　　　　　 
　  </form>
</body>
</html>2.cs代码
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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 AjaxPro;

public partial class Pages_Home_HomePage : System.Web.UI.Page
{
　  protected void Page_Load(object sender, EventArgs e)
　  {
　　　  Utility.RegisterTypeForAjax(typeof(AjaxMethod));
　  }
}3.建立一个tree.css的css样式
a
{}{
　  text-decoration:none;
}
a,a:visited
{}{
　  color:#000;
　  background:inherit;
}
body
{}{
　  margin:0;
　  padding:20px;
　  font:12px tahoma,宋体,sans-serif;
}
dt
{}{
　  font-size:22px;
　  font-weight:bold;
　  margin:0 0 0 15px;
}
dd
{}{
　  margin:0 0 0 15px;
}
h4
{}{
　  margin:0;
　  padding:0;
　  font-size:18px;
　  text-align:center;
}
p
{}{
　  margin:0;
　  padding:0 0 0 18px;
}
p a,p a:visited
{}{
　  color:#00f;
　  background:inherit;
}

.TreeMenu img.s
{}{
　  cursor:hand;
　  vertical-align:middle;
}
.TreeMenu ul
{}{
　  padding:0;
}
.TreeMenu li
{}{
　  list-style:none;
　  padding:0;
}
.Closed ul
{}{
　  display:none;
}
.Child img.s
{}{
　  background:none;
　  cursor:default;
}

#CategoryTree ul
{}{
　  margin:0 0 0 17px;
}
#CategoryTree img.s
{}{
　  width:34px;
　  height:18px;
}
#CategoryTree .Opened img.s
{}{
　  background:url(skin3/opened.gif) no-repeat 0 1px;
}
#CategoryTree .Closed img.s
{}{
　  background:url(skin3/closed.gif) no-repeat 0 1px;
}
#CategoryTree .Child img.s
{}{
　  background:url(skin3/child.gif) no-repeat 13px 2px;
}

#CategoryTree
{}{
　  float:left;
　  width:249px;
　  border:1px solid #99BEEF;
　  background:#D2E4FC;
　  color:inherit;
　  margin:3px;
　  padding:3px;
　  height:600px;
}
4.建立一个类AjaxMethod
using System;
using System.Data;
using System.Data.SqlClient;
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 AjaxPro;

/**//// <summary>
/// Summary description for AjaxMethod
/// </summary>
public class AjaxMethod
{}{
　  public AjaxMethod()
　  {
　　　  //
　　　  // TODO: Add constructor logic here
　　　  //
　  }
　  [AjaxMethod(HttpsessionStateRequirement.ReadWrite)]
　  public static DataSet GetSubCategory(int iCategoryID)
　  {}{
　　　  string sql = string.Format("SELECT CategoryID, CategoryName, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}", iCategoryID);
　　　  return GetDataSet(sql);
　  }

　  [AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
　  public static DataSet GetFormsList(int iCategoryID)
　  {}{
　　　  string sql = string.Format("SELECT * FROM forms WHERE form_category_id = {0}", iCategoryID);
　　　  return GetDataSet(sql);
　  }
public static string ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();

　  public static DataSet GetDataSet(string sql)
　　　  {}{
　　　　　  SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
　　　　　  DataSet ds = new DataSet();
　　　　　  sda.Fill(ds);
　　　　　  if (ds != null)
　　　　　　　  return ds;
　　　　　  else
　　　　　　　  return null;
　　　  }
}5.sql脚本
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Category]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[Category]
GO

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Forms]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[Forms]
GO

CREATE TABLE [dbo].[Category] (
　  [CategoryID] [int] IDENTITY (1, 1) NOT NULL ,
　  [CategoryName] [varchar] (20) COLLATE Chinese_PRC_CI_AS NULL ,
　  [FatherID] [int] NULL
) ON [PRIMARY]
GO

CREATE TABLE [dbo].[Forms] (
　  [FormID] [int] IDENTITY (1, 1) NOT NULL ,
　  [FormName] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
　  [FormUrl] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
　  [Form_category_id] [int] NULL ,
　  [target] [char] (10) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO
CREATE FUNCTION IsLeaf (@cat_id int) 
RETURNS int AS 
BEGIN

declare @count int
select @count = (select count(*) from Category where FatherID=@cat_id)
if (@count=0)
return 1
return 0

END

Tags：Ajax 实现 刷新

编辑录入：爽爽　[复制链接] [打 印]
更多精彩
赞助商链接

热点阅读
焦点图片
最新推荐
精彩阅读