ホーム>ネットワークプログラミングチュートリアル>Ajax チュートリアル

Ajax は更新なしでツリーを実装します

著者：Eve Cole 更新時間：2009-07-06 16:30:05

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>
<本文>
<form id="Form1" runat="server">
<テーブル幅=100% セルパディング=0 セルスペース=0 ボーダー=0>
<コルグループ>
<col width=180 />
<列 />
</colgroup>
<tr>
<td>
<div class="TreeMenu" id="CategoryTree" style="幅: 100%; 高さ: 489px">
</div>
</td>
<td>
<iframe id=furl height=20 style="height: 497px; width: 100%;"></iframe>
</td>
</tr>
</テーブル>

<スクリプト言語="jscript">
関数 el(id)
{
document.getElementById(id) を返します。
}
関数 ExpandSubCategory(iCategoryID)
{
var li_father = el("li_" + iCategoryID);
if (li_father.getElementsByTagName("li").length > 0) //分类已下ダウンロード
{
ChangeStatus(iCategoryID);
戻る;
}

li_father.className = "開いた";

switchNote(iCategoryID, true);
AjaxMethod.GetSubCategory(iCategoryID, GetSubCategory_callback);
関数

GetSubCategory_callback(応答)
{
var dt = 応答.値.テーブル[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 = "子";
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()
{
プレビュー画像(id);
};
a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');";
a.innerHTML = dt.Rows[i].CategoryName;
}
それ以外
{
var li = document.createElement("li");
li.className = "クローズ";
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 = 関数 () {
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);
}

// 叶子节点の单击响应関数
関数 OpenDocument(iCategoryID)
{
// 追加ダウンロード情報
PreloadFormUrl(iCategoryID);
}

関数 PreviewImage(iCategoryID)
{

関数

ChangeStatus(iCategoryID)
{
var li_father = el("li_" + iCategoryID);
if (li_father.className == "クローズ")
{
li_father.className = "開いた";
}
それ以外
{
li_father.className = "クローズ";
}
関数

switchNote(iCategoryID, show)
{
var li_father = el("li_" + iCategoryID);
もし（見せる）
{
var ul = document.createElement("ul");
ul.id = "ul_note_" + iCategoryID;

var note = document.createElement("li");
note.className = "子";

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);
}
それ以外
{
var ul = el("ul_note_" + iCategoryID);
もし(ul)
{
li_father.removeChild(ul);
}
}
}

// 追加根节点
var ツリー = el("カテゴリツリー");
var root = document.createElement("li");
root.id = "li_0";
ツリー.appendChild(ルート);

// 追加页面時显表示第一级分类
ExpandSubCategory(0);

関数 PreloadFormUrl(iCategoryID)
{
// 同期調整を使用して画像の情報を取得します
var ds = AjaxMethod.GetFormsList(iCategoryID).value;
// 結果が返れば結果が返る
もし (ds)
{
// データテーブルが空でないかどうかを判断する
if (ds.Tables[0].Rows.length > 0)
{
// 返される情報データベース表
dt = ds.テーブル[0];
el("furl").src = dt.Rows[0].FormUrl;
}
else // 分类下没有
{
}
}
}
</script>
</form>
</body>
</html>2.cs代码
システムを使用する;
System.Data を使用します。
System.Configuration を使用します。
System.Collections を使用します。
System.Web を使用します。
System.Web.Security を使用します。
System.Web.UI を使用します。
System.Web.UI.WebControls を使用します。
System.Web.UI.WebControls.WebParts を使用します。
System.Web.UI.HtmlControls を使用します。
AjaxPro を使用する。

パブリック部分クラス Pages_Home_HomePage : System.Web.UI.Page
{
protected void Page_Load(オブジェクト送信者, EventArgs e)
{
Utility.RegisterTypeForAjax(typeof(AjaxMethod));
}
}3.一ツリー.css の css 式を構築する
ある
{}{
テキスト装飾:なし;
}
a、a:訪問しました
{}{
色:#000;
背景:継承;
}
体
{}{
マージン:0;
パディング:20ピクセル;
フォント:12px タホマ、宋体、サンセリフ;
}
dt
{}{
フォントサイズ:22px;
フォントの太さ:太字;
マージン:0 0 0 15px;
}
DD
{}{
マージン:0 0 0 15px;
}
h4
{}{
マージン:0;
パディング:0;
フォントサイズ:18px;
テキスト整列:中央;
}
p
{}{
マージン:0;
パディング:0 0 0 18px;
}
パ、パ:訪問しました
{}{
色:#00f;
背景:継承;
.TreeMenu

画像
{}{
カーソル:手;
垂直配置:中央;
}
.TreeMenu ul
{}{
パディング:0;
}
.TreeMenu li
{}{
リストスタイル:なし;
パディング:0;
}
.クローズドul
{}{
ディスプレイ:なし;
}
.Child 画像
{}{
背景:なし;
カーソル:デフォルト;

#CategoryTree

ul


{}{
マージン:0 0 0 17px;
}
#カテゴリーツリー画像
{}{
幅:34ピクセル;
高さ:18ピクセル;
}
#CategoryTree .開いた画像
{}{
背景:url(skin3/opened.gif) 繰り返しなし 0 1px;
}
#CategoryTree .Closed img.s
{}{
背景:url(skin3/closed.gif) 繰り返しなし 0 1px;
}
#CategoryTree .Child 画像
{}{
背景:url(skin3/child.gif) 繰り返しなし 13px 2px;

#カテゴリー

ツリー


{}{
フロート:左;
幅:249ピクセル;
ボーダー:1px ソリッド #99BEEF;
背景:#D2E4FC;
色:継承;
マージン:3px;
パディング:3px;
高さ:600ピクセル;
}
4.AjaxMethod の構築
システムを使用する;
System.Data を使用します。
System.Data.SqlClient を使用します。
System.Configuration を使用します。
System.Web を使用します。
System.Web.Security を使用します。
System.Web.UI を使用します。
System.Web.UI.WebControls を使用します。
System.Web.UI.WebControls.WebParts を使用します。
System.Web.UI.HtmlControls を使用します。
AjaxPro を使用する。

/**//// <概要>
/// AjaxMethod の概要説明
/// </概要>
パブリック クラス AjaxMethod
{}{
public AjaxMethod()
{
//
// TODO: ここにコンストラクター ロジックを追加します
//
}
[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
public static DataSet GetSubCategory(int iCategoryID)
{}{
string sql = string.Format("SELECT カテゴリID, カテゴリ名, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM カテゴリ WHERE FatherID = {0}", iCategoryID);
GetDataSet(sql)を返します;

[AjaxMethod(HttpSessionStateRequirement.ReadWrite)

]


public static DataSet GetFormsList(int iCategoryID)
{}{
string sql = string.Format("SELECT * FROM フォーム WHERE form_category_id = {0}", iCategoryID);
GetDataSet(sql)を返します;
}
public static string ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();

パブリック静的 DataSet GetDataSet(string sql)
{}{
SqlDataAdapter sda = 新しい SqlDataAdapter(sql, ConnectionString);
DataSet ds = 新しい DataSet();
sda.Fill(ds);
if (ds != null)
DSを返します。
それ以外
null を返します。
}
}5.sql スクリプト
存在する場合 (select * from dbo.sysobjects where id = object_id(N'[dbo].[Category]') および OBJECTPROPERTY(id, N'IsUserTable') = 1)
ドロップテーブル [dbo].[カテゴリ]

存在する場合は

GO

(select * from dbo.sysobjects where id = object_id(N'[dbo].[Forms]') および OBJECTPROPERTY(id, N'IsUserTable') = 1)
ドロップテーブル [dbo].[フォーム]
GO

CREATE TABLE [dbo].[カテゴリ] (
[カテゴリID] [int] IDENTITY (1, 1) NOT NULL 、
[カテゴリ名] [varchar] (20) COLLATE Chinese_PRC_CI_AS NULL 、
[父親ID] [int] NULL
) [プライマリ] オン
GO

CREATE TABLE [dbo].[Forms] (
[FormID] [int] IDENTITY (1, 1) NOT NULL 、
[フォーム名] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL 、
[FormUrl] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL 、
[フォームカテゴリID] [int] NULL ,
[ターゲット] [文字] (10) COLLATE Chinese_PRC_CI_AS NULL
) [プライマリ] オン
行く
関数の作成 IsLeaf (@cat_id int)
int AS を返します
BEGIN

@count int を宣言
select @count = ( FatherID=@cat_idのカテゴリから count(*) を選択)
if (@count=0)
1を返す
0を返す

END
関連記事