1.建立一个aspx页面
html
<html xmlns=" http://www.w3.org/1999/xhtml " >
<head id="Head1" runat="servidor">
<title>小山</title>
<link type="text/css" href="../../Styles/tree_css/tree.css" rel="stylesheet">
</head>
<corpo>
<form id="Form1" runat="servidor">
<largura da tabela=100% cellpadding=0 cellpacing=0 border=0>
<colgrupo>
<col largura = 180 />
<col />
</colgroup>
<tr>
<td>
<div class="TreeMenu" id="CategoryTree" style="largura: 100%; altura: 489px">
</div>
</td>
<td>
<iframe id=furl height=20 style="height: 497px; width: 100%;"></iframe>
</td>
</tr>
</tabela>
<linguagem script="jscript">
função el(id)
{
retornar document.getElementById(id);
}
função ExpandSubCategory(iCategoryID)
{
var li_pai = el("li_" + iCategoryID);
if (li_father.getElementsByTagName("li").length > 0) //分类已下载
{
AlterarStatus(iCategoryID);
retornar;
}
li_father.className = "Aberto";
switchNote(iCategoryID, verdadeiro);
AjaxMethod.GetSubCategory(iCategoryID, GetSubCategory_callback);
}
função GetSubCategory_callback(resposta)
{
var dt = resposta.valor.Tabelas[0];
if (dt.Rows.comprimento > 0)
{
var iCategoryID = dt.Rows[0].FatherID;
}
var li_pai = el("li_" + iCategoryID);
var ul = document.createElement("ul");
para (var i = 0;i <dt.Rows.length;i++)
{
if (dt.Rows[i].IsChild == 1) //叶子节点
{
var li = document.createElement("li");
li.className = "Criança";
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 = função()
{
VisualizarImagem(id);
};
a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');";
a.innerHTML = dt.Rows[i].CategoryName;
}
outro
{
var li = document.createElement("li");
li.className = "Fechado";
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=função(){
ExpandSubCategory(este.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, falso);
}
// 叶子节点的单击响应函数
função OpenDocument(iCategoryID)
{
// 预加载信息
PreloadFormUrl(iCategoryID);
}
função PreviewImage (iCategoryID)
{
}
função ChangeStatus(iCategoryID)
{
var li_pai = el("li_" + iCategoryID);
if (li_father.className == "Fechado")
{
li_father.className = "Aberto";
}
outro
{
li_father.className = "Fechado";
}
}
função switchNote(iCategoryID, mostrar)
{
var li_pai = el("li_" + iCategoryID);
se (mostrar)
{
var ul = document.createElement("ul");
ul.id = "ul_note_" + iCategoryID;
var nota = document.createElement("li");
note.className = "Criança";
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 = "请稍候";
nota.appendChild(img);
nota.appendChild(a);
ul.appendChild(nota);
li_father.appendChild(ul);
}
outro
{
var ul = el("ul_note_" + iCategoryID);
se (ul)
{
li_pai.removeChild(ul);
}
}
}
// 加载根节点
var árvore = el("CategoryTree");
var raiz = document.createElement("li");
raiz.id = "li_0";
árvore.appendChild(raiz);
// 加载页面时显示第一级分类
ExpandSubCategory(0);
função PreloadFormUrl(iCategoryID)
{
// 采用同步调用的方式获取图片的信息
var ds = AjaxMethod.GetFormsList(iCategoryID).value;
// 如果返回了结果
se (ds)
{
// 判断数据表是否不为空
if (ds.Tables[0].Rows.length > 0)
{
// 返回的信息数据表
dt = ds.Tabelas[0];
el("furl").src = dt.Rows[0].FormUrl;
}
else // 分类下没有
{
}
}
}
</script>
</form>
</body>
</html>2.cs代码
usando o sistema;
usando System.Data;
usando System.Configuration;
usando System.Collections;
usando System.Web;
usando System.Web.Security;
usando System.Web.UI;
usando System.Web.UI.WebControls;
usando System.Web.UI.WebControls.WebParts;
usando System.Web.UI.HtmlControls;
usando AjaxPro;
classe parcial pública Pages_Home_HomePage: System.Web.UI.Page
{
protegido void Page_Load (remetente do objeto, EventArgs e)
{
Utilitário.RegisterTypeForAjax(typeof(AjaxMethod));
}
}3.建立一个tree.css的css样式
um
{}{
decoração de texto: nenhum;
}
a,a:visitado
{}{
cor:#000;
histórico: herdar;
}
corpo
{}{
margem:0;
preenchimento: 20px;
fonte: 12px tahoma,宋体,sans-serif;
}
dt
{}{
tamanho da fonte: 22px;
peso da fonte: negrito;
margem:0 0 0 15px;
}
dd
{}{
margem:0 0 0 15px;
}
h4
{}{
margem:0;
preenchimento:0;
tamanho da fonte: 18px;
alinhamento de texto:centro;
}
p
{}{
margem:0;
preenchimento: 0 0 0 18px;
}
pa,pa:visitou
{}{
cor:#00f;
histórico: herdar;
}
.TreeMenu img.s
{}{
cursor:mão;
alinhamento vertical: meio;
}
.TreeMenuul
{}{
preenchimento:0;
}
.TreeMenu-li
{}{
estilo de lista: nenhum;
preenchimento:0;
}
.ul fechado
{}{
exibição: nenhum;
}
.Imagens infantis
{}{
histórico: nenhum;
cursor: padrão;
}
#CategoryTreeul
{}{
margem:0 0 0 17px;
}
#CategoryTree img.s
{}{
largura:34px;
altura:18px;
}
#CategoryTree .Img.s abertas
{}{
background:url(skin3/opened.gif) no-repeat 0 1px;
}
#CategoryTree .Imagens fechadas
{}{
background:url(skin3/closed.gif) no-repeat 0 1px;
}
#CategoryTree .Child img.s
{}{
background:url(skin3/child.gif) sem repetição 13px 2px;
}
#CategoryTree
{}{
flutuar:esquerda;
largura:249px;
borda:1px sólido #99BEEF;
plano de fundo:#D2E4FC;
cor: herdar;
margem:3px;
preenchimento:3px;
altura:600px;
}
4.建立一个类AjaxMethod
usando o sistema;
usando System.Data;
usando System.Data.SqlClient;
usando System.Configuration;
usando System.Web;
usando System.Web.Security;
usando System.Web.UI;
usando System.Web.UI.WebControls;
usando System.Web.UI.WebControls.WebParts;
usando System.Web.UI.HtmlControls;
usando AjaxPro;
/**//// <resumo>
/// Descrição resumida para AjaxMethod
/// </sumário>
classe pública AjaxMethod
{}{
método Ajax público()
{
//
// TODO: Adicione a lógica do construtor aqui
//
}
[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
DataSet público estático GetSubCategory (int iCategoryID)
{}{
string sql = string.Format("SELECT CategoryID, CategoryName, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}", iCategoryID);
returnGetDataSet(sql);
}
[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
DataSet público estático GetFormsList (int iCategoryID)
{}{
string sql = string.Format("SELECT * FROM formulários WHERE form_category_id = {0}", iCategoryID);
returnGetDataSet(sql);
}
string estática pública ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();
DataSet estático público GetDataSet (string sql)
{}{
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
DataSet ds = new DataSet();
sda.Fill(ds);
se (ds! = nulo)
retornar ds;
outro
retornar nulo;
}
}5.sql padrão
se existir (selecione * em dbo.sysobjects onde id = object_id(N'[dbo].[Category]') e OBJECTPROPERTY(id, N'IsUserTable') = 1)
eliminar tabela [dbo].[Categoria]
GO
se existir (selecione * em dbo.sysobjects onde id = object_id(N'[dbo].[Forms]') e OBJECTPROPERTY(id, N'IsUserTable') = 1)
eliminar tabela [dbo].[Formulários]
VÁ
CRIAR TABELA [dbo].[Categoria] (
[CategoryID] [int] IDENTIDADE (1, 1) NÃO NULO,
[CategoryName] [varchar] (20) COLLATE Chinese_PRC_CI_AS NULL ,
[FatherID] [int] NULL
) EM [PRIMÁRIO]
VÁ
CRIAR TABELA [dbo].[Formulários] (
[FormID] [int] IDENTIDADE (1, 1) NÃO NULO,
[FormName] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[FormUrl] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[Form_category_id] [int] NULO,
[destino] [char] (10) COLLATE Chinese_PRC_CI_AS NULL
) EM [PRIMÁRIO]
IR
CRIAR FUNÇÃO IsLeaf (@cat_id int)
RETORNA int COMO
BEGIN
declara @count int
selecione @count = (selecione count(*) da categoria onde FatherID=@cat_id )
se (@contagem=0)
retornar 1
retornar 0
FIM