`

js创建树形结构

阅读更多

//makeTree.js

/*function getAllProfiles(){   
 var hql="from ProfilesHBM hbm";
 ProfilesDAO.findWithHQL(hql,gotAllProfiles);
}
function gotAllProfiles(data){
 MakeTree(data);
}
function MakeTree(data){
 var id="";
 var name="";
 var url="";
 var pobj="";
 var pid="";
 var pname="";
 window.tree = new MzTreeView("tree");
 tree.setIconPath("images/tree/");
 for(i=0;i<data.length;i++){
  //alert(data[i].roles.length);
  id=data[i].id;//当前目录id
  name=data[i].profileName;//当前目录名称
  pobj=data[i].parentId;//当前对象的父类对象
  if(isNull(pobj)){
   tree.N["0_"+id] = "ctrl:sel;T:"+name;
  }else{
   tree.N[""+pobj.id+"_"+id+""] = "ctrl:sel;T:"+name+";url:"+url;
  }
  
 }
 tree.wordLine = false;
 tree.setTarget("_top");
 document.getElementById("treeMsg").innerHTML=tree.toString();
}*/
//获取tree
function getTree(profiles,index,imgUrl,ischeckbox,isRadio){
 makeTree(profiles,index,imgUrl,ischeckbox,isRadio);
}
//profile对象
function profileObj(id,pid,name,url,isChecked){
 this.id=id;
 this.pid=pid;
 this.name=name;
 this.url=url;
 this.isChecked=isChecked;
}
//构造tree
function makeTree(profiles,index,imgUrl,ischeckbox,isRadio){
 var id="";
 var name="";
 var url="";
 var pid="";
 var isC="";
 if(isNull(index))
  index=getDefaultIndex(profiles);
  window.tree = new MzTreeView("tree");
  tree.setIconPath(imgUrl);
  //alert(profiles.length);
  for(i=0;i<profiles.length;i++){
   var profile=profiles[i];
   id=profile.id;
   name=profile.name;
   url=profile.url;
   pid=profile.pid;
   isC=profile.isChecked;
   //alert(pid+name);
   if(index=='all'){
    if(isNull(pid)){
     tree.N["0_"+id] = "ctrl:sel;T:"+name+";isRadio:"+isRadio+";ischeckbox:"+ischeckbox+";checked:"+isC+"";
    }else{
     //alert(pid+"_"+id);
     tree.N[pid+"_"+id] = "ctrl:sel;T:"+name+";isRadio:"+isRadio+";ischeckbox:"+ischeckbox+";checked:"+isC+"";
    }
   }else{
    if(pid==index || id==index){
     //alert(id);
     if(isNull(pid)){
      tree.N["0_"+id] = "ctrl:sel;T:"+name+";ischeckbox:"+ischeckbox+"";
     }else{
      //alert(pid+"_"+id);
      tree.N[pid+"_"+id] = "ctrl:sel;T:"+name+";url:"+url+";isRadio:"+isRadio+";ischeckbox:"+ischeckbox+"";
     }
    }
   }
  }
  tree.wordLine = false;
  tree.setTarget("content");
  document.getElementById("treeMsg").innerHTML=tree.toString();
  tree.expandAll();
}
//获取默认的index
function getDefaultIndex(profiles){
 var index=1;
 for(i=0;i<profiles.length;i++){
  var obj=profiles[i];
  if(!isNull(obj.pid)){
   index=obj.pid;
   break;
  }
 }
 return index;
}

 

//MzTreeView.js

/*---------------------------------------------------------------------------*\
|  Subject:       Web TreeView Class                                          |
|  Version:       1.0                                                         |
|  Author:        黄方荣【meizz】【梅花雪】                                   |
|  FileName:      MzTreeView.js                                               |
|  Created:       2004-10-18                                                  |
|  LastModified:  2005-03-10                                                  |
|  Download:      http://www.meizz.com/Web/Download/MzTreeView10.rar          |
|  Explain:       http://www.meizz.com/Web/Article.asp?id=436                 |
|  Demo:          http://www.meizz.com/Web/Demo/MzTreeView10.htm              |
|                                                                             |
|                 You may use this code on your item                          |
|                 this entire copyright notice appears unchanged              |
|                 and you clearly display a link to http://www.meizz.com/     |
|                                                                             |
|-----------------------------------------------------------------------------|
|  MSN: huangfr@msn.com   QQ: 112889082   http://www.meizz.com                |
|  CSDN Community ID: meizz      Copyright (c) 2004-2005 meizz                |
\*---------------------------------------------------------------------------*/

//Version: 1.2
//20:31 2007-8-25 http://www.lxasp.com
//为了在大量数据时节省文本大小,修改了接口(请注意大小写):
//
//原来: nodes["pnt_cur"]="text:结点文字;method:js函数()";
//
//改为: N["pnt_cur"]="T:结点文字;C:js函数()";

//MzTreeView1.0网页树类, 在实例化的时候请把实例名作参数传递进来
function MzTreeView(Tname)
{
  if(typeof(Tname) != "string" || Tname == "")
    throw(new Error(-1, '创建类实例的时候请把类实例的引用变量名传递进来!'));
 
  //【property】
  this.url      = "#";
  this.target   = "_self";
  this.name     = Tname;
  this.wordLine = false;
  this.currentNode = null;
  this.useArrow = true;
  this.N = {};
  this.node  = {};
  this.names = "";
  this._d    = "\x0f";
  this.index = 0;
  this.divider   = "_";
  this.node["0"] =
  {
    "id": "0",
    "path": "0",
    "isLoad": false,
    "childNodes": [],
    "childAppend": "",
    "sourceIndex": "0"
  };

  this.colors   =
  {
    "highLight" : "#0A246A",
    "highLightText" : "#FFFFFF",
    "mouseOverBgColor" : "#D4D0C8"
  };
  this.icons    = {
    L0        : 'L0.gif',  //┏
    L1        : 'L1.gif',  //┣
    L2        : 'L2.gif',  //┗
    L3        : 'L3.gif',  //━
    L4        : 'L4.gif',  //┃
    PM0       : 'P0.gif',  //+┏
    PM1       : 'P1.gif',  //+┣
    PM2       : 'P2.gif',  //+┗
    PM3       : 'P3.gif',  //+━
    empty     : 'L5.gif',     //空白图
    root      : 'root.gif',   //缺省的根节点图标
    folder    : 'folder.gif', //缺省的文件夹图标
    file      : 'file.gif',   //缺省的文件图标
    exit      : 'exit.gif'
  };
  this.iconsExpand = {  //存放节点图片在展开时的对应图片
    PM0       : 'M0.gif',     //-┏
    PM1       : 'M1.gif',     //-┣
    PM2       : 'M2.gif',     //-┗
    PM3       : 'M3.gif',     //-━
    folder    : 'folder.gif',

    exit      : 'exit.gif'
  };

  //扩展 document.getElementById(id) 多浏览器兼容性
  //id 要查找的对象 id
  this.getElementById = function(id)
  {
    if (typeof(id) != "string" || id == "") return null;
    if (document.getElementById) return document.getElementById(id);
    if (document.all) return document.all(id);
    try {return eval(id);} catch(e){ return null;}
  };

  //MzTreeView 初始化入口函数
  this.toString = function()
  {
    this.browserCheck();
    this.dataFormat();
    //this.setStyle();// modify by fengxin 2008-04-03
    this.load("0");
    var rootCN = this.node["0"].childNodes;
    var str = "<A id='"+ this.name +"_RootLink' href='#' style='DISPLAY: none'></A>";
    if(rootCN.length>0)
    {
      this.node["0"].hasChild = true;
      for(var i=0; i<rootCN.length; i++)
        str += this.nodeToHTML(rootCN[i], i==rootCN.length-1);
      setTimeout(this.name +".expand('"+ rootCN[0].id +"', true); "+
        this.name +".focusClientNode('"+ rootCN[0].id +"'); "+ this.name +".atRootIsEmpty()",10);
    }

    if (this.useArrow)  //使用方向键控制跳转到上级下级父级子级节点
    {
      if (document.attachEvent)
          document.attachEvent("onkeydown", this.onkeydown);
      else if (document.addEventListener)
          document.addEventListener('keydown', this.onkeydown, false);
    }
    return "<DIV class='MzTreeView' "+
      "onclick='"+ this.name +".clickHandle(event)' "+
      "ondblclick='"+ this.name +".dblClickHandle(event)' "+
      ">"+ str +"</DIV>";
  };

  this.onkeydown= function(e)
  {
    e = window.event || e; var key = e.keyCode || e.which;
    switch(key)
    {
      case 37 : eval(Tname).upperNode(); break;  //Arrow left, shrink child node
      case 38 : eval(Tname).pervNode();  break;  //Arrow up
      case 39 : eval(Tname).lowerNode(); break;  //Arrow right, expand child node
      case 40 : eval(Tname).nextNode();  break;  //Arrow down
    }
  };
};

//浏览器类型及版本检测
MzTreeView.prototype.browserCheck = function()
{
  var ua = window.navigator.userAgent.toLowerCase(), bname;
  if(/msie/i.test(ua))
  {
    this.navigator = /opera/i.test(ua) ? "opera" : "";
    if(!this.navigator) this.navigator = "msie";
  }
  else if(/gecko/i.test(ua))
  {
    var vendor = window.navigator.vendor.toLowerCase();
    if(vendor == "firefox") this.navigator = "firefox";
    else if(vendor == "netscape") this.navigator = "netscape";
    else if(vendor == "") this.navigator = "mozilla";
  }
  else this.navigator = "msie";
  if(window.opera) this.wordLine = false;
};

//给 TreeView 树加上样式设置
MzTreeView.prototype.setStyle = function()
{
  /*
    width: 16px; \
    height: 16px; \
    width: 20px; \
    height: 20px; \
  */
  var style = "<style>"+
  "DIV.MzTreeView DIV IMG{border: 0px solid #FFFFFF;}"+
  "DIV.MzTreeView DIV SPAN IMG{border: 0px solid #FFFFFF;}";
  if(this.wordLine)
  {
    style +="\n    DIV.MzTreeView DIV\n    {\n      height: 20px;"+
      (this.navigator=="firefox" ? "line-height: 20px;" : "" ) +
      (this.navigator=="netscape" ? "" : "overflow: hidden;" ) +"\n    }\n    DIV.MzTreeView DIV SPAN\n    {\n      vertical-align: middle; font-size: 21px; height: 20px; color: #D4D0C8; cursor: default;\n    }\n    DIV.MzTreeView DIV SPAN.pm\n    {\n      width: "+ (this.navigator=="msie"||this.navigator=="opera" ? "11" : "9") +"px;\n      height: "+ (this.navigator=="netscape"?"9":(this.navigator=="firefox"?"10":"11")) +"px;\n      font-size: 7pt;\n      overflow: hidden;\n      margin-left: -16px;\n      margin-right: 5px;\n      color: #000080; \n      vertical-align: middle;\n      border: 1px solid #D4D0C8;\n      cursor: "+ (this.navigator=="msie" ? "hand" : "pointer") +";\n      padding: 0 2px 0 2px;\n      text-align: center;\n      background-color: #F0F0F0;\n    }";
  }
  style += "<\/style>";
  document.write(style);
};

//当根节点为空的时候做的处理
MzTreeView.prototype.atRootIsEmpty = function()
{
  var RCN = this.node["0"].childNodes;
  for(var i=0; i<RCN.length; i++)
  {
    if(!RCN[i].isLoad) this.expand(RCN[i].id);
    if (RCN[i].T=="")
    {
      var node = RCN[i].childNodes[0], HCN  = node.hasChild;
      if(this.wordLine)
      {
        var span = this.getElementById(this.name +"_tree_"+ node.id);
        span = span.childNodes[0].childNodes[0].childNodes[0];
        span.innerHTML = RCN[i].childNodes.length>1 ? "┌" : "─";
      }
      else
      {
        node.iconExpand  =  RCN[i].childNodes.length>1 ? HCN ? "PM0" : "L0" : HCN ? "PM3" : "L3";
        this.getElementById(this.name +"_expand_"+ node.id).src = this.icons[node.iconExpand].src;
      }
    }
  }
};

//初始化数据源里的数据以便后面的快速检索
MzTreeView.prototype.dataFormat = function()
{
  var a = new Array();
  for (var id in this.N) a[a.length] = id;
  this.names = a.join(this._d + this._d);
  this.totalNode = a.length; a = null;
};

//在数据源检索所需的数据节点
//id  客户端节点对应的id
MzTreeView.prototype.load = function(id)
{
  var node = this.node[id], d = this.divider, _d = this._d;
  var sid = node.sourceIndex.substr(node.sourceIndex.indexOf(d) + d.length);
  var reg = new RegExp("(^|"+_d+")"+ sid +d+"[^"+_d+d +"]+("+_d+"|$)", "g");
  var cns = this.names.match(reg), tcn = this.node[id].childNodes; if (cns){
  reg = new RegExp(_d, "g"); for (var i=0; i<cns.length; i++)
  tcn[tcn.length] = this.nodeInit(cns[i].replace(reg, ""), id); }
  node.isLoad = true;
};

//初始化节点信息, 根据 this.N 数据源生成节点的详细信息
//sourceIndex 数据源中的父子节点组合的字符串 0_1
//parentId    当前树节点在客户端的父节点的 id
MzTreeView.prototype.nodeInit = function(sourceIndex, parentId)
{
  this.index++;
  var source= this.N[sourceIndex], d = this.divider;
  var T  = this.getAttribute(source, "T");
  var hint  = this.getAttribute(source, "hint");

  var ctrl = this.getAttribute(source, "ctrl");       //Rexliu modify on 2007-1-23 13:50
  var checked = this.getAttribute(source, "checked"); //Rexliu modifty on 2007-1-23 14:27
 
  var sid   = sourceIndex.substr(sourceIndex.indexOf(d) + d.length);
 
  var ischeckbox=this.getAttribute(source,"ischeckbox"); //modify by fengxin on 2008-04-14
  var isRadio=this.getAttribute(source,"isRadio");//modify by fengxin on 2008-05-08
  this.node[this.index] =
  {
    "id"    : this.index,
    "T"  : T,
    "hint"  : hint ? hint : T,
    "icon"  : this.getAttribute(source, "icon"),
    "path"  : this.node[parentId].path + d + this.index,
    "isLoad": false,
    "isExpand": false,
    "parentId": parentId,
    "parentNode": this.node[parentId],
    "sourceIndex" : sourceIndex,
    "childAppend" : "",
    "ctrl" : ctrl,        //Rexliu modify on 2007-1-23 13:52
    "checked" : checked,   //Rexliu modify on 2007-1-23 14:28
 "ischeckbox":ischeckbox, //modify by fengxin on 2008-04-14
 "isRadio":isRadio  //modify by fengxin on 2008-05-08
  };
     this.N[sourceIndex] = "index:"+ this.index +";"+ source;
     this.node[this.index].hasChild = this.names.indexOf(this._d + sid + d)>-1;
  if(this.node[this.index].hasChild)  this.node[this.index].childNodes = [];
  return this.node[this.index];
};

//从XML格式字符串里提取信息
//source 数据源里的节点信息字符串(以后可以扩展对XML的支持)
//name   要提取的属性名
MzTreeView.prototype.getAttribute = function(source, name)
{
  var reg = new RegExp("(^|;|\\s)"+ name +"\\s*:\\s*([^;]*)(\\s|;|$)", "i");
  if (reg.test(source)) return RegExp.$2.replace(/[\x0f]/g, ";"); return "";
};

//根据节点的详细信息生成HTML
//node   树在客户端的节点对象
//AtEnd  布尔值  当前要转换的这个节点是否为父节点的子节点集中的最后一项
MzTreeView.prototype.nodeToHTML = function(node, AtEnd)
{
  var source = this.N[node.sourceIndex];
  var target = this.getAttribute(source, "target");
  var data = this.getAttribute(source, "data");
  var url  = this.getAttribute(source, "url");
  if(!url) url = this.url;
  if(data) url += (url.indexOf("?")==-1?"?":"&") + data;
  if(!target) target = this.target;

  var id   = node.id;
  var HCN  = node.hasChild, isRoot = node.parentId=="0";
  if(isRoot && node.icon=="") node.icon = "root";
  if(node.icon=="" || typeof(this.icons[node.icon])=="undefined")
    node.icon = HCN ? "folder" : "file";
  node.iconExpand  = AtEnd ? "└" : "├";
 
  //20:03 2007-8-25 可以加自定义的HTML表格到每一项,这是表头部分,在外部定义方法如下:
  //var MzTreeViewTH="<table class='MzTreeViewRow'><tr><td class='MzTreeViewCell0'>";
  var HTMTH="";
  try {
  if ( typeof MzTreeViewTH != "undefined" ) HTMTH=MzTreeViewTH;
  } catch(e){}

  var HTML = "<DIV noWrap='True'><NOBR>"+HTMTH;
  if(!isRoot)
  {
    node.childAppend = node.parentNode.childAppend + (AtEnd ? " " : "│");
    if(this.wordLine)
    {
      HTML += "<SPAN>"+ node.parentNode.childAppend + (AtEnd ? "└" : "├") +"</SPAN>";
      if(HCN) HTML += "<SPAN class='pm' id='"+ this.name +"_expand_"+ id +"'>+</SPAN>";
    }
    else
    {
      node.iconExpand  = HCN ? AtEnd ? "PM2" : "PM1" : AtEnd ? "L2" : "L1";
      HTML += "<SPAN>"+ this.word2image(node.parentNode.childAppend) +"<IMG "+
        "align='absmiddle' id='"+ this.name +"_expand_"+ id +"' "+
        "src='"+ this.icons[node.iconExpand].src +"' style='cursor: "+ (!node.hasChild ? "":
        (this.navigator=="msie"||this.navigator=="opera"? "hand" : "pointer")) +"'></SPAN>";
    }
  }
 
  //取当前结点的外部ID
  var sid = node.sourceIndex.substr(node.sourceIndex.indexOf(this.divider) + this.divider.length);
  //2:06 2007-8-25 增加checkbox控件,修正是否选中问题
  var HTMCHK="",HTMCHKED="";
  if (node.checked=='true'||node.checked=='1') HTMCHKED="checked='checked'";
  if( node.ctrl.length > 0 && node.ischeckbox=='true'){
  HTMCHK = "<input type='checkbox' name='"+ node.ctrl +"' value='"+ sid +
   "' id='"+ this.name +"_checbox_"+ id +"' style='height:15px;'"+
   " onclick=\""+ this.name +".checkChild('"+ id +"')\" "+ HTMCHKED +">";}    //Rexliu add on 2007-1-23 14:29
  else if(node.ctrl.length > 0 && node.isRadio=='true'){
   HTMCHK = "<input type='radio' name='"+ node.ctrl  +"' value='"+ sid +
   "' id='"+ this.name +"_checbox_"+ id +"' style='height:15px;' "+ HTMCHKED +">";    //modify by fengxin on 2008-05-08
  }
  else {
   HTMCHK="";
  }

  //20:04 2007-8-25 可以加自定义的HTML表格到每一项,这是单元格部分,在外部定义方法如下:
  //var MzTreeViewTD="\"</td><td class='MzTreeViewCell1'>\"+ sid +\"</td></tr></table>\"";
  //注意字符串格式,要与前面的表头对应
  var HTMTD="";
  //alert(MzTreeViewTD);
  try {
    if ( typeof MzTreeViewTD != "undefined" ) HTMTD=eval(MzTreeViewTD);//alert(HTMTD);
  } catch(e){}

  HTML += "<IMG "+
    "align='absMiddle' "+
    "id='"+ this.name +"_icon_"+ id +"' "+
    "src='"+ this.icons[node.icon].src +"'>" + HTMCHK + "<A "+
    "class='MzTreeview' hideFocus "+
    "id='"+ this.name +"_link_"+ id +"' "+
    "href='"+ url +"' "+
    "target='"+ target +"' "+
    "title='"+ node.hint +"' "+
    "onfocus=\""+ this.name +".focusLink('"+ id +"')\" "+
    "onclick=\"return "+ this.name +".nodeClick('"+ id +"')\">"+ node.T +
  "</A>"+ HTMTD +"</NOBR></DIV>";
  if(isRoot && node.T=="") HTML = "";
  HTML = "\r\n<SPAN id='"+ this.name +"_tree_"+ id +"'>"+ HTML ;
  HTML +="<SPAN style='DISPLAY: none'></SPAN></SPAN>";
  //alert(HTML);
  return HTML;
};

//在使用图片的时候对 node.childAppend 的转换
MzTreeView.prototype.word2image = function(word)
{
  var str = "";
  for(var i=0; i<word.length; i++)
  {
    var img = "";
    switch (word.charAt(i))
    {
      case "│" : img = "L4"; break;
      case "└" : img = "L2"; break;
      case " " : img = "empty"; break;
      case "├" : img = "L1"; break;
      case "─" : img = "L3"; break;
      case "┌" : img = "L0"; break;
    }
    if(img!="")
      str += "<IMG align='absMiddle' src='"+ this.icons[img].src +"' height='20'>";
  }
  return str;
};


//将某个节点下的所有子节点转化成详细的<HTML>元素表达
//id 树的客户端节点 id
MzTreeView.prototype.buildNode = function(id)
{
  if(this.node[id].hasChild)
  {
    var tcn = this.node[id].childNodes, str = "";
    for (var i=0; i<tcn.length; i++)
      str += this.nodeToHTML(tcn[i], i==tcn.length-1);
    var temp = this.getElementById(this.name +"_tree_"+ id).childNodes;
    temp[temp.length-1].innerHTML = str;
  }
};

//聚集到客户端生成的某个节点上
//id  客户端树节点的id
MzTreeView.prototype.focusClientNode      = function(id)
{
 try {

  if(!this.currentNode) this.currentNode=this.node["0"];
  var a = this.getElementById(this.name +"_link_"+ id); if(a){ a.focus();
  var link = this.getElementById(this.name +"_link_"+ this.currentNode.id);
  if(link)with(link.style){color="";   backgroundColor="";}
  with(a.style){color = this.colors.highLightText;
  backgroundColor = this.colors.highLight;}
  this.currentNode= this.node[id];}

 } catch(e){}

};

//焦点聚集到树里的节点链接时的处理
//id 客户端节点 id
MzTreeView.prototype.focusLink= function(id)
{
  if(this.currentNode && this.currentNode.id==id) return;
  this.focusClientNode(id);
};

//点击展开树节点的对应方法
MzTreeView.prototype.expand   = function(id, sureExpand)
{
  var node  = this.node[id];
  if (sureExpand && node.isExpand) return;
  if (!node.hasChild) return;
  var area  = this.getElementById(this.name +"_tree_"+ id);
  if (area)   area = area.childNodes[area.childNodes.length-1];
  if (area)
  {
    var icon  = this.icons[node.icon];
    var iconE = this.iconsExpand[node.icon];
    var Bool  = node.isExpand = sureExpand || area.style.display == "none";
    var img   = this.getElementById(this.name +"_icon_"+ id);
    if (img)  img.src = !Bool ? icon.src :typeof(iconE)=="undefined" ? icon.src : iconE.src;
    var exp   = this.icons[node.iconExpand];
    var expE  = this.iconsExpand[node.iconExpand];
    var expand= this.getElementById(this.name +"_expand_"+ id);
    if (expand)
    {
      if(this.wordLine) expand.innerHTML = !Bool ? "+"  : "-";
      else expand.src = !Bool ? exp.src : typeof(expE) =="undefined" ? exp.src  : expE.src;
    }
    if(!Bool && this.currentNode.path.indexOf(node.path)==0 && this.currentNode.id!=id)
    {
      try{this.getElementById(this.name +"_link_"+ id).click();}
      catch(e){this.focusClientNode(id);}
    }
    area.style.display = !Bool ? "none" : "block";//(this.navigator=="netscape" ? "block" : "");
    if(!node.isLoad)
    {
      this.load(id);
      if(node.id=="0") return;

      //当子节点过多时, 给用户一个正在加载的提示语句
      if(node.hasChild && node.childNodes.length>200)
      {
        setTimeout(this.name +".buildNode('"+ id +"')", 1);
        var temp = this.getElementById(this.name +"_tree_"+ id).childNodes;
        temp[temp.length-1].innerHTML = "<DIV noWrap><NOBR><SPAN>"+ (this.wordLine ?
        node.childAppend +"└" : this.word2image(node.childAppend +"└")) +"</SPAN>"+
        "<IMG border='0' height='16' align='absmiddle' src='"+this.icons["file"].src+"'>"+
        "<A style='background-Color: "+ this.colors.highLight +"; color: "+
        this.colors.highLightText +"; font-size: 9pt'>请稍候...</A></NOBR></DIV>";
      }
      else this.buildNode(id);
    }
  }
};

//节点链接单击事件处理方法
//id 客户端树节点的 id
MzTreeView.prototype.nodeClick = function(id)
{
  var source = this.N[this.node[id].sourceIndex];
  eval(this.getAttribute(source, "C"));
  return !(!this.getAttribute(source, "url") && this.url=="#");
};

//为配合系统初始聚集某节点而写的函数, 得到某节点在数据源里的路径
//sourceId 数据源里的节点 id
MzTreeView.prototype.getPath= function(sourceId)
{
 
Array.prototype.indexOf = function(item)
  {
    for(var i=0; i<this.length; i++)
    {
      if(this[i]==item) return i;
    }
    return -1;
  };
  var _d = this._d, d = this.divider;
  var A = new Array(), id=sourceId; A[0] = id;
  while(id!="0" && id!="")
  {
    var str = "(^|"+_d+")([^"+_d+d+"]+"+d+ id +")("+_d+"|$)";
    if (new RegExp(str).test(this.names))
    {
      id = RegExp.$2.substring(0, RegExp.$2.indexOf(d));
      if(A.indexOf(id)>-1) break;
      A[A.length] = id;
    }
    else break;
  }
  return A.reverse();
};

//在源代码里指定 MzTreeView 初始聚集到某个节点
//sourceId 节点在数据源里的 id
MzTreeView.prototype.focus = function(sourceId, defer)
{
  try {

  if (!defer)
  {
    setTimeout(this.name +".focus('"+ sourceId +"', true)", 100);
    return;
  }
  var path = this.getPath(sourceId);
  if(path[0]!="0")
  {
    alert("节点 "+ sourceId +" 没有正确的挂靠有效树节点上!\r\n"+
      "节点 id 序列 = "+ path.join(this.divider));
    return;
  }
  var root = this.node["0"], len = path.length;
  for(var i=1; i<len; i++)
  {
    if(root.hasChild)
    {
      var sourceIndex= path[i-1] + this.divider + path[i];
      for (var k=0; k<root.childNodes.length; k++)
      {
        if (root.childNodes[k].sourceIndex == sourceIndex)
        {
          root = root.childNodes[k];
          if(i<len - 1) this.expand(root.id, true);
          else this.focusClientNode(root.id);
          break;
        }
      }
    }
  }

  }catch(e){}

};

//树的单击事件处理函数
MzTreeView.prototype.clickHandle = function(e)
{
  e = window.event || e; e = e.srcElement || e.target;
  //alert(e.tagName)
  switch(e.tagName)
  {
    case "IMG" :
      if(e.id)
      {
        if(e.id.indexOf(this.name +"_icon_")==0)
          this.focusClientNode(e.id.substr(e.id.lastIndexOf("_") + 1));
        else if (e.id.indexOf(this.name +"_expand_")==0)
          this.expand(e.id.substr(e.id.lastIndexOf("_") + 1));
      }
      break;
    case "A" :
      if(e.id) this.focusClientNode(e.id.substr(e.id.lastIndexOf("_") + 1));
      break;
    case "SPAN" :
      if(e.className=="pm")
        this.expand(e.id.substr(e.id.lastIndexOf("_") + 1));
      break;
    default :
      if(this.navigator=="netscape") e = e.parentNode;
      if(e.tagName=="SPAN" && e.className=="pm")
        this.expand(e.id.substr(e.id.lastIndexOf("_") + 1));
      break;
  }
};

//MzTreeView 双击事件的处理函数
MzTreeView.prototype.dblClickHandle = function(e)
{
  e = window.event || e; e = e.srcElement || e.target;
  if((e.tagName=="A" || e.tagName=="IMG")&& e.id)
  {
    var id = e.id.substr(e.id.lastIndexOf("_") + 1);
    if(this.node[id].hasChild) this.expand(id);
  }
};

//回到树当前节点的父层节点
MzTreeView.prototype.upperNode = function()
{
  if(!this.currentNode) return;
  if(this.currentNode.id=="0" || this.currentNode.parentId=="0") return;
  if (this.currentNode.hasChild && this.currentNode.isExpand)
    this.expand(this.currentNode.id, false);
  else this.focusClientNode(this.currentNode.parentId);
};

//展开当前节点并
MzTreeView.prototype.lowerNode = function()
{
  if (!this.currentNode) this.currentNode = this.node["0"];
  if (this.currentNode.hasChild)
  {
    if (this.currentNode.isExpand)
      this.focusClientNode(this.currentNode.childNodes[0].id);
    else this.expand(this.currentNode.id, true);
  }
};

//聚集到树当前节点的上一节点
MzTreeView.prototype.pervNode = function()
{
  if(!this.currentNode) return; var e = this.currentNode;
  if(e.id=="0") return; var a = this.node[e.parentId].childNodes;
  for(var i=0; i<a.length; i++){if(a[i].id==e.id){if(i>0){e=a[i-1];
  while(e.hasChild){this.expand(e.id, true);
  e = e.childNodes[e.childNodes.length - 1];}
  this.focusClientNode(e.id); return;} else {
  this.focusClientNode(e.parentId); return;}}}
};

//聚集到树当前节点的下一节点
MzTreeView.prototype.nextNode = function()
{
  var e = this.currentNode; if(!e) e = this.node["0"];
  if (e.hasChild){this.expand(e.id, true);
  this.focusClientNode(e.childNodes[0].id); return;}
  while(typeof(e.parentId)!="undefined"){
  var a = this.node[e.parentId].childNodes;
  for(var i=0; i<a.length; i++){ if(a[i].id==e.id){
  if(i<a.length-1){this.focusClientNode(a[i+1].id); return;}
  else e = this.node[e.parentId];}}}
};

//展开树的所有节点
MzTreeView.prototype.expandAll = function()
{
  if(this.totalNode>500) if(
    confirm("您是否要停止展开全部节点?\r\n\r\n节点过多!展开很耗时")) return;
  if(this.node["0"].childNodes.length==0) return;
  var e = this.node["0"].childNodes[0];
  var isdo = t = false;
  while(e.id != "0")
  {
    var p = this.node[e.parentId].childNodes, pn = p.length;
    if(p[pn-1].id==e.id && (isdo || !e.hasChild)){e=this.node[e.parentId]; isdo = true;}
    else
    {
      if(e.hasChild && !isdo)
      {
        this.expand(e.id, true), t = false;
        for(var i=0; i<e.childNodes.length; i++)
        {
          if(e.childNodes[i].hasChild){e = e.childNodes[i]; t = true; break;}
        }
        if(!t) isdo = true;
      }
      else
      {
        isdo = false;
        for(var i=0; i<pn; i++)
        {
          if(p[i].id==e.id) {e = p[i+1]; break;}
        }
      }
    }
  }
};

//本树将要用动的图片的字义及预载函数
//path 图片存放的路径名
MzTreeView.prototype.setIconPath  = function(path)
{
  var k = 0, d = new Date().getTime();
  for(var i in this.icons)
  {
    var tmp = this.icons[i];
    this.icons[i] = new Image();
    this.icons[i].src = path + tmp;
    if(k==9 && (new Date().getTime()-d)>200)
      this.wordLine = true; k++;
  }
  for(var i in this.iconsExpand)
  {
    var tmp = this.iconsExpand[i];
    this.iconsExpand[i]=new Image();
    this.iconsExpand[i].src = path + tmp;
  }
};

//设置树的默认链接
//url 默认链接  若不设置, 其初始值为 #
MzTreeView.prototype.setURL     = function(url){this.url = url;};

//设置树的默认的目标框架名 target
//target 目标框架名  若不设置, 其初始值为 _self
MzTreeView.prototype.setTarget  = function(target){this.target = target;};

//
//用代码虚拟单击(内部过程一般不要外部调用)
//1:27 2007-8-25
MzTreeView.prototype.focusClickNode      = function(id)
{
 try {

  if(!this.currentNode) this.currentNode=this.node["0"];
  var a = this.getElementById(this.name +"_link_"+ id); if(a){ a.focus();
  var link = this.getElementById(this.name +"_link_"+ this.currentNode.id);
  if(link)with(link.style){color="";   backgroundColor="";}
  with(a.style){color = this.colors.highLightText;
  backgroundColor = this.colors.highLight;}
  this.currentNode= this.node[id];
  this.nodeClick(id);
  }

 } catch(e){}

};
//用代码虚拟单击(请调用此过程)例如 tree.Click(2201)
//1:24 2007-8-25
MzTreeView.prototype.Click = function(sourceId, defer)
{
  try {

  if (!defer)
  {
    setTimeout(this.name +".Click('"+ sourceId +"', true)", 100);
    return;
  }
  var path = this.getPath(sourceId);
  if(path[0]!="0")
  {
    alert("节点 "+ sourceId +" 没有正确的挂靠有效树节点上!\r\n"+
      "节点 id 序列 = "+ path.join(this.divider));
    return;
  }
  var root = this.node["0"], len = path.length;
  for(var i=1; i<len; i++)
  {
    if(root.hasChild)
    {
      var sourceIndex= path[i-1] + this.divider + path[i];
      for (var k=0; k<root.childNodes.length; k++)
      {
        if (root.childNodes[k].sourceIndex == sourceIndex)
        {
          root = root.childNodes[k];
          if(i<len - 1) this.expand(root.id, true);
          else this.focusClickNode(root.id);
          break;
        }
      }
    }
  }

  }catch(e){}
};

//checkbox单击后的相应处理
//REXLIU ADD ON 2007-1-24 15:29
MzTreeView.prototype.checkChild = function(id)
{
 this.selChild(id);
 this.selParent(id);
};

MzTreeView.prototype.selParent = function(id)
{
 var tcn = this.node[id];
 if(tcn.parentId != "0")
 {
  var pnode = tcn.parentNode;
  var isChecked = false;
   for(var i=0; i<pnode.childNodes.length; i++)
   {
     //取子CHECKBOX
     var ckboxID = this.name +"_checbox_"+ pnode.childNodes[i].id;
     var ckbox = this.getElementById(ckboxID);
     if(ckbox.checked)
     {
      isChecked = true;
      break;
     }
   }
   var pckboxid = this.name +"_checbox_"+ pnode.id;
   var pckbox = this.getElementById(pckboxid);
   pckbox.checked = isChecked;
   this.selParent(pnode.id);
 }
};

MzTreeView.prototype.selChild = function(id)
{
 var tcn = this.node[id];
 //处理子节点
 if(tcn.hasChild)
 {
   for(var i=0; i<tcn.childNodes.length; i++)
   {
     //取父CHECKBOX
     var pckboxID = this.name +"_checbox_"+ id;
     var pckbox  = this.getElementById(pckboxID);
     //取子CHECKBOX
     var ckboxID = this.name +"_checbox_"+ this.node[id].childNodes[i].id;
     var ckbox = this.getElementById(ckboxID);
     ckbox.checked = pckbox.checked;
     this.selChild(this.node[id].childNodes[i].id);
   }
 }
};
// -->

 

最后附上代码。。zip

 

分享到:
评论

相关推荐

    动态树形结构菜单,从数据库中动态读取节点,通过XML和JS创建树形结构

    从数据岛menuXML中读取数据,从树的根节点开始分析树, 利用 hasChildNodes() [方法:是否含有子节点 ] 判断当前 节点是否有子节点,如果有子节点继续向下分析 childNodes [对象:子节点对象集合] ,否则返回当前分析结果...

    使用jsTree实现js树形结构

    jsTree 是一个强大的 JavaScript 库,专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写,无需依赖其他库,因此对于初学者和有经验的开发者来说,都是一个易于理解和使用的工具。通过这个库,你...

    JS 做的树形结构比较简单明了

    2. **递归函数**:JS中的递归函数是创建树形结构的关键。它会遍历数据模型,为每个父节点创建一个新的DOM元素,并为其子节点调用自身,形成层次结构。 3. **事件监听**:为了使树形结构可交互,需要添加事件监听器...

    tree.js树形结构,多用于组织结构

    "tree.js" 是一个专门用于构建和操作树形结构的JavaScript库,广泛应用于组织结构、文件系统、菜单导航等场景。下面将详细介绍tree.js及其相关知识点。 1. **树形结构基础**: 树形结构是一种非线性的数据结构,由...

    js树形结构

    JavaScript中的树形结构是一种数据结构,它模仿了自然界中的树,由节点(也称为顶点)和边(连接节点的线)组成。在JS中,树形结构常用于表示层次关系,例如文件系统、组织结构或者HTML DOM。下面将详细讨论如何在...

    JS实现树形结构.rar

    总结来说,"JS实现树形结构"这个主题涵盖了如何在JavaScript中创建、遍历、修改和呈现树形结构的核心概念。压缩包中的代码示例可能是各种操作的实现,对于理解和运用这些知识非常有帮助。在实际项目中,理解和掌握树...

    js实现树形结构,功能非常强大,而调用又非常简单

    "js实现树形结构"是一个常见的需求,特别是在数据管理和展示时,例如文件系统、组织架构或菜单导航。本知识点将深入探讨如何使用JavaScript实现树形结构,并提供相关资源。 树形结构是一种数据结构,它表示了对象...

    js 树形结构数据遍历条件判断删除对应数据.pdf

    在JavaScript编程中,处理树形结构数据是一种常见的需求,特别是在数据可视化、文件系统管理或组织层级结构等场景。树形结构数据通常包含嵌套的数组,每个元素代表一个节点,可能有子节点(children)属性。`...

    可编辑的树形结构

    在开发这样的系统时,通常会用到前端库或框架,如JavaScript的D3.js、jQuery UI,或者AngularJS的ngTree等,它们提供了丰富的API和工具来创建和操作树形结构。例如,`testGoogleChart`可能指的是Google Charts库中的...

    js树形结构例子

    - **创建树**:根据JSON数据动态创建树形结构。 - **渲染树**:将树结构显示在HTML中,可能使用DOM操作或模板引擎。 - **事件处理**:添加点击事件监听器,使得节点可被展开和折叠,可能使用`addEventListener`。...

    d3.js 树形结构

    **d3.js 树形结构**是数据可视化领域中一种常用的数据展示方式,它通过图形化的方式呈现层次化的数据,通常用于展现组织架构、文件系统或者网络拓扑等具有层级关系的信息。d3.js,全称Data-Driven Documents,是由...

    js+css网站通用的树形结构

    在创建树形结构时,JavaScript主要承担以下任务: 1. 数据解析:首先,你需要将后台提供的数据(通常是JSON格式)解析成JavaScript对象,这些对象代表树的各个节点。 2. 节点渲染:通过遍历这些对象,JavaScript...

    菜单树形结构,支持三级、多级树形结构代码

    综上所述,这个项目提供的代码是构建多级菜单树形结构的一种解决方案,它以简洁明了的设计思路,配合jQuery库,使得在网页应用中创建和管理复杂层次结构变得轻松。无论是新手还是经验丰富的开发者,都能从中受益,...

    js树形结构dtree,很好用,有实例

    1. **初始化**:通过提供节点数据来创建树形结构。这些数据通常是一个JSON对象数组,每个对象代表一个节点,包含其ID、文本、子节点等属性。 2. **渲染**:将树形数据转换为HTML结构,展示在页面上。这通常涉及到...

    JS实现树形结构

    总结来说,JavaScript实现树形结构主要涉及创建树节点类、添加操作节点的方法以及遍历树的算法。通过这些基础知识,我们可以构建出适应各种需求的树形结构组件,为用户界面提供丰富且高效的交互体验。在实际开发中,...

    好看的树形结构菜单

    3. **Tree组件**:在前端开发中,许多UI库如React、Vue、Angular等都提供了Tree组件,用于方便地创建和管理树形结构菜单。这些组件通常包含以下特性: - 展开/折叠:用户可以点击节点来展开或折叠其子节点。 - ...

    树形结构xtree有添加和修改的功能。

    在IT领域,树形结构是一种常见的数据组织方式,它以层级的形式表示元素之间的关系,而XTREE则是一种基于HTML和JavaScript实现的树形结构控件。这个“xtree”项目显然是一个具有添加和修改功能的树形结构实现,可能是...

    树形结构地址联动选择

    树形结构地址联动选择是一种常见的前端交互设计,广泛应用于网页中的地区选择,如省市区县等多级选择。这种设计通常以树状的形式展现,用户逐级选择,上级选择会影响下级可选项,实现联动效果。在此过程中,前端...

    树形结构生成javaScript

    8. **JavaScript库支持**:有一些流行的JavaScript库,如d3.js和jQuery UI,提供了对树形结构的高级支持,包括渲染、拖放和动画效果。 9. **压缩包中的文件与树形结构的关系**: - `StatAction.java`, `...

Global site tag (gtag.js) - Google Analytics