无限级树形结构用ajax,xml来实现

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>无限级树形结构</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
FONT-SIZE: 9pt; CURSOR: default; FONT-FAMILY: 宋体
}
.container {
BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: black 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: black 1px solid; WIDTH: 13px; PADDING-TOP: 5px; BORDER-BOTTOM: black 1px solid; POSITION: relative; TOP: 4px; HEIGHT: 13px; BACKGROUND-COLOR: #ffffff
}
SPAN.clsCollapse {
PADDING-LEFT: 1px; FONT-SIZE: 13px; OVERFLOW: hidden; LINE-HEIGHT: 3px; PADDING-TOP: 26px; TOP: 3px
}
SPAN.clsExpand {
PADDING-LEFT: 1px; FONT-SIZE: 13px; OVERFLOW: hidden; LINE-HEIGHT: 3px; PADDING-TOP: 3px
}
SPAN.clsLeaf {
PADDING-LEFT: 3px; FONT-SIZE: 11px; OVERFLOW: hidden; LINE-HEIGHT: 0px; TOP: 0px
}
SPAN.clsLabel {
BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 3px; OVERFLOW: hidden; BORDER-LEFT: #ffffff 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #ffffff 1px solid; HEIGHT: 17px
}
SPAN.clsMouseOver {
BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 3px; OVERFLOW: hidden; BORDER-LEFT: #999999 1px solid; CURSOR: hand; PADDING-TOP: 2px; BORDER-BOTTOM: #999999 1px solid; POSITION: relative; HEIGHT: 17px; BACKGROUND-COLOR: #cccccc
}
SPAN.clsMouseOut {
BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 3px; OVERFLOW: hidden; BORDER-LEFT: #ffffff 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #ffffff 1px solid; POSITION: relative; HEIGHT: 17px; BACKGROUND-COLOR: #cccccc
}
SPAN.clsMouseDown {
BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 3px; OVERFLOW: hidden; BORDER-LEFT: #999999 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #999999 1px solid; POSITION: relative; HEIGHT: 17px; BACKGROUND-COLOR: #999999
}
SPAN.clsCurrentHasFocus {
BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 3px; OVERFLOW: hidden; BORDER-LEFT: #999999 1px solid; CURSOR: hand; PADDING-TOP: 2px; BORDER-BOTTOM: #999999 1px solid; POSITION: relative; HEIGHT: 17px; BACKGROUND-COLOR: #ffffff
}
SPAN.clsNotReady {
BORDER-RIGHT: #ff3300 1px solid; BORDER-TOP: #ff3300 1px solid; PADDING-LEFT: 3px; OVERFLOW: hidden; BORDER-LEFT: #ff3300 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #ff3300 1px solid; POSITION: relative; HEIGHT: 17px; BACKGROUND-COLOR: #6487dc
}
DIV.focusColor {
backgroud-color: red
}
DIV.normalColor {
backgroud-color: green
}
</STYLE>

<META content="MSHTML 6.00.2800.1522" name=GENERATOR></HEAD>
<BODY onselectstart=SelectStart() style="OVERFLOW: auto" bgColor=#f1f1f1
leftMargin=2 topMargin=10 onload=init() rightMargin=2 marginwidth="0">
<DIV id=pid0 style="PADDING-LEFT: 6px">正在加载页面其他元素，请稍侯……</DIV>
<SCRIPT language=Javascript1.2>
<!--
var rootUrl = "http://www.youjia.net/tree/";
var strType = ""

// 初始化树
function init()
{
document.getElementById("pid0").innerText = ""
getXML(0);
}

/* 以下代码实现鼠标事件的样式操作 */
function SelectStart()
{
window.event.cancelBubble = true;
window.event.returnValue = false;
return false;
}

function onMouseOver()
{
if(window.event.srcElement.tagName=="SPAN" && window.event.srcElement.className=="clsLabel")
{
window.event.srcElement.className="clsMouseOver"
window.event.srcElement.title=window.event.srcElement.innerText
}
}
function onMouseOut()
{

if(window.event.srcElement.tagName=="SPAN" && window.event.srcElement.className=="clsMouseDown")
{
window.event.srcElement.className="clsCurrentHasFocus"
return
}

if(window.event.srcElement.tagName=="SPAN" && window.event.srcElement.className=="clsMouseOver")
window.event.srcElement.className="clsLabel"
}

function onMouseDown()
{
for(i=0;i<document.getElementsByTagName("SPAN").length;i++)
{
if(document.getElementsByTagName("SPAN")[i].className=="clsCurrentHasFocus") document.getElementsByTagName("SPAN")[i].className="clsLabel"
}

if(window.event.srcElement.tagName=="SPAN" && (window.event.srcElement.className=="clsMouseOver" || window.event.srcElement.className=="clsLabel"))
{
window.event.srcElement.className="clsMouseDown"
window.open(window.event.srcElement.href)
}
}

window.document.onmouseover = onMouseOver
window.document.onmouseout = onMouseOut
//window.document.onmousedown = onMouseDown

/// 得到所给pid的子节点数据。
/// 定义全局变量

var oDiv      //添加用的节点
var nP       //DIV的 padding-left
var xh       //xmlhttp
var checkTimeOut  //记录是否超时
var oTimerId    //计时器事件句柄
var intTimer    //计时器到时标识
function getXML(pid)
{
xh = new ActiveXObject("Microsoft.XMLHTTP")
oDiv = document.createElement("DIV");
nP = parseInt(document.getElementById("pid" + pid).style.paddingLeft)
oDiv.innerHTML = "<div style='display:;padding-left:"+nP+"px'><span class='container'><span class='clsLeaf'>.</span></span> " + "<span class='clsNotReady' style='color:white'>正在装载栏目数据，请稍侯.......</span></div>"
oDiv.style.paddingLeft= nP + "px"
oDiv.style.display= ""
document.all["pid" + pid].appendChild(oDiv);

xh.onreadystatechange = getReady
xh.open("GET",rootUrl + "service.asp?pid=" + pid,true)
xh.send()

}

function getReady()
{
if(xh.readyState==4)
{
  if(xh.status==200)
  {
   var xmldom = new ActiveXObject("Microsoft.XMLDOM")
   xmldom = xh.responseXML
   if(xmldom == null || xmldom.documentElement == null)
   {
    oDiv.innerHTML = "<div style='display:;padding-left:"+nP+"px'><span class='container'><span class='clsLeaf'>.</span></span> " + "<span class='clsNotReady'>抱歉，装载数据失败。原因：返回的数据不是一个XML结构的文档。</span></div>"
    return
   }

   var nodes = xmldom.documentElement.selectNodes("/root/item")
   if(nodes == null )
   {
    oDiv.innerHTML = "<div style='display:;padding-left:"+nP+"px'><span class='container'><span class='clsLeaf'>.</span></span> " + "<span class='clsNotReady'>抱歉，装载数据失败。原因：没有返回正确的XML结构格式，</span></div>"
    return
   }

function hideshow(o,oId)
{

var subjectid = oId.substr(3,oId.length)
if (o.status=="")
{
  getXML(subjectid)
  o.innerText="-"
  o.status="old"
  return
}
var oChild = null
for(var i=0;i<document.getElementById(oId).childNodes.length;i++)
{
  if(document.all[oId].childNodes(i).tagName=="DIV") oChild = document.getElementById(oId).childNodes(i)
}
if(oChild==null) return

if(oChild.style.display=="")
{
  o.innerText="+"
  oChild.style.display="none"
}
else
{
  o.innerText="-"
  oChild.style.display=""
}
event.returnValue=false
return false
}

function addToRadio(o)
{
}

function move(fbox,tbox)
{
var i = 0;
if(fbox.value != "")
{
  var no = new Option();
  no.value = fbox;
  no.text = fbox;
  tbox.options[tbox.options.length] = no;
  fbox.value = "";
}
}

//-->
</SCRIPT>

server.asp
<%@ Language=VBScript %>
<%
Response.CharSet = "gb2312"
Response.ContentType = "text/xml"
On Error Resume Next
Dim strSQL,rs,pid,strXML,cn

pid = ReplaceBadChar(Request.QueryString("pid"))

strSQL="select ClassID,ClassName,Child From ArticleClass where ParentID=" & pid & " order by classID"

Set cn = Server.CreateObject("ADODB.Connection")

cn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("ss.mdb")
Set rs = Server.CreateObject("ADODB.RecordSet")
rs.Open strSQL,cn,1,3
strXML = "<?xml version=""1.0"" encoding=""gb2312""?>"
strXML= strXML & "<root>"
While Not rs.EOF
strXML= strXML & "<item>"
strXML= strXML & "<Child>" & rs("Child") & "</Child>"
strXML= strXML & "<Title>" & rs("ClassName") & "</Title>"
strXML= strXML & "<id>" & rs("ClassID") & "</id>"
strXML= strXML & "</item>"
rs.MoveNext
Wend
strXML= strXML & "</root>"

Response.Write strXML

rs.Close
Set rs = Nothing
cn.Close
Set cn = Nothing

'**************************************************
'函数名：ReplaceBadChar
'作用：过滤非法的SQL字符
'参数：strChar-----要过滤的字符
'返回值：过滤后的字符
'**************************************************
function ReplaceBadChar(strChar)
if strChar="" then
ReplaceBadChar=""
else
ReplaceBadChar=replace(replace(replace(replace(replace(replace(replace(strChar,"'",""),"*",""),"?",""),"(",""),")",""),"<",""),".","")
end if
end function
%>

posted on 2006-04-03 15:07 汪杰阅读(1091) 评论(1) 编辑收藏引用所属分类: javascript 、hengxing网站js

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

积分与排名

最新随笔

最新评论

阅读排行榜

评论排行榜