分享
 
 
 

Ajax实现无刷新树

王朝other·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有