1. Créer un compte aspx
html ici
<html xmlns=" http://www.w3.org/1999/xhtml " >
<head id="Head1" runat="serveur">
<title>小山</title>
<link type="text/css" href="../../Styles/tree_css/tree.css" rel="stylesheet">
</tête>
<corps>
<form id="Form1" runat="serveur">
<table width=100% cellpadding=0 cellpacing=0 border=0>
<groupecol>
<col width=180 />
<col />
</colgroup>
<tr>
<td>
<div class="TreeMenu" id="CategoryTree" style="largeur : 100 % ; hauteur : 489px">
</div>
</td>
<td>
<iframe id=furl height=20 style="height : 497px; width : 100%;"></iframe>
</td>
</tr>
</table>
<langage de script="jscript">
fonction el(id)
{
return document.getElementById(id);
}
fonction ExpandSubCategory (iCategoryID)
{
var li_father = el("li_" + iCategoryID);
if (li_father.getElementsByTagName("li").length > 0) //分类已下载
{
ChangeStatus (iCategoryID);
retour;
}
li_father.className = "Ouvert";
switchNote(iCategoryID, vrai);
AjaxMethod.GetSubCategory(iCategoryID, GetSubCategory_callback);
}
fonction GetSubCategory_callback (réponse)
{
var dt = réponse.value.Tables[0];
si (dt.Rows.length > 0)
{
var iCategoryID = dt.Rows[0].FatherID;
}
var li_father = el("li_" + iCategoryID);
var ul = document.createElement("ul");
pour (var i = 0;i < dt.Rows.length;i++)
{
if (dt.Rows[i].IsChild == 1) //叶子节点
{
var li = document.createElement("li");
li.className = "Enfant" ;
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 = fonction()
{
AperçuImage(id);
} ;
a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');";
a.innerHTML = dt.Rows[i].CategoryName;
}
autre
{
var li = document.createElement("li");
li.className = "Fermé" ;
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 = fonction () {
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, faux);
}
// 叶子节点的单击响应函数
fonction OpenDocument (iCategoryID)
{
// 预加载信息
PreloadFormUrl(iCategoryID);
}
fonction AperçuImage (iCategoryID)
{
}
fonction ChangeStatus (iCategoryID)
{
var li_father = el("li_" + iCategoryID);
if (li_father.className == "Fermé")
{
li_father.className = "Ouvert";
}
autre
{
li_father.className = "Fermé";
}
}
fonction switchNote (iCategoryID, show)
{
var li_father = el("li_" + iCategoryID);
si (montrer)
{
var ul = document.createElement("ul");
ul.id = "ul_note_" + iCategoryID ;
var note = document.createElement("li");
note.className = "Enfant" ;
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);
}
autre
{
var ul = el("ul_note_" + iCategoryID);
si (ul)
{
li_father.removeChild(ul);
}
}
}
// 加载根节点
var arbre = el("CategoryTree");
var racine = document.createElement("li");
root.id = "li_0" ;
arbre.appendChild(racine);
// 加载页面时显示第一级分类
ExpandSubCatégorie(0);
fonction PreloadFormUrl (iCategoryID)
{
// 采用同步调用的方式获取图片的信息
var ds = AjaxMethod.GetFormsList(iCategoryID).value;
// 如果返回了结果
si (ds)
{
// 判断数据表是否不为空
si (ds.Tables[0].Rows.length > 0)
{
// 返回的信息数据表
dt = ds.Tables[0];
el("furl").src = dt.Rows[0].FormUrl;
}
else // 分类下没有
{
}
}
}
</script>
</form>
</corps>
</html>2.cs ici
utiliser le système ;
en utilisant System.Data ;
en utilisant System.Configuration ;
en utilisant System.Collections ;
en utilisant System.Web ;
en utilisant System.Web.Security ;
en utilisant System.Web.UI ;
en utilisant System.Web.UI.WebControls ;
en utilisant System.Web.UI.WebControls.WebParts ;
en utilisant System.Web.UI.HtmlControls ;
en utilisant AjaxPro ;
classe partielle publique Pages_Home_HomePage : System.Web.UI.Page
{
protected void Page_Load (expéditeur de l'objet, EventArgs e)
{
Utility.RegisterTypeForAjax(typeof(AjaxMethod));
}
}3.建立一个tree.css的css样式
un
{}{
décoration de texte : aucune ;
}
a,a: visité
{}{
couleur : #000 ;
arrière-plan : hériter ;
}
corps
{}{
marge : 0 ;
remplissage : 20 px ;
police:12px tahoma,宋体,sans-serif;
}
dt
{}{
taille de police : 22 px ;
poids de la police : gras ;
marge :0 0 0 15px ;
}
jj
{}{
marge :0 0 0 15px ;
}
h4
{}{
marge : 0 ;
remplissage : 0 ;
taille de police : 18 px ;
texte-align:centre;
}
p
{}{
marge : 0 ;
remplissage :0 0 0 18px ;
}
pa, pa: visité
{}{
couleur : #00f ;
arrière-plan : hériter ;
}
.TreeMenu img.s
{}{
curseur:main;
alignement vertical : milieu ;
}
.TreeMenu ul
{}{
remplissage : 0 ;
}
.TreeMenu li
{}{
style de liste : aucun ;
remplissage : 0 ;
}
.Fermé ul
{}{
affichage : aucun ;
}
.Imgs d'enfant.s
{}{
arrière-plan : aucun ;
curseur : par défaut ;
}
#CategoryTree ul
{}{
marge :0 0 0 17px ;
}
#CategoryTree img.s
{}{
largeur : 34 px ;
hauteur : 18 px ;
}
#CategoryTree .Ouvert img.s
{}{
background:url(skin3/opened.gif) sans répétition 0 1px;
}
#CategoryTree .Fermé img.s
{}{
background:url(skin3/closed.gif) sans répétition 0 1px;
}
#CategoryTree .Child img.s
{}{
background:url(skin3/child.gif) sans répétition 13px 2px;
}
#ArbreCatégorie
{}{
flotteur : gauche ;
largeur : 249 px ;
bordure : 1px solide #99BEEF ;
arrière-plan :#D2E4FC ;
couleur:hériter;
marge : 3 px ;
remplissage : 3 px ;
hauteur : 600 px ;
}
4. Méthode Ajax
utiliser le système ;
en utilisant System.Data ;
en utilisant System.Data.SqlClient ;
en utilisant System.Configuration ;
en utilisant System.Web ;
en utilisant System.Web.Security ;
en utilisant System.Web.UI ;
en utilisant System.Web.UI.WebControls ;
en utilisant System.Web.UI.WebControls.WebParts ;
en utilisant System.Web.UI.HtmlControls ;
en utilisant AjaxPro ;
/**//// <résumé>
/// Description récapitulative d'AjaxMethod
/// </summary>
classe publique AjaxMethod
{}{
méthode Ajax publique()
{
//
// TODO : Ajouter la logique du constructeur ici
//
}
[AjaxMethod (HttpSessionStateRequirement.ReadWrite)]
DataSet statique public GetSubCategory (int iCategoryID)
{}{
string sql = string.Format("SELECT CategoryID, CategoryName, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}", iCategoryID);
retourner GetDataSet(sql);
}
[AjaxMethod (HttpSessionStateRequirement.ReadWrite)]
DataSet statique public GetFormsList (int iCategoryID)
{}{
string sql = string.Format("SELECT * FROM formulaires WHERE form_category_id = {0}", iCategoryID);
retourner GetDataSet(sql);
}
chaîne statique publique ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();
DataSet statique public GetDataSet (string sql)
{}{
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
DataSetds = new DataSet();
sda.Fill(ds);
si (ds != nul)
retourner ds ;
autre
renvoie null ;
}
}5.sql脚本
s'il existe (sélectionnez * dans dbo.sysobjects où id = object_id(N'[dbo].[Category]') et OBJECTPROPERTY(id, N'IsUserTable') = 1)
déposer la table [dbo].[Catégorie]
GO
s'il existe (sélectionnez * dans dbo.sysobjects où id = object_id(N'[dbo].[Forms]') et OBJECTPROPERTY(id, N'IsUserTable') = 1)
déposer la table [dbo].[Formulaires]
ALLER
CRÉER UNE TABLE [dbo].[Catégorie] (
[CategoryID] [int] IDENTITÉ (1, 1) NON NULL ,
[CategoryName] [varchar] (20) COLLATE Chinese_PRC_CI_AS NULL ,
[IDPère] [int] NULL
) SUR [PRIMAIRE]
ALLER
CRÉER UNE TABLE [dbo].[Formulaires] (
[FormID] [int] IDENTITÉ (1, 1) NON NULL ,
[NomFormulaire] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[FormUrl] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[Form_category_id] [int] NULL ,
[cible] [caractère] (10) COLLATE Chinese_PRC_CI_AS NULL
) SUR [PRIMAIRE]
ALLER
CRÉER UNE FONCTION IsLeaf (@cat_id int)
RETOURS entier COMME
BEGIN
déclare @count int
select @count = (sélectionnez count(*) dans la catégorie où FatherID=@cat_id )
si (@count=0)
retour 1
retour 0
FIN