當前位置：
首頁 >
Ajax实现无刷新树
發布時間：2023/11/27
32
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Ajax实现无刷新树
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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 6.源代碼下載
?
總結
以上是生活随笔為你收集整理的Ajax实现无刷新树的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ajax无刷新实现图片切换特效
- 下一篇： Ajax实现在textbox中输入内容，