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 ]
[ 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对象创建失败");
}
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 );
}
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;
}
}
}
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代码段.