纯ajax＋sqlserver无限级树形菜单

以前在CSDN写的老文章。

发表于 @ 2007年09月23日　21:46:00 

 

ajax这个当今流行的技术名词,几年前ajax开始流行时,也花过点时间研究了一下ajax.net控件．只是工作原因，一直没有用到项目中去．一晃几年ajax依旧如火如荼．最近闲来无事，重温ajax．就好象AJAX当初被遗弃，现在又被热捧一样．这次我没有去下载ajax.net,altas等控件．而是从ajax基础看起，呵呵，一种一切从头开始开始感觉．反正是闲来无事．．
       ibm 中国开发区翻译的＜掌握 Ajax 系列＞几篇文章写的不错．想了解ajax的基础朋友可以去看看．
        进入主题吧．做过web开发的朋友,一定都收藏了javascrip树形菜单，我也有．javascript树形菜单和我这次写的ajax树形菜单最大不同点是ajax树形菜单不是一次性将菜单的全部数据提出来．而是当点了节点时才去从数据库中读取该节点的子树信息，再加载到DIV标签中，而javascript是一次性将数据全部读出来．两者的相同点就是显示子树时，都不会刷新页面．效果图如下:

现实步骤:
1、新建表，并在表中添加数据。这里要注意的是，树形菜单的数据都是从这个表中读出来，表结构设计要做到无限级。
CREATE TABLE [dbo].[SysBaseData](
    [BaseDataID] [int] NOT NULL,
    [BaseDataCode] [char](10) NOT NULL,
    [BaseDataName] [varchar](30) NOT NULL,
    [ParentCode] [char](10) NOT NULL,
    [Description] [varchar](100) NULL,
    [LevelType] [int] NOT NULL,
    [VaildType] [char](1) NOT NULL,
    [PathCode] [varchar](100) NULL,
    [SerialNumberID] [int] NOT NULL,
 CONSTRAINT [PK_SysBaseData] PRIMARY KEY NONCLUSTERED
(
    [BaseDataID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
2、新建树形菜单显示文件LeftTreeAjax.html。
       (1)createXMLHttpRequest()创建xnlHttp对象，由于不同的浏览器XMLHttpRequest控件名不同。代码种用了几个try。这样几种主流的浏览器都可以兼容呢。
//创建对象
function createXMLHttpRequest()
...{

    var isRight = true;
    try...{ xmlHttp = new XMLHttpRequest(); }
    catch(trymicrosoft)
    ...{
        try...{xmlHttp = new ActiveXobject("Msxml2.XMLHTTP");}
        catch(othermicrosoft)
        ...{
            try...{xmlHttp = new ActiveXobject("Microsoft.XMLHTTP");}
            catch(failed)
            ...{
                isRight = false;
            }
        }
    }
    if(!isRight)
      alert("XML对象创建失败");
}
      (2) GetData(ID) 单击节点时，调用该函数。该函数发送请求给CreateTreeAjax.aspx．
//获取数据
function GetData(ID)
{
    ParID  = document.getElementById("M1_" + ID);
    ShowID = document.getElementById("M2_" + ID);
    if(ShowID.innerHTML != "")
    {
        if(ShowID.style.display == "none")
            ShowID.style.display = "block";
        else
            ShowID.style.display = "none";
        ShowFolderICO();
        return;
    }
   
    ShowID.style.display = "block";
    ShowID.innerHTML = "<span class="load">Loading Tree ……</span>";
    var Url = "CreateTreeAjax.aspx?ID=" + ID;
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = ShowTree;
    xmlHttp.open("GET", Url, true);
    xmlHttp.send(null);
}

     (3)ShowTree() 显示子树，CreateTreeAjax.aspx反回子树信息，ShowTree() 获取信息，并加载到DIV标签中．
//此方法直接从服务器端返回HTML
function ShowTree()
{
    if (xmlHttp.readyState == 4){
        if (xmlHttp.status == 200)
        {
            ShowID.innerHTML = xmlHttp.responseText;
           // alert(xmlHttp.responseText);
            ShowFolderICO();
            //alert(M1_DCCK.innerHTML);
        }else
        {
            ShowID.innerHTML = "数据获取错误！"+xmlHttp.status;
        }
    }
}
2、新建创建子树的文件CreateTreeAjax.aspx,CreateTreeAjax.aspx.cs
CreateTreeAjax.aspx 文件中只要这一句，其它的都删除

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CreateTreeAjax.aspx.cs" Inherits="Manage_BaseData_CreateTreeAjax" %>
CreateTreeAjax.aspx.cs  根据接收到ID，读取子树信息。代码太多呢，我就不贴呢。纯ajax＋sqlserver无限级树形菜单的源码需要朋友可以从这里下载：
源码下载地址: http://download.csdn.net/source/252640 

补充:第一次发布时,忘了图片打包进来.
以下载的朋友可以在这里下载图片
http://p.blog.csdn.net/images/p_blog_csdn_net/alphayycn/337547/o_root.gif
依次为:t_L1.gif,t_L2.gif,t_L4.gif,t_M1.gif,t_M2.gif,t_P1.gif,t_P2.gif使用时将图片名前的t_去掉,放在images目录就可以.详细可以看文件中的css代码段.

 

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/alphayycn/archive/2007/09/23/1797586.aspx