1.建立一个aspx页面
html代码
<html xmlns=" http://www.w3.org/1999/xhtml " >
<head id="Kepala1" runat="server">
<title>小山</title>
<link type="text/css" href="../../Styles/tree_css/tree.css" rel="stylesheet">
</kepala>
<tubuh>
<form id="Form1" runat="server">
<lebar tabel=100% cellpadding=0 spasi sel=0 batas=0>
<colgroup>
<lebar kolom=180 />
<kol />
</colgroup>
<tr>
<td>
<div class="TreeMenu" id="CategoryTree" style="lebar: 100%; tinggi: 489 piksel">
</div>
</td>
<td>
<iframe id=furl height=20 style="height: 497px; width: 100%;"></iframe>
</td>
</tr>
</tabel>
<skrip bahasa="jscript">
fungsi el(id)
{
kembalikan dokumen.getElementById(id);
}
fungsi ExpandSubCategory(iCategoryID)
{
var li_father = el("li_" + iCategoryID);
if (li_father.getElementsByTagName("li").length > 0) //分类已下载
{
UbahStatus(iCategoryID);
kembali;
}
li_father.className = "Dibuka";
switchNote(iCategoryID, benar);
AjaxMethod.GetSubCategory(iCategoryID, GetSubCategory_callback);
}
fungsi GetSubCategory_callback(respon)
{
var dt = respon.nilai.Tabel[0];
if (dt.Baris.panjang > 0)
{
var iCategoryID = dt.Baris[0].AyahID;
}
var li_father = el("li_" + iCategoryID);
var ul = dokumen.createElement("ul");
untuk (var i = 0;i < dt.Baris.panjang;i++)
{
if (dt.Rows[i].IsChild == 1) //叶子节点
{
var li = dokumen.createElement("li");
li.className = "Anak";
li.id = "li_" + dt.Baris[i].ID Kategori;
var img = dokumen.createElement("img");
img.id = dt.Baris[i].ID Kategori;
img.namakelas = "s";
img.src = "../../Styles/tree_css/s.gif";
var a = dokumen.createElement("a");
var id = dt.Baris[i].ID Kategori;
a.onmouseover = fungsi()
{
PratinjauGambar(id);
};
a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');";
a.innerHTML = dt.Rows[i].CategoryName;
}
kalau tidak
{
var li = dokumen.createElement("li");
li.className = "Tutup";
li.id = "li_" + dt.Baris[i].ID Kategori;
var img = dokumen.createElement("img");
img.id = dt.Baris[i].ID Kategori;
img.namakelas = "s";
img.src = "../../Styles/tree_css/s.gif";
img.onclick = fungsi () {
ExpandSubCategory(ini.id);
};
img.alt = "展开/折叠";
var a = dokumen.createElement("a");
a.href = "javascript:ExpandSubCategory(" +
dt.Baris[i].ID Kategori + ");";
a.innerHTML = dt.Rows[i].CategoryName;
}
li.appendChild(img);
li.appendChild(a);
ul.appendChild(li);
}
li_father.appendChild(ul);
switchNote(iCategoryID, salah);
}
// 叶子节点的单击响应函数
fungsi OpenDocument (iCategoryID)
{
// 预加载信息
PreloadFormUrl(iCategoryID);
}
fungsi Gambar Pratinjau (iCategoryID)
{
}
fungsi UbahStatus(iCategoryID)
{
var li_father = el("li_" + iCategoryID);
if (li_father.className == "Tertutup")
{
li_father.className = "Dibuka";
}
kalau tidak
{
li_father.className = "Tutup";
}
}
saklar fungsiCatatan(iCategoryID, tampilkan)
{
var li_father = el("li_" + iCategoryID);
jika (tunjukkan)
{
var ul = dokumen.createElement("ul");
ul.id = "ul_note_" + iCategoryID;
var note = dokumen.createElement("li");
note.className = "Anak";
var img = dokumen.createElement("img");
img.namakelas = "s";
img.src = "../../Styles/tree_css/s.gif";
var a = dokumen.createElement("a");
a.href = "javascript:void(0);";
a.innerHTML = "请稍候";
catatan.appendChild(img);
catatan.appendChild(a);
ul.appendChild(catatan);
li_father.appendChild(ul);
}
kalau tidak
{
var ul = el("ul_note_" + iCategoryID);
jika (ul)
{
li_father.removeChild(ul);
}
}
}
// 加载根节点
var pohon = el("Pohon Kategori");
var root = dokumen.createElement("li");
root.id = "li_0";
pohon.appendChild(root);
// 加载页面时显示第一级分类
PerluasSubKategori(0);
fungsi PreloadFormUrl(iCategoryID)
{
// 采用同步调用的方式获取图片的信息
var ds = AjaxMethod.GetFormsList(iCategoryID).nilai;
// 如果返回了结果
jika (ds)
{
// 判断数据表是否不为空
if (ds.Tabel[0].Panjang baris > 0)
{
// 返回的信息数据表
dt = ds.Tabel[0];
el("furl").src = dt.Baris[0].FormUrl;
}
lain // 分类下没有
{
}
}
}
</skrip>
</bentuk>
</tubuh>
</html>2.cs代码
menggunakan Sistem;
menggunakan Sistem.Data;
menggunakan Sistem.Konfigurasi;
menggunakan Sistem.Koleksi;
menggunakan Sistem.Web;
menggunakan Sistem.Web.Keamanan;
menggunakan Sistem.Web.UI;
menggunakan Sistem.Web.UI.WebControls;
menggunakan System.Web.UI.WebControls.WebParts;
menggunakan Sistem.Web.UI.HtmlControls;
menggunakan AjaxPro;
kelas parsial publik Pages_Home_HomePage : System.Web.UI.Page
{
dilindungi kekosongan Page_Load (pengirim objek, EventArgs e)
{
Utilitas.RegisterTypeForAjax(typeof(AjaxMethod));
}
}3.建立一个tree.css的css样式
A
{}}{
dekorasi teks: tidak ada;
}
a,a: dikunjungi
{}}{
warna:#000;
latar belakang:mewarisi;
}
tubuh
{}}{
margin:0;
bantalan:20 piksel;
font:12px tahoma,宋体,sans-serif;
}
dt
{}}{
ukuran font:22px;
berat font: tebal;
margin:0 0 0 15 piksel;
}
hh
{}}{
margin:0 0 0 15 piksel;
}
h4
{}}{
margin:0;
bantalan:0;
ukuran font:18px;
perataan teks:tengah;
}
P
{}}{
margin:0;
bantalan:0 0 0 18 piksel;
}
pa, pa: berkunjung
{}}{
warna:#00f;
latar belakang:mewarisi;
}
.TreeMenu img.s
{}}{
kursor:tangan;
perataan vertikal:tengah;
}
.TreeMenu ul
{}}{
bantalan:0;
}
.TreeMenu li
{}}{
gaya daftar: tidak ada;
bantalan:0;
}
.Jalan tertutup
{}}{
tampilan: tidak ada;
}
.Gambar anak.s
{}}{
latar belakang: tidak ada;
kursor:standar;
}
#CategoryTree ul
{}}{
margin:0 0 0 17 piksel;
}
#CategoryTree img.s
{}}{
lebar:34 piksel;
tinggi:18 piksel;
}
#CategoryTree .Gambar terbuka
{}}{
latar belakang:url(skin3/opened.gif) tanpa pengulangan 0 1px;
}
#CategoryTree .Gambar tertutup
{}}{
latar belakang:url(skin3/closed.gif) tanpa pengulangan 0 1px;
}
#CategoryTree .Gambar anak.s
{}}{
latar belakang:url(skin3/child.gif) tanpa pengulangan 13px 2px;
}
#KategoriPohon
{}}{
mengapung:kiri;
lebar:249 piksel;
batas:1px padat #99BEEF;
latar belakang:#D2E4FC;
warna:mewarisi;
margin:3 piksel;
bantalan:3 piksel;
tinggi:600 piksel;
}
4. Metode Ajax
menggunakan Sistem;
menggunakan Sistem.Data;
menggunakan Sistem.Data.SqlClient;
menggunakan Sistem.Konfigurasi;
menggunakan Sistem.Web;
menggunakan Sistem.Web.Keamanan;
menggunakan Sistem.Web.UI;
menggunakan Sistem.Web.UI.WebControls;
menggunakan System.Web.UI.WebControls.WebParts;
menggunakan Sistem.Web.UI.HtmlControls;
menggunakan AjaxPro;
/**//// <ringkasan>
/// Deskripsi ringkasan untuk Metode Ajax
/// </ringkasan>
Metode Ajax kelas publik
{}}{
Metode Ajax publik()
{
//
// TODO: Tambahkan logika konstruktor di sini
//
}
[Metode Ajax(HttpSessionStateRequirement.ReadWrite)]
DataSet GetSubCategory statis publik (int iCategoryID)
{}}{
string sql = string.Format("PILIH ID Kategori, Nama Kategori, ID Ayah, dbo.IsLeaf(ID Kategori) sebagai IsChild DARI Kategori WHERE FatherID = {0}", iCategoryID);
kembalikan GetDataSet(sql);
}
[Metode Ajax(HttpSessionStateRequirement.ReadWrite)]
DataSet GetFormsList statis publik (int iCategoryID)
{}}{
string sql = string.Format("PILIH * DARI formulir WHERE form_category_id = {0}", iCategoryID);
kembalikan GetDataSet(sql);
}
string statis publik ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();
DataSet statis publik GetDataSet (string sql)
{}}{
SqlDataAdapter sda = baru SqlDataAdapter(sql, ConnectionString);
Kumpulan Data ds = Kumpulan Data baru();
sda.Isi(ds);
jika (ds != nol)
kembali ds;
kalau tidak
kembalikan nol;
}
}5.sql脚本
jika ada (pilih * dari dbo.sysobjects di mana id = object_id(N'[dbo].[Category]') dan OBJECTPROPERTY(id, N'IsUserTable') = 1)
jatuhkan tabel [dbo].[Kategori]
GO
jika ada (pilih * dari dbo.sysobjects di mana id = object_id(N'[dbo].[Forms]') dan OBJECTPROPERTY(id, N'IsUserTable') = 1)
jatuhkan tabel [dbo].[Formulir]
BUAT
TABEL [dbo].[Kategori] (
[CategoryID] [int] IDENTITAS (1, 1) BUKAN NULL ,
[NamaKategori] [varchar] (20) COLLATE Chinese_PRC_CI_AS NULL ,
[ID Ayah] [int] NULL
) PADA [UTAMA]
BUAT
TABEL [dbo].[Formulir] (
[FormID] [int] IDENTITAS (1, 1) BUKAN 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
) PADA [UTAMA]
PERGI
BUAT FUNGSI IsLeaf (@cat_id int)
KEMBALI ke AS
MULAI
deklarasikan @count int
pilih @count = (pilih count(*) dari Kategori di mana FatherID=@cat_id )
jika (@hitungan=0)
kembali 1
kembali 0
AKHIR