关闭

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

标签: ajaxsqlserverxmlhttprequestnulljavascriptstatistics
10225人阅读 评论(6) 收藏 举报
分类:

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


 

2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:35591次
    • 积分:505
    • 等级:
    • 排名:千里之外
    • 原创:14篇
    • 转载:1篇
    • 译文:0篇
    • 评论:12条
    最新评论