ASP.NET无限级树形菜单SQL+XML+TreeView

事实上可以用XmlDataSource就很简单哦!!
只要设置XmlDataSource所对应的xml文档就可以了!!

<!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: xmlTree v1.1 [by Lapuasi.com] </title>
<script type="text/javascript" >
/* JavaScript Document *//*xmlTree v1.2
=================================Infomation
----------------------
Author   : Lapuasi
E-Mail   : [email protected]
WebSite  : http://www.lapuasi.com/javascript
DateTime : 2005-12-25
Example
----------------------
var tree = new xmlTree('tree'); //生成对象
tree.mode = 1; //设置初始模式，默认全部关闭。0全部关闭，1全部展开
tree.createTree(); //输出树
for Internet Explorer, Mozilla Firefox
*/
function xmlTree(name) {
this.name         = name;                   //实例名称
this.xmlFile      = 'xmltree.xml';          //默认xml文件
this.iconPath     = 'images/'               //默认图标路径
this.iconFolder   = 'tree_icon_folder.gif'; //默认文件夹图标
this.iconFile     = 'tree_icon_file.gif';   //默认文件图标
this.iconOpen     = 'tree_arrow_open.gif';  //默认箭头展开图标
this.iconOver     = 'tree_arrow_over.gif';  //默认箭头活动图标
this.iconClose    = 'tree_arrow_close.gif'; //默认箭头关闭图标
this.mode         = 0;                      //初始模式，默认全部关闭。0全部关闭，1全部展开
this.html         = '';                     //最终输出html代码
this.prevTip      = null;                   //上一次被显示的tip的时间编号 (内部使用)
this.prevSelected = null;                   //上一次被选中的节点的自动编号 (内部使用)
}xmlTree.prototype.createXMLDOM = function() { //生成XMLDOM对象
var xmldom;
if (window.ActiveXObject){
var xmldom = new ActiveXObject("Microsoft.XMLDOM");
} else {
if (document.implementation && document.implementation.createDocument) {
var xmldom = document.implementation.createDocument("","doc",null);
}
}
xmldom.async = false;
xmldom.resolveExternals = false;
xmldom.validateOnParse = false;
xmldom.preserveWhiteSpace = true;
return xmldom;
}xmlTree.prototype.createTree = function() { //生成并打印
var xmldom = this.createXMLDOM();
document.write('<div id="tree"><\/div>'); // 树所用层
document.write('<div id="treeTip"><\/div>'); //提示所用层
document.getElementById('treeTip').style.visibility = 'visible';
document.getElementById('treeTip').style.display = 'none';
if (xmldom.load(this.xmlFile)) {
this.createNodes(xmldom);
} else {
this.html = 'Load XML Error';
}
document.getElementById('tree').innerHTML = this.html;
return;
}xmlTree.prototype.getFirstChildData = function(obj, name) { //取得指定名称节点的第一个子节点的数据
var result = '';
if (typeof(obj) == 'object' && name != null && name != '') {
var node = obj.getElementsByTagName(name);
if (node != null && node.length > 0) {
result = node[0].firstChild.data;
}
}
return result;
}xmlTree.prototype.checkChildNodes = function(obj, id) { //检测是否有分支
var result = false;
var nodes = obj.getElementsByTagName('node');
if (nodes != null && nodes.length > 0) {
//var pid;
for (var i = 0; i < nodes.length; i++) {
//pid = nodes[i].getAttribute('parentid');
if (nodes[i].getAttribute('parentid') == id) {
result = true;
break;
}
}
}
return result;
}xmlTree.prototype.createNodes = function(obj, id) { //生成指定编号节点的树
if (typeof(id) == 'undefined') id = null; //如果没有id传入则为根节点
var nodes = obj.getElementsByTagName('node');
if (nodes != null && nodes.length > 0) {
var modeClass, modeSrc, iconClass, iconSrc;
var nid, npid, nname, nicon, nlink, ntarget, nexplain, hasChildNodes;

//判断模式类型，并应用样式
modeClass = 'close';
modeSrc = this.iconPath + this.iconClose;
if (this.mode == 1) {
modeSrc = this.iconPath + this.iconOpen;
modeClass = 'open';
}
if (id == null) modeClass = 'open'; //若为根节点则显示
this.html += '<ul id="tree_' + id + '_c" class="' + modeClass + '">'; for (var i = 0; i < nodes.length; i++) {
npid = nodes[i].getAttribute('parentid');
if (npid == id) {
//初始化
modeClass = 'close'; iconClass = 'icon-file'; iconSrc = this.iconPath + this.iconFile; //取得节点编号并检测
nid = nodes[i].getAttribute('id');
this.html += '<input type=checkbox id="tree_' + nid + '"/><span onclick="' + this.name + '.action(this,event);" onmouseover="' + this.name + '.action(this,event);" onmouseout="' + this.name + '.action(this,event);">';

//取得节点自定义图标
//判断是否含有子节点，并确定箭头和图标的图片及样式
nicon = this.getFirstChildData(nodes[i], 'icon');
hasChildNodes = this.checkChildNodes(obj, nid);
if (hasChildNodes) {
iconClass = '';
iconSrc = this.iconPath + this.iconFolder;
this.html += '<img id="tree_' + nid + '_a" src="' + modeSrc + '" class="arrow" \/>'; //箭头
}
if (nicon != '') iconSrc = nicon;
this.html += '<img id="tree_' + nid + '_i" src="' + iconSrc + '" class="' + iconClass + '" \/>'; //图标 //取得节点连接
nlink = this.getFirstChildData(nodes[i], 'link');
if (nlink != '') {
nlink = ' href="' + nlink + '"';
} else {
nlink = ' href="javascript:;"';
} //取得节点目标
ntarget = this.getFirstChildData(nodes[i], 'target');
if (ntarget != '') {
ntarget = ' target="' + ntarget + '"';
} //取得节点说明
nexplain = this.getFirstChildData(nodes[i], 'explain');
if (nexplain != '') {
nexplain = ' onmouseover="' + this.name + '.treeTips(\'' + nexplain + '\');" onmouseout="' + this.name + '.treeTips();"'
} //取得节点名称
nname = this.getFirstChildData(nodes[i], 'name');
this.html += '<a id="tree_' + nid + '_l" onclick="' + this.name + '.action(this,event);"' + nlink + ntarget + nexplain + '>' + nname + '<\/a><\/span>'; //obj.documentElement.removeChild(nodes[i]);
if (hasChildNodes) this.createNodes(obj, nid); //迭代子节点 this.html += '<\/>';
}
}
this.html += '<\/ul>';
}
return;
}xmlTree.prototype.action = function(obj, e) { //节点操作
e = e ? e : (window.event ? window.event : null); //获取操作类型
e = e.type;
if (obj.tagName == 'A') {
try { this.prevSelected.className = '';}
catch(e) {}
this.prevSelected = obj;
obj.className = 'selected';
}
if (obj.tagName == 'SPAN') {
var arrow = obj.firstChild; //取得箭头对象
var borther = obj;
while (borther.tagName != 'UL') { //取得分支对象
borther = borther.nextSibling;
if (borther == null) break;
}
if (borther != null) {
switch (e) { //检测操作类型并执行相应代码
case 'click':
if (borther.className == 'open') {
borther.className = 'close';
arrow.src = this.iconPath + this.iconClose;
} else {
borther.className = 'open';
arrow.src = this.iconPath + this.iconOpen;
}
break;
case 'mouseover':
if (arrow.tagName == 'IMG' && borther.className == 'close') {
arrow.src = this.iconPath + this.iconOver;
}
break;
case 'mouseout':
if (arrow.tagName == 'IMG' && borther.className == 'close') {
arrow.src = this.iconPath + this.iconClose;
}
break;
}
}
}
return;
}xmlTree.prototype.treeTips = function(msg) { //提示栏
if (this.prevTip != null) clearTimeout(this.prevTip);
var obj = document.getElementById('treeTip');
if (obj != null) {
if (this.treeTips.arguments.length < 1) { // hide
obj.style.display = 'none';
} else { // show
obj.innerHTML = msg;
this.prevTip = setTimeout('document.getElementById("treeTip").style.display = "block"',300);
document.onmousemove = this.moveToMouseLoc;
}
}
return;
}xmlTree.prototype.moveToMouseLoc = function(e) { //移动到鼠标所在位置
var obj = document.getElementById('treeTip');
if (obj != null) {
var offsetX = -10, offsetY = 20;
var x = 0, y = 0;
if (window.event) {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
} else {
x = e.pageX;
y = e.pageY;
}
obj.style.left = x + offsetX + 'px';
obj.style.top = y + offsetY + 'px';
}
return;
}</script>
<link type="text/css" rel="stylesheet" href="css/xmltree.css" />
<style type="text/css">
body {
font-size: 11px;
font-family: Tahoma, Verdana, sans-serif;
text-align: left;
}
div {
margin: auto;
}
</style>
</head><body>
<script type="text/javascript">

</script>
</body>
</html>

<root>
<node id="n1">
<name>我的电脑</name>
<icon>images/tree_icon_computer.gif</icon>
<explain>显示连接到此计算机的驱动器和硬件</explain>
</node>
<node id="2" parentid="n1">
<name>硬盘驱动器 (C:)</name>
<icon>images/tree_icon_driver.gif</icon>
</node>
<node id="3">
<name>网上邻居</name>
<icon>images/tree_icon_net.gif</icon>
<explain>显示到网站，网络计算机和FTP站点的快捷方式</explain>
</node>
<node id="4" parentid="n1">
<name>硬盘驱动器 (D:)</name>
<icon>images/tree_icon_driver.gif</icon>
</node>
<node id="5" parentid="2">
<name>Windows</name>
</node>

</root>

/* CSS Document *//* Tree Style*/
#tree {
width: 200px;
font-size: 12px;
font-family: Tahoma, Verdana, sans-serif;
text-align: left;
}
#tree a {
color: #000000;
font-size: 12px;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
padding: 2px 2px 1px 2px;
cursor: pointer !important;
cursor: hand;
}
#tree a:hover {
color: #000080;
text-decoration: underline;
}
#tree a:active {
background-color: highlight;
}
#tree a.selected {
background-color: buttonface;
}
#tree a.selected:hover {
color: #000000;
text-decoration: underline;
}
#tree img {
border: none;
vertical-align: middle;
margin-right: 3px;
}
#tree img.arrow {
vertical-align: baseline;
}
#tree img.icon-file {
margin-left: 9px;
}
#tree ul {
font-size: 12px;
font-family: Tahoma, Verdana, sans-serif;
margin-left: -30px !important;
margin-left: 10px;
list-style-type: none;
}
#tree ul.open {
display: block;
}
#tree ul.close {
display: none;
}
#tree li {
margin-top: 3px;
}
#treeTip {
position: absolute;
font-size: 12px;
font-family: Tahoma, Verdana, sans-serif;
text-align: left;
background-color: #e5fec7;
border: 1px solid #a6de71;
padding: 3px;
display: none;
z-index: 99;
filter: alpha(opacity=90);
opacity: 0.90;
}

调试易

ASP.NET无限级树形菜单SQL+XML+TreeView

解决方案 »