纯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与SQL Server(一)

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

Bootstrap 树形菜单ajax 后台取值.

BeyondAdmin bootstrap 前端树形菜单后台取值.

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

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

JQuery实现动态生成树形菜单

JQuery实现动态生成树形菜单 有一个需求:菜单导航条需要依据不同的权限动态提取出来。计划是将功能模块与用户权限之间的关系保持到一个配置表中。所以功能菜单的话就需要动态提取出来再显示。借助JQue...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

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

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

推荐web页面开发中11个Javascript(AJAX)树形菜单(树形控件)

树形菜单能很好的呈现菜单项之前的从属关系,结构清晰明了。本文为你收集了11个javascript树形菜单。...

sql 生成菜单列表形菜单(作为笔记记录在这里)

l给你一个例子,跟这个差不多: CREATE TABLE T(ID INT ,PID INT)      INSERT INTO T SELECT 1,0 UNION ALL SELECT 2...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

纯ajax+asp.net+sqlserver多方式分页

分页,WEB程序中最常见的应用。现在很多网站也采了AJAX分页的方法。真的会提高分页速度嘛?我看,不一定,但给用户更好的视觉感,这是肯定的。。本想找在网上找个源码好好学习一下,这样也可以少走一些弯路。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯ajax+sqlserver无限级树形菜单.
举报原因:
原因补充:

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