客户端生成树的代码

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>

<script language="javascript" type="text/javascript">
 //定义对象实例
 var dhATV = new dhAjaxTreeView();
 //返回对象实例名
 dhATV.treeTagName = "dhATV";
 //设置根节点文字
 dhATV.rootText = "在线教育系统";
 //设置结点文字大小
 dhATV.textsize = "12px";
 //设置图标文件夹
 dhATV.icoFolder = "folder";
 //设置请求地址
 dhATV.postUrl = "getMenu.asp?menuid=0";
 //设置节点事件
 dhATV.nodeEvent = function(cs){vc(cs);}
 //加载树根节点
 dhATV.setup(document.getElementById("tree"));
</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_);
})();

function dhAjaxTreeView(){
 //author:dh20156
 var dh = this;
 //定义实例名
 this.treeTagName = null;
 //定义结点图标文件夹
 this.icoFolder = "folder";
 //定义根结点文字
 this.rootText = "Root";
 //定义结点文字大小
 this.textsize = "12px";
 //定义请求地址
 this.postUrl = "getMenu.asp?menuid=";
 //定义客户端指定结点事件
 this.nodeEvent = function(cs){alert(cs);};
 //定义当前选定结点
 var selectedflag = null;
 //点击节点事件
 this.clickNode = function(obj){
  var otype = obj.className;
  otype = otype.toLowerCase();
  if(otype!="childvalue" && otype!="lastvalue"){
   var ocsd = obj.childNodes[4].style.display;
   ocsd=="block"?this.hideNode(obj):this.showNode(obj);
  }else{
   var fid = obj.getAttribute("fid");
   this.nodeEvent(fid);
  }
 }
 //关闭节点
 this.hideNode = function (obj){
  obj.childNodes[4].style.display = "none";
  this.setIcon(obj,"close");
 }
 //展开节点
 this.showNode = function (obj,otype){
  obj.childNodes[4].style.display = "block";
  var nl = obj.childNodes[4].childNodes.length;
  if(nl==0){
   this.getNode(obj);
  }
  this.setIcon(obj,"open");
 }
 //设置节点样式
 this.setIcon = function (obj,com){
  var rootIconOpen0 = this.icoFolder+"/dashminus.gif";
  var rootIconClose0 = this.icoFolder+"/dashplus.gif";
  var nodeIconOpen0 = this.icoFolder+"/tminus.gif";
  var nodeIconClose0 = this.icoFolder+"/tplus.gif";
  var nodeIconOpen1 = this.icoFolder+"/no.gif";
  var nodeIconClose1 = this.icoFolder+"/nc.gif";
  var lnodeIconOpen0 = this.icoFolder+"/lminus.gif";
  var lnodeIconClose0 = this.icoFolder+"/lplus.gif";

  var otype = obj.className;
  otype = otype.toLowerCase();
  switch(otype){
   case "root":
    if(com=="open"){
     obj.childNodes[0].src=rootIconOpen0;
    }else{
     obj.childNodes[0].src=rootIconClose0;
    }
    break;
   case "childnode":
    if(com=="open"){
     obj.childNodes[0].src=nodeIconOpen0;
     obj.childNodes[1].src=nodeIconOpen1;
    }else{
     obj.childNodes[0].src=nodeIconClose0;
     obj.childNodes[1].src=nodeIconClose1;
    }
    break;
   case "lastnode":
    if(com=="open"){
     obj.childNodes[0].src=lnodeIconOpen0;
     obj.childNodes[1].src=nodeIconOpen1;
    }else{
     obj.childNodes[0].src=lnodeIconClose0;
     obj.childNodes[1].src=nodeIconClose1;
    }
    break;
   default:break;
  }
 }
 //初始化XMLHTTPREQUEST
 this.ajaxInitRV = function (){
  try{
   reqRV = new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   try{
    reqRV = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(oc){
    reqRV = null;
   }
  }

  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;
 }
}

posted @ 2009-03-23 17:54  LiMeteor  阅读(275)  评论(0编辑  收藏  举报