纯ajax+sqlserver无限级树形菜单.

原创 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](10NOT NULL,
    
[BaseDataName] [varchar](30NOT NULL,
    
[ParentCode] [char](10NOT NULL,
    
[Description] [varchar](100NULL,
    
[LevelType] [int] NOT NULL,
    
[VaildType] [char](1NOT NULL,
    
[PathCode] [varchar](100NULL,
    
[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  = ONON [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代码段.


 

树形菜单Ajax实现

  • 2009年09月02日 16:55
  • 497KB
  • 下载

基于AJAX的一个无限树形菜单

基于AJAX的一个无限树形菜单最近又用到了树型菜单,原来做的是一次把数据都读出来,现在想想,感觉就是不爽,要是每次按需要读就ok了,正好可以用ajax。  首先是ajax的处理,写个js吧,用oo写,...
  • nickshen3
  • nickshen3
  • 2007年06月21日 19:45
  • 1727

纯ajax无限级树形菜单源码

  • 2007年09月23日 23:28
  • 5KB
  • 下载

贴棵简单的AJAX树形折叠菜单

导读:   贴棵简单的AJAX树形折叠菜单   系统提示:这是一个从旧版社区导入的帖子。   如果显示不正常,或需要查找旧帖中上传的附件,请参照原帖。   原帖地址:http://my.iecn.n...
  • chief1985
  • chief1985
  • 2007年12月06日 19:24
  • 3373

Bootstrap 树形菜单ajax 后台取值.

BeyondAdmin bootstrap 前端树形菜单后台取值.
  • tsqgw2001
  • tsqgw2001
  • 2017年04月05日 11:49
  • 1748

AJAX与SQL Server(一)

本实例演示利用Ajax技术,通过asp文件,从SQL Server数据库中读取数据。 1、新建一个网站。 2、在网站目录下新建一个txt文档,改名为datasource.asp,内容为: ...
  • lucky51222
  • lucky51222
  • 2016年04月20日 19:55
  • 1438

ASP中实现树状菜单

在中加 定义菜单的函数function Tree()  //树状菜单对象{  this.start=function()  //菜单开始,bTop表示是否为最外层。  {    document.wr...
  • guanzg
  • guanzg
  • 2006年05月17日 15:52
  • 7729

asp实现树形菜单

%数据库连接set conn=Server.CreateObject("ADODB.Connection")conn.open "driver={SQL Server};server=chaiwei;...
  • lvlingwy
  • lvlingwy
  • 2007年05月30日 13:53
  • 1354

Ajax实现动态获取数据的树状菜单(代码)

  • 2009年08月14日 11:06
  • 491KB
  • 下载

ajax 动态更新树形菜单

  • 2010年06月07日 17:10
  • 11KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯ajax+sqlserver无限级树形菜单.
举报原因:
原因补充:

(最多只允许输入30个字)