纯ajax＋sqlserver无限级树形菜单．

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 

补充:第一次发布时,忘了图片打包进来.

以下载的朋友可以在这里下载图片

https://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代码段.