`

XML+Javascript树状菜单

阅读更多
var ImgArr = new Array();
var level = 0;
var vid = 0;
var HTML = "";
var img = "";
function getSubject() {
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("Work.xml");
if (xmlDoc.parseError.errorCode != 0) {
  alert(xmlDoc.parseError.reason);
  return;
} else {
  var nodes = xmlDoc.documentElement.childNodes;
  for (var i = 0; i < nodes.length; i++) {
   img = "";
   if (nodes(i).nodeName == "tree") {
    vid++;
    if (i == nodes.length - 1) {
     ImgArr[level] = "<img src='images/L+.gif' + vid + "' " + vid + "')>";
     img = ImgArr[level];
     readTree(nodes(i), true);
    } else {
     ImgArr[level] = "<img src='images/T+.gif' + vid + "' " + vid + "')>";
     img = ImgArr[level];
     readTree(nodes(i), false);
    }
   } else {
    if (nodes(i).nodeName == "node") {
     img = "<img src='images/T.gif'>";
     if (i == nodes.length - 1) {
      img = "<img src='images/L.gif'>";
     }
     readNode(nodes(i));
    }
   }
  }
}
delete (xmlDoc);
window.left.innerHTML = HTML;
return;
}
function readTree(cI, sp) {
var nodes = cI.childNodes;
var menuHTML = img;
menuHTML += "<img src='images/";
menuHTML += cI.selectNodes("image")(0).text;
menuHTML += "'>";
menuHTML += "<a href='";
if (cI.selectNodes("link")(0).text != "") {
  menuHTML += cI.selectNodes("link")(0).text;
} else {
  menuHTML += "#";
}
if (cI.selectNodes("target")(0).text != "") {
  menuHTML += "' target='" + cI.selectNodes("target")(0).text;
}

menuHTML += "' " + vid + "')";
menuHTML += " title='";
menuHTML += cI.selectNodes("title")(0).text;
menuHTML += "'>";
menuHTML += cI.selectNodes("text")(0).text;
menuHTML += "</a><br>\n";
HTML += menuHTML;
HTML += "<div + vid + "' style='display:none'>\n";
ImgArr[level] = "<img src='images/i.gif'>";
if (sp) {
  ImgArr[level] = "<img src='images/white.gif'>";
}
for (var i = 0; i < nodes.length; i++) {
  level++;
  ImgArr[level] = "<img src='images/i.gif'>\n";
  if (sp) {
   ImgArr[level] = "<img src='images/white.gif'>\n";
  }
  img = "";
  var tempImg = "";
  for (var j = 0; j < level; j++) {
   tempImg += ImgArr[j];
  }
  img = tempImg;
  if (nodes(i).nodeName == "tree") {
   vid++;
   if (i == nodes.length - 1) {
    img += "<img src='images/L+.gif' + vid + "' " + vid + "')>";
    readTree(nodes(i), true);
   } else {
    img += "<img src='images/T+.gif' + vid + "' " + vid + "')>";
    readTree(nodes(i), false);
   }
   img = "";
  } else {
   if (nodes(i).nodeName == "node") {
    if (i == nodes.length - 1) {
     img += "<img src='images/L.gif'>";
    } else {
     img += "<img src='images/T.gif'>";
    }
    readNode(nodes(i));
   }
  }
  level--;
}

HTML += "</div>\n";
return;
}
function readNode(cI) {
//alert("ok");
var nodeHTML = img;
nodeHTML += "<img src='images/";
nodeHTML += cI.selectNodes("image")(0).text;
nodeHTML += "'>";
nodeHTML += "<a href='";
nodeHTML += cI.selectNodes("link")(0).text;
if (cI.selectNodes("target")(0).text != "") {
  nodeHTML += "' target='" + cI.selectNodes("target")(0).text;
}
nodeHTML += "' title='";
nodeHTML += cI.selectNodes("title")(0).text;
nodeHTML += "'>";
nodeHTML += cI.selectNodes("text")(0).text;
nodeHTML += "</a><br>\n";
HTML += nodeHTML;
return;
}

function divshow(vid) {
if (document.all["div" + vid].style.display == "none") {
  document.all["div" + vid].style.display = "";
  document.all["f" + vid].src = document.all["f" + vid].src.replace("+", "-");
} else {
  document.all["div" + vid].style.display = "none";
  document.all["f" + vid].src = document.all["f" + vid].src.replace("-", "+");
}
return;
}


<?xml version="1.0" encoding="gb2312"?>
<treeview>
 <tree >
  <text>通道管理</text>
  <target>workMain</target>
  <title>通道管理</title>
  <link>smsc.list</link>
  <image>tongdao.gif</image>
  <node>
   <text>通道列表</text>
   <target>workMain</target>
   <title>所有通道</title>
   <link>smsc.list</link>
   <image>list.gif</image>
  </node>
  <node>
   <text>添加通道</text>
   <target>workMain</target>
   <title>添加通道</title>
   <link>smsc.addtd</link>
   <image>html.gif</image>
  </node>
 </tree>
 <tree >
  <text>参数管理</text>
  <target>workMain</target>
  <title>参数管理</title>
  <link>smsc.manager</link>
  <image>sys.gif</image>
  <node>
   <text>系统设置</text>
   <target>workMain</target>
   <title>系统设置</title>
   <link>smsc.sysset</link>
   <image>html.gif</image>
  </node>
  <node>
   <text>通道设置</text>
   <target>workMain</target>
   <title>通道设置</title>
   <link>smsc.tdset</link>
   <image>html.gif</image>
  </node>
 </tree>

 <node>
  <text>权限管理</text>
  <target>workMain</target>
  <title>设置用户访问权限</title>
  <link>smsc.userAccess</link>
  <image>set.gif</image>
 </node>
 <tree >
  <text>插件管理</text>
  <target>workMain</target>
  <title>插件管理</title>
  <link>smsc.plugManager</link>
  <image>pulg.gif</image>
  <node>
   <text>编辑</text>
   <target>workMain</target>
   <title>编辑</title>
   <link>smsc.plugE</link>
   <image>html.gif</image>
  </node>
  <node>
   <text>插件平台</text>
   <target>workMain</target>
   <title>插件平台</title>
   <link>smsc.plugL</link>
   <image>html.gif</image>
  </node>
 </tree>
 <tree >
  <text>ctc021</text>
  <target>workMain</target>
  <title>ctc021管理</title>
  <link>smsc.sysset</link>
  <image>folder.gif</image>
  <node>
   <text>ctc021</text>
   <target>workMain</target>
   <title>ctc021</title>
   <link>smsc.main?name=ctc025</link>
   <image>html.gif</image>
  </node>
  <node>
   <text>ctc021日志</text>
   <target>workMain</target>
   <title>ctc021日志</title>
   <link>smsc.log?name=ctc021</link>
   <image>html.gif</image>
  </node>
 </tree>
 <tree >
  <text>cnc025</text>
  <target>workMain</target>
  <title>cnc025管理</title>
  <link>smsc.sysset</link>
  <image>folder.gif</image>
  <node>
   <text>cnc025</text>
   <target>workMain</target>
   <title>cnc025</title>
   <link>smsc.main?name=ctc025</link>
   <image>html.gif</image>
  </node>

  <node>
   <text>cnc025日志</text>
   <target>workMain</target>
   <title>cnc025日志</title>
   <link>smsc.log?name=ctc025</link>
   <image>html.gif</image>
  </node>
 </tree>
 <node>
  <text>修改管理员密码</text>
  <target>workMain</target>
  <title>修改管理员登录系统密码</title>
  <link>smsc.resetPassword</link>
  <image>set.gif</image>
 </node>
</treeview>


  • 大小: 13.2 KB
分享到:
评论

相关推荐

    javascript+xml树形菜单

    JavaScript 和 XML 结合实现的树形菜单是一种常见的前端交互设计,尤其在早期的网页开发中较为流行。在本文中,我们将深入探讨如何使用 JavaScript 解析 XML 文件并构建一个仅适用于 Internet Explorer 的树形菜单。...

    Jsp+XML树状菜单类库源码

    - **层级结构**:元素可以嵌套,形成树形结构,适合表示菜单数据。 - **命名空间(Namespaces)**:避免标签冲突,特别是在集成多个数据源时。 - **DTD或XSD验证**:定义元素的约束,确保数据的正确性。 ### 3. JSP...

    js+jsp树形菜单

    总之,"js+jsp树形菜单"是一个融合了前端与后端技术的实践,它展示了如何利用JavaScript和JSP协同工作,为用户提供交互性强、数据驱动的菜单界面。理解并掌握这一技术,对于Web开发者来说是非常有价值的。

    javascript操作xml生成树形菜单

    在本文中,我们将探讨如何使用JavaScript操作XML文档来生成树形菜单。树形菜单是一种常见的用户界面元素,用于组织和展示层次结构的数据,如网站导航或文件系统。在这个例子中,我们将使用提供的XML数据来构建这样一...

    javascript+xml无线级树形菜单

    JavaScript 和 XML 无线级树形菜单是一种常见的网页交互设计,用于组织和展示复杂的数据结构,尤其是在需要层次化数据展示的场合,例如网站导航、文件系统或者数据库结构等。本知识点将深入探讨如何利用 JavaScript ...

    java解析xml动态生成树形菜单结构

    前端部分,`JavaScript`库如`JSTree`(压缩包中的`JSTREE`可能就是这个库的文件)提供了丰富的API和插件,使得在浏览器中生成和操作树形菜单变得简单。`JSTree`支持JSON和XML等多种数据源,与后端的Java接口完美对接...

    jstree+JS树形菜单合集

    "树形菜单Ajax实现"涉及到异步JavaScript和XML技术,Ajax允许在不刷新整个页面的情况下更新部分网页内容。在树形菜单中应用Ajax,意味着用户在点击节点时,可以通过Ajax请求后台数据,动态加载子节点,提高了用户...

    javascript+php 树形菜单在网页设计中应用

    首先,JavaScript 通常用于处理客户端的交互逻辑,例如控制树形菜单的展开和收缩。在描述中提到,大多数树形菜单的实现基于 CSS 的 `display` 属性,通过切换这个属性的值来控制元素的可见性。通过监听鼠标事件(如 ...

    jsp+ajax树状菜单

    客户端收到JSON数据后,JavaScript解析这个响应,并使用DOM操作方法(如`document.createElement`,`appendChild`等)动态地将新的菜单项添加到已有的树状菜单中。这样,用户就可以看到菜单在无需刷新页面的情况下...

    struts+hibernate树形菜单

    当我们需要在Web应用中实现树形菜单时,通常会结合这两个框架来完成。 树形菜单是一种常见的用户界面元素,它以层级结构展示数据,例如网站导航、文件系统或者组织架构。在Web应用中,用户可以通过点击展开或折叠...

    struts简单示例+js树形菜单

    JS树形菜单则是利用JavaScript语言实现的一种用户界面元素,用于展示层次结构数据,通常用在网站导航或文件目录结构展示。 这个“struts简单示例+js树形菜单”项目可能包含以下内容: 1. **Struts框架基础**: - ...

    JQuery 实现XML树形菜单

    **jQuery 实现XML树形菜单**\n\n在网页开发中,树形菜单是一种常见的交互元素,用于组织和展示层次化的信息。jQuery 是一个广泛使用的JavaScript库,它提供了丰富的API来简化DOM操作,使得实现这样的功能变得更加...

    ASP+JS树形菜单数据库版带后台 -ASP源码.zip

    ASP和JavaScript可以协同工作,用JSON或XML数据格式在服务器端构建菜单结构,然后通过JavaScript在客户端渲染成可交互的树形菜单。 6. AJAX(Asynchronous JavaScript and XML):尽管名称中有XML,但现代AJAX更多...

    利用javascript编写的树形菜单。

    在标题和描述中提到的“利用javascript编写的树形菜单”是关于如何使用JavaScript实现这样的交互功能。 创建JavaScript树形菜单主要涉及以下几个关键知识点: 1. DOM操作:Document Object Model (DOM) 是HTML和...

    基于XML的树形菜单组件

    总结来说,基于XML的树形菜单组件利用了XML的结构化特性,通过JavaScript进行解析和渲染,实现了动态、灵活的菜单系统。这样的组件对于网站或应用的导航至关重要,能有效提升用户的交互体验。在实际开发中,还需要...

    javascript树形菜单

    JavaScript树形菜单是一种在网页中展示层次结构数据的交互式组件。它们通常用于网站的导航、文件目录浏览或数据组织。在这个压缩包中,我们有几种不同的JavaScript树形菜单实现,包括`dtree`和`dhtmlxtree`,以及...

Global site tag (gtag.js) - Google Analytics