没有找到合适的产品?
联系客服协助选型:023-68661681
提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
转帖|其它|编辑:郝浩|2008-09-03 11:30:17.000|阅读 2200 次
概述:JavaScript + XML树型菜单
# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>
思路:利用ASP读取数据库数据,生成XML文件,然后用JS调入XML数据生成树型菜单
1.数据结构
表名:InfoClass
字段名称 数据类型 说明
SID int 类别ID
SName nvarchar(50) 类别名称
ParentID int 父类ID,根分类父ID为0
2.ASP生成XML文件程序
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
Session.CodePage = "65001"
Response.Charset = "utf-8"
Call InfoClass()
Sub BuildXMLStr(pid,str) ''递归类别及其子类别存入字符串
Dim crs,tempStr
Set crs=Server.CreateObject("ADODB.Recordset")
Set crs=cn.Execute("Select SID,SName,ParentID From [InfoClass] Where ParentID="&pid&" Order By ParentID Asc,SID Desc")
Do While (crs.Eof=False)
tempStr = " id=''" & crs("SID") &"''"
If (crs("ParentID") = 0) Then
str = str & "<rootLevel" & tempStr & ">" & vbcrlf
str = str & "<selfName>" & crs("SName") & "</selfName>" & vbcrlf
Else
str = str & "<level" & tempStr & ">" & vbcrlf
str = str & "<selfName>" & crs("SName") & "</selfName>" & vbcrlf
str = str & "<parentID>" & crs("parentID") & "</parentID>" & vbcrlf
End If
Call BuildXMLStr(crs("SID"),str) ''递归调用
If (crs("ParentID") = 0) Then
str = str & "</rootLevel>" & vbcrlf
Else
str = str & "</level>" & vbcrlf
End If
crs.MoveNext()
Loop
crs.Close():Set crs=Nothing
End Sub
Sub SaveXMLFile(str)
Dim stream
Set stream = Server.CreateObject("ADODB.Stream")
stream.Type = 2
stream.Mode = 3
stream.Charset = "utf-8"
stream.Open()
stream.WriteText(str)
stream.SaveToFile Server.MapPath("/XML/InfoClass.xml"),2
stream.Close()
Set stream = Nothing
End Sub
Sub InfoClass()
Response.ContentType = "text/xml"
Dim str
str = "<?xml version=''1.0'' encoding=''utf-8''?>" & vbcrlf
str = str & "<menu>" & vbcrlf
Call BuildXMLStr(0,str)
str = str & "</menu>"
Call SaveXMLFile(str)
Response.ContentType = "text/html"
End Sub
%>
3.XML文件结构
<?xml version=''1.0'' encoding=''utf-8''?>
<menu>
<rootLevel id=''2''>
<selfName>美国</selfName>
</rootLevel>
<rootLevel id=''1''>
<selfName>中国</selfName>
<level id=''4''>
<selfName>河南</selfName>
<parentID>1</parentID>
</level>
<level id=''3''>
<selfName>山东</selfName>
<parentID>1</parentID>
<level id=''6''>
<selfName>菏泽</selfName>
<parentID>3</parentID>
<level id=''8''>
<selfName>曹县</selfName>
<parentID>6</parentID>
</level>
<level id=''7''>
<selfName>东明</selfName>
<parentID>6</parentID>
</level>
</level>
<level id=''5''>
<selfName>济南</selfName>
<parentID>3</parentID>
</level>
</level>
</rootLevel>
</menu>
4.JavaScript构建树型菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript + XML树型菜单</title>
<style type="text/css">
li.plus
{
list-style-type:none;
list-style-image:url(Images/Plus.png); /*展开时图片,如"+"*/
cursor:hand;
}
li.minus
{
list-style-type:none;
list-style-image:url(Images/Minus.png); /*折叠时图片,如"-"*/
cursor:hand;
}
li.item
{
list-style-type:none;
list-style-image:url(Images/Item.png); /*无子项目时图片*/
cursor:hand;
}
</style>
</head>
<body>
<ul id="tree">
<li>树</li>
</ul>
<script language="javascript" type="text/javascript">
treeMenu("tree"); //树
function createXMLDom() //创建XMLDOM对象函数,跨浏览器解决方案
{
var xmlDom;
if (window.ActiveXObject) //IE
{
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
xmlDom.async = false;
xmlDom.load("/XML/InfoClass.xml");
if (xmlDom.parseError.errorCode != 0)
{
window.alert("XML文件加载错误. errorCode:" + xmlDom.parseError.errorCode + " reason:" + xmlDom.parseError.reason);
return false;
}
else
{return xmlDom;}
}
else if (document.implementation && document.implementation.createDocument) //FireFox
{
xmlDom = document.implementation.createDocument("","",null);
xmlDom.async = false;
xmlDom.load("/XML/InfoClass.xml");
return xmlDom;
}
else
{
window.alert("不支持XMLDOM对象");
return false;
}
}
function treeMenu(ulID)
{
var xmlDom = createXMLDom(); //创建XMLDOM对象
var menu = xmlDom.documentElement; //xml文档根节点
var rootLevels = menu.getElementsByTagName("rootLevel"); //一级分类集合
var ul = document.getElementById(ulID);
for (var i=0;i<rootLevels.length;i++) //循环显示一级分类
{
var selfID = rootLevels[i].getAttribute("id");
var selfName = rootLevels[i].getElementsByTagName("selfName")[0].firstChild.nodeValue;
var li = document.createElement("li");
li.innerHTML = selfName;
li.id = selfID;
var levels = rootLevels[i].getElementsByTagName("level"); //集合
if (levels.length > 0) //有子类
{
li.className = "plus";
li.onclick = function () {liClick(this,this.id,xmlDom);} //单击事件
}
else //无子类
{
li.className = "item";
}
ul.appendChild(li);
}
}
function liClick(li,id,xmlDom,event)
{
var childUL = li.getElementsByTagName("ul"); //ul集合
if (childUL.length > 0)//折叠
{closeChild(li,childUL);}
else //展开
{openChild(li,id,xmlDom);}
cancelBuble(event); //plus停止事件冒泡
}
function openChild(li,id,xmlDom) //展开函数
{
li.className = "minus"; //折叠图标
var levels = xmlDom.documentElement.getElementsByTagName("level"); //level集合
var ul = document.createElement("ul");
for (var m=0;m<levels.length;m++)
{
var selfID = levels[m].getAttribute("id");
var selfName = levels[m].getElementsByTagName("selfName")[0].firstChild.nodeValue;
var parentID = levels[m].getElementsByTagName("parentID")[0].firstChild.nodeValue;
if (id == parentID) //属于id子类
{
var ulli = document.createElement("li");
ulli.innerHTML = selfName;
ulli.id = selfID;
var childLevels = levels[m].getElementsByTagName("level"); //集合
if (childLevels.length > 0) //有子类
{
ulli.className = "plus";
/*停止事件冒泡,跨浏览器解决方案 Start*/
if (window.ActiveXObject) //IE
{ulli.onclick = function () {liClick(this,this.id,xmlDom,event);}} //单击事件
else //FireFox
{ulli.onclick = function (event) {liClick(this,this.id,xmlDom,event);}} //单击
/*停止事件冒泡,跨浏览器解决方案 End*/
}
else //无子类
{
ulli.className = "item";
/*停止事件冒泡,跨浏览器解决方案 Start*/
if (window.ActiveXObject) //IE
{ulli.onclick = function () {cancelBuble(event);}} //item停止事件冒泡
else //FireFox
{ulli.onclick = function (event) {cancelBuble(event);}} //item停止事件冒泡
/*停止事件冒泡,跨浏览器解决方案 End*/
}
ul.appendChild(ulli);
}
}
li.appendChild(ul);
}
function closeChild(li,childUL) //折叠函数
{
li.className = "plus"; //展开图标
for (var j=0;j<childUL.length;j++) //循环删除ul,ul可能有子ul、li孙ul、li
{childUL[j].parentNode.removeChild(childUL[j]);}
}
function cancelBuble(domEvent) //停止事件冒泡函数,跨浏览器解决方案
{
if (window.ActiveXObject) //IE
{domEvent.cancelBubble = true;}
else //FireFox
{domEvent.stopPropagation();}
}
</script>
</body>
</html>
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com
文章转载自:DIY部落面对“数字中国”建设和中国制造2025战略实施的机遇期,中车信息公司紧跟时代的步伐,以“集约化、专业化、标准化、精益化、一体化、平台化”为工作目标,大力推进信息服务、工业软件等核心产品及业务的发展。在慧都3D解决方案的实施下,清软英泰建成了多模型来源的综合轻量化显示平台、实现文件不失真的百倍压缩比、针对模型中的大模型文件,在展示平台上进行流畅展示,提升工作效率,优化了使用体验。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@evget.com
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢
慧都科技 版权所有 Copyright 2003-
2025 渝ICP备12000582号-13 渝公网安备
50010702500608号