客户端生成树的代码

最新推荐文章于 2025-08-21 23:22:44 发布

weixin_30849403

最新推荐文章于 2025-08-21 23:22:44 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/snwsky/archive/2007/04/20/721026.html

本文介绍了一个用于在线教育系统的自定义菜单树组件的实现细节。该组件使用JavaScript和Ajax技术，通过动态加载子菜单来构建一个响应式的树形结构。文章提供了完整的代码示例，包括如何设置树节点的外观、事件处理以及与服务器端进行交互的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.asp文件,调用的代码
<script language="javascript" type="text/javascript" src="dhATV.js"></script>
<script language="javascript" type="text/javascript">
function vc(cs){
window.open('test.asp?classid='+cs);
}
</script>

以下是dhATV.js 代码,看改什么地方，可以实现我想要的功能
/** Mozilla兼容MsIE脚本，stylesheet扩展部分。
* o stylesheet.addRule()
*/
(function () {
if (! window.CSSStyleSheet) return;
function _ss_GET_rules_ () {
return this.cssRules;
}
var _ss = CSSStyleSheet.prototype;
_ss.addRule = function(sSelector, sRule) {
this.insertRule(sSelector + "{" + sRule + "}", this.cssRules.length);
}
_ss.__defineGetter__("rules", _ss_GET_rules_);
})();

  if(!reqRV && typeof XMLHttpRequest!="undefined"){
   reqRV = new XMLHttpRequest();
  }

  return reqRV;
}
//加载节点
this.getNode = function (obj){
  var ajaxRV = null;
  var reqRV = this.ajaxInitRV();
  var fid = obj.getAttribute("fid");
  var url = this.postUrl+fid;
  obj.childNodes[4].innerHTML = "<div><img src='"+this.icoFolder+"/l.gif' align='absmiddle' /><img src='"+this.icoFolder+"/topic.gif' align='absmiddle' /> loading...</div>";
  if(reqRV != null){
   reqRV.onreadystatechange = function() {
    if (reqRV.readyState == 4) {
     if (reqRV.status == 200) {
      ajaxRV = reqRV.responseText;
      ajaxRV = unescape(ajaxRV);
      ajaxRV = ajaxRV.replace(/\[dhATV\]/ig,dh.treeTagName);
      ajaxRV = ajaxRV.replace(/\[dhfolder\]/ig,dh.icoFolder);
      obj.childNodes[4].innerHTML = ajaxRV;
      reqRV = null;
     }else{
      //failed
      obj.childNodes[4].innerHTML = "";
     }
    }
   }
   //异步加载
   reqRV.open("POST", encodeURI(url), true);
          reqRV.send(null);
  }
}
//对象实例化
this.setup = function(obj){
  if(typeof document.styleSheets=="undefined" || document.styleSheets!="OBJECT"){
   var styleObj = document.createElement("STYLE");
   document.getElementsByTagName("HEAD")[0].appendChild(styleObj);
  }
  var oStyleSheet = document.styleSheets[0];
  oStyleSheet.addRule(".root","margin:0px;");
  oStyleSheet.addRule(".root *","font-size:"+this.textsize+";");
  oStyleSheet.addRule(".root div","margin-left:17px;white-space: nowrap;");
  oStyleSheet.addRule(".childnode","background:url("+this.icoFolder+"/i.gif) left top repeat-y;}");
  oStyleSheet.addRule(".childvalue","background:url("+this.icoFolder+"/i.gif) left top repeat-y;");
  oStyleSheet.addRule(".nodetext","cursor:pointer;");
  oStyleSheet.addRule(".nodepanel","display:none;");
  var rootStr = "<div class=\"root\" fid=\"0\"><img src=\""+this.icoFolder+"/dashplus.gif\" align=\"absmiddle\" onclick=\""+this.treeTagName+".clickNode(this.parentNode);\" /><img src=\""+this.icoFolder+"/ro.gif\" align=\"absmiddle\" /> <span class=\"nodetext\" onclick=\""+this.treeTagName+".clickNode(this.parentNode);\">"+this.rootText+"</span><span class=\"nodepanel\" /></div>"
  obj.innerHTML = rootStr;
}
}