利用Ajax实现无限级目录树（.NET)[转载]

Posted on 2007-04-28 10:51 semovy 阅读(797) 评论(0) 编辑收藏所属分类: J2EE综合

比较符合自己的习惯，整个代码不难。是利用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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>Tree</title>
  <meta name="CODE_LANGUAGE" content="C#" />
  <meta name="vs_defaultClientScript" content="JavaScript" />
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" />
  <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" style="">
    <div id="title" align="center"></div>

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

    <div id="writetime" align="right"></div>
   </div>
   <div id="docList" style="">
   </div>
   <script 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;
}

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: Log4j简介随机数字验证码的生成当前Java软件开发中几种认识误区什么是Web Service？ 12个最重要的J2EE最佳实践 HTTP协议基础 Tomcat域名配置关于Tomcat虚拟主机域名的设置 J2EE的13种核心技术 J2EE面试题集锦(附答案)

semovy

利用Ajax实现无限级目录树（.NET)[转载]

日历

留言簿(7)

随笔分类

随笔档案(1)

文章分类(377)

文章档案(356)

相册

收藏夹(18)

昨天重现

搜索

最新评论