纯html无限级目录树,利用Ajax实现无限级目录树（.NET)[转载]
比较符合自己的习惯，整个代码不难。是利用CSS实现的。
家里的电脑上不能安装MS SQL，索性就用MySQL。顺路学习了一下使用MySql的Function。
希望使用的XDJM能在这里留个言。谢谢
数据库：
ysql> create table category(
-> categoryid int,
-> categoryname varchar(20),
-> FatherId int);
DELIMITER //
mysql> create function IsLeaf(cat_id int)
-> returns int
-> begin
-> declare count int;
-> select count(*) into count from category where fatherid=cat_id;
-> if count = 0 then
-> return 1
-> ;
-> end if;
-> return 0;
-> end;
-> //
mysql> insert into category values(1,'My Documen
-> ;
Query OK, 1 row affected (0.08 sec)
mysql> insert into category values(2,'ASP.NET',1
-> ;
Query OK, 1 row affected (0.02 sec)
mysql> insert into category values(3,'JAVA',1)
-> ;
Query OK, 1 row affected (0.03 sec)
mysql> insert into category values(4,'C#',1)
-> ;
Query OK, 1 row affected (0.04 sec)
mysql> insert into category values(5,'HTML',1)
-> ;
Query OK, 1 row affected (0.01 sec)
mysql> insert into category values(6,'Oracle',1)
-> ;
Query OK, 1 row affected (0.02 sec)
mysql> insert into category values(7,'Line',1)
-> ;
Query OK, 1 row affected (0.02 sec)
Tree.aspx
Tree基于Ajax的动态树型菜单
function ExpandSubCategory(iCategoryID)
{
var li_father = document.getElementById("li_" + iCategoryID);
if (li_father.getElementsByTagName("li").length > 0) //分类已下载
{
ChangeStatus(iCategoryID);
displayDocList(iCategoryID);
return;
}
li_father.className = "Opened";
switchNote(iCategoryID, true);
Tree.GetSubCategory(iCategoryID, GetSubCategory_callback);
}
function GetSubCategory_callback(response)
{
var dt = response.value.Tables[0];
if (dt.Rows.length > 0)
{
var iCategoryID = dt.Rows[0].FatherID;
}
var li_father = document.getElementById("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 = "Child";
li.id = "li_" + dt.Rows[i].CategoryID;
var img = document.createElement("img");
img.id = dt.Rows[i].CategoryID;
img.className = "s";
img.src = "css/s.gif";
var a = document.createElement("a");
a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');";
a.innerHTML = dt.Rows[i].CategoryName;
}
else
{
var li = document.createElement("li");
li.className = "Closed";
li.id = "li_" + dt.Rows[i].CategoryID;
var img = document.createElement("img");
img.id = dt.Rows[i].CategoryID;
img.className = "s";
img.src = "css/s.gif";
img.onclick = function () {
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);
displayDocList(iCategoryID);
switchNote(iCategoryID, false);
}
function OpenDocument(iCategoryID)
{
var div_docContent = document.getElementById("docContent");
var div_docList = document.getElementById("docList");
div_docContent.style.display = "";
div_docList.style.display = "none";
Tree.GetDocInfo(iCategoryID, GetDocInfo_callback);
}
function GetDocInfo_callback(response)
{
}
function ChangeStatus(iCategoryID)
{
var li_father = document.getElementById("li_" + iCategoryID);
if (li_father.className == "Closed")
{
li_father.className = "Opened";
}
else
{
li_father.className = "Closed";
}
}
function switchNote(iCategoryID, show)
{
var li_father = document.getElementById("li_" + iCategoryID);
if (show)
{
var ul = document.createElement("ul");
ul.id = "ul_note_" + iCategoryID;
var note = document.createElement("li");
note.className = "Child";
var img = document.createElement("img");
img.className = "s";
img.src = "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);
}
else
{
var ul = document.getElementById("ul_note_" + iCategoryID);
if (ul)
{
li_father.removeChild(ul);
}
}
}
function displayDocList(iCategoryID)
{
var div_docContent = document.getElementById("docContent");
var div_docList = document.getElementById("docList");
div_docContent.style.display = "none";
div_docList.style.display = "";
div_docList.style.padding = 20;
while (div_docList.childNodes.length > 0)
{
div_docList.removeChild(div_docList.childNodes[0]);
}
var dt = Tree.GetDocInfoInCategory(iCategoryID).value.Tables[0];
if (dt)
{
for (var i = 0;i < dt.Rows.length;i++)
{
var a = document.createElement("a");
a.href = "javascript:OpenDocument(" + dt.Rows[i].CategoryID + ");";
a.innerHTML = "" + dt.Rows[i].CategoryName + "";
var li = document.createElement("li");
li.appendChild(a);
var div = document.createElement("div");
div.appendChild(li);
div_docList.appendChild(div);
}
}
}
// 加载根节点
var tree = document.getElementById("CategoryTree");
var root = document.createElement("li");
root.id = "li_0";
tree.appendChild(root);
// 加载页面时显示第一级分类
ExpandSubCategory(0);
Tree.aspx.csusing System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxPro;
using MySql.Data.MySqlClient;
public partial class Tree : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Utility.RegisterTypeForAjax(typeof(Tree));
}
private Random rand = new Random();
[AjaxMethod()]
public DataSet GetSubCategory(int iCategoryID)
{
DataSet ds = new DataSet();
MySqlConnection conn = new MySqlConnection("server=127.0.0.1;uid=root;pwd=111111;database=test");
MySqlCommand cmd = conn.CreateCommand();
cmd.CommandText = string.Format("SELECT CategoryID, CategoryName, FatherID, IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}", iCategoryID);
MySqlDataAdapter da = new MySqlDataAdapter(cmd);
try
{
da.Fill(ds);
}
catch (MySqlException)
{
}
finally
{
conn.Close();
}
System.Threading.Thread.Sleep(500 + rand.Next(1000));
Console.WriteLine(ds.Tables[0].Rows.Count.ToString());
return ds;
}
[AjaxMethod()]
public DataSet GetDocInfo(int iCategoryID)
{
DataSet ds = new DataSet();
return ds;
}
[AjaxMethod()]
public DataSet GetDocInfoInCategory(int iCategoryID)
{
DataSet ds = new DataSet();
MySqlConnection conn = new MySqlConnection("server=127.0.0.1;uid=root;pwd=111111;database=test");
MySqlCommand cmd = conn.CreateCommand();
cmd.CommandText = string.Format(
"SELECT CategoryID, CategoryName, FatherID FROM Category WHERE FatherID = {0} AND IsLeaf(CategoryID) = 1", iCategoryID);
MySqlDataAdapter da = new MySqlDataAdapter(cmd);
try
{
da.Fill(ds);
}
catch (MySqlException)
{
}
finally
{
conn.Close();
}
return ds;
}
}
CSSa
{
text-decoration:none;
}
a,a:visited
{
color:#000;
background:inherit;
}
body
{
margin:0;
padding:20px;
font:12px tahoma,宋体,sans-serif;
}
dt
{
font-size:22px;
font-weight:bold;
margin:0 0 0 15px;
}
dd
{
margin:0 0 0 15px;
}
h4
{
margin:0;
padding:0;
font-size:18px;
text-align:center;
}
p
{
margin:0;
padding:0 0 0 18px;
}
p a,p a:visited
{
color:#00f;
background:inherit;
}
.TreeMenu img.s
{
cursor:hand;
vertical-align:middle;
}
.TreeMenu ul
{
padding:0;
}
.TreeMenu li
{
list-style:none;
padding:0;
}
.Closed ul
{
display:none;
}
.Child img.s
{
background:none;
cursor:default;
}
#CategoryTree ul
{
margin:0 0 0 17px;
}
#CategoryTree img.s
{
width:34px;
height:18px;
}
#CategoryTree .Opened img.s
{
background:url(skin3/opened.gif) no-repeat 0 1px;
}
#CategoryTree .Closed img.s
{
background:url(skin3/closed.gif) no-repeat 0 1px;
}
#CategoryTree .Child img.s
{
background:url(skin3/child.gif) no-repeat 13px 2px;
}
#CategoryTree
{
float:left;
width:249px;
border:1px solid #99BEEF;
background:#D2E4FC;
color:inherit;
margin:3px;
padding:3px;
}