Ajax implémente l'arborescence sans actualisation

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 // 分类下没有
{
}
}
}

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 ;

/**////
/// Description récapitulative d'AjaxMethod
///
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