利用Ajax实现无限级目录树（.NET)

2022-07-15 80酷酷网 80kuku.com

　　ajax

使用了AjaxPro框架，感觉还是比较好用。比较符合自己的习惯，整个代码不难。是利用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
<% Page Language="C#" AutoEventWireup="true" CodeFile="Tree.aspx.cs" Inherits="Tree" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >
<head>
  <title>Tree</title>
  <meta name="CODE_LANGUAGE" content="C#" />
  <meta name="vs_defaultClientScript" content="JavaScript" />
  <meta name="vs_targetSchema" content="" />
  <link type="text/css" href="css/tree.css" rel="stylesheet" />
</head>
<body>
  <form id="Form1" method="post" runat="server">
   <div class="TreeMenu" id="CategoryTree">
    <h4>基于Ajax的动态树型菜单</h4>
   </div>
   <div id="docContent" id="title" align="center"></div>

    <div id="author" align="right"></div>

    <div id="writetime" align="right"></div>
   </div>
   <div id="docList" language="jscript" type="text/jscript">

</form>
</body>

</html>

Tree.aspx.cs
using 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;
}
}

CSS
a
{
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;
}