mztreeview.js

树形菜单

  var isRoot=this.parentNode==$.rootNode;
  if( isRoot && $.convertRootIcon && !icon) icon = "root";
  if(!isRoot)this.childPrefix=this.parentNode.childPrefix+(last?",ll":",l4");
  if(!icon || typeof(MzTreeView.icons.collapse[icon])=="undefined")
  this.icon = this.hasChild ? "folder" : "file"; else this.icon = icon;
  this.line = this.hasChild ? (last ? "pm2" : "pm1") : (last ? "l2" : "l1");
  if(!$.showLines) this.line = this.hasChild ? "pm3" : "ll";

  s += "<div><table border='0' cellpadding='0' cellspacing='0'>"+
       "<tr title='"+ hint +"'><td>"; if (MzTreeNode.htmlChildPrefix)
  s += MzTreeNode.htmlChildPrefix +"</td><td>"; if(!isRoot)
  s += "<img border='0' id='"+ $.index +"_expand_"+ id +"' src='"+
       (this.hasChild ? MzTreeView.icons.collapse[this.line].src : 
       MzTreeView.icons.line[this.line].src)+"'>"; if($.showNodeIcon)
  s += "<img border='0' id='"+ $.index +"_icon_"+ id +"' src='"+ 
       MzTreeView.icons.collapse[this.icon].src +"'>"; if($.useCheckbox)
  s += "<img border='0' id='"+$.index +"_checkbox_"+ id +"' src='"+ 
       MzTreeView.icons.line["c"+ (this.checked?1:0)].src +"'>";
  s += "</td><td style='padding-left: 3px' nowrap='true'><a href='"+ url +
       "' target='"+ target +"' id='"+$.index +"_link_"+ id +
       "' class='MzTreeView'>"+ this.text +"</a></td></tr></table><div ";
       if(isRoot&&this.text=="") s="<div><div ";
  s += "id='"+$.index+"_tree_"+id+"' style='display: none;'></div></div>";
  return s;
};
//private: build all node's node
MzTreeNode.prototype.buildChildNodes = function()
{
  var me = this, mtv = me.$$caller, box;
  if(box = document.getElementById(mtv.index +"_tree_"+ me.index))
  {
    var a = new Array(me.childNodes.length);
    MzTreeNode.htmlChildPrefix=mtv.buildPrefix(me.childPrefix);
    if(/(^|\s|;)(JS|XML|UL)Data\s*:/i.test(mtv.dataSource[me.sourceIndex])){
    function cond(a, b){if(a.hasChild!=b.hasChild)
      return (a.hasChild ? -1 : 1); else return(a.index>b.index?1:-1);}
    if(mtv.autoSort) me.childNodes=me.childNodes.sort(cond);}
    for(var i=0; i<a.length; i++)a[i]=me.childNodes[i].render(i==a.length-1);
    box.innerHTML=a.join(""); a=null; if(me.checked) me.check(me.checked);
  }
};
//private: check checkbox
MzTreeNode.prototype.check = function(checked)
{
  var me=this, mtv=me.$$caller, B=checked?"true":"false", mc=me.childNodes;
  var chk; if(chk=document.getElementById(mtv.index+"_checkbox_"+ me.index)){
  chk.src=MzTreeView.icons.line["c"+((me.checked=(checked==true))?1:0)].src;}
  var x=mtv.index; for(var i=0, chk=mc.length; i<chk; i++)
  setTimeout("Instance('"+x+"').nodes['"+mc[i].index+"'].check("+B+")",1);
};
//private: set checkbox status on childNode has checked
MzTreeNode.prototype.upCheck = function()
{
  var node = this, mtv=node.$$caller, chk; if(node.parentNode){
  for(var i=0; i<node.parentNode.childNodes.length; i++)
  {
    if(node.parentNode.childNodes[i].checked != node.checked)
    {
      while(node=node.parentNode){ node.checked = false;
        if (chk = document.getElementById(mtv.index+"_checkbox_"+node.index))
        chk.src = MzTreeView.icons.line["c2"].src; } return;}
    }
    node = node.parentNode; node.checked = this.checked;
    if (chk = document.getElementById(mtv.index +"_checkbox_"+ node.index))
    chk.src = MzTreeView.icons.line["c"+(node.checked?1:0)].src;node.upCheck();
  }
};
//private: expand node
MzTreeNode.prototype.expand = function()
{
  if(!this.hasChild) return; var me=this, $ = me.$$caller;
  var box = document.getElementById($.index +"_tree_"+ this.index);
  if (!box) {System._alert("error in getElementById"); return;}

  this.expanded = box.style.display=="none";
  box.style.display = "block"; if($.dynamic) MzEffect.show(box);
  var line = document.getElementById($.index+"_expand_"+ this.index);
  var icon = document.getElementById($.index+"_icon_"+ this.index);

  var ies=MzTreeView.icons.expand, ics=MzTreeView.icons.collapse;

  if(line && typeof(ies[this.line])=="object")line.src = ies[this.line].src;
  if(icon && typeof(ies[this.icon])=="object")icon.src = ies[this.icon].src;

  if(!this.isLoaded)
  {
    this.loadChildNodes();

    if(this.hasChild && (this.childNodes.length>200 
      || /(^|\s|;)(JS|XML|UL)Data\s*:/i.test($.dataSource[this.sourceIndex])))
    {
      setTimeout(function(){me.buildChildNodes();}, 1);
      box.innerHTML="<table border='0' cellspacing='0' cellpadding='0'><tr><td>"+
        $.buildPrefix(this.childPrefix) +"</td><td><img border='0' src='"+
        ics['pm2'].src +"'>"+ (!$.showNodeIcon ? "" : "<img border='0' src='"+
        ics['folder'].src +"'>") +"<a class='selected' href='#'>"+
        MzTreeView.textLoading +"</a></td></tr></table>";
    }
    else this.buildChildNodes();
  }
  //if($.useCheckbox) this.check(this.checked);
  $.currentNode=this; $.dispatchEvent(new System.Event("onexpand"));
  //where root node's text is empty
  if(this.parentNode==$.rootNode)
  {
    if(this.text=="" && this.hasChild)
    {
      var node = this.childNodes[0];
      line = document.getElementById($.index+"_expand_"+node.index);
      if(node.line.indexOf("pm")==0)
      {
        if(node.line=="pm1") node.line="pm0";
        else if(node.line=="pm2") node.line="pm3";
        line.src= ics[node.line].src;
      }
      else
      {
        if(node.line=="l1") node.line="l0";
        else if(node.line=="l2") node.line="l3";
        line.src= MzTreeView.icons.line[node.line].src;
      }
    }
  }
};
MzTreeNode.prototype.expandAll = function()
{
  if(this.hasChild && !this.expanded) this.expand();
  for(var x=this.$$caller.index, i=0; i<this.childNodes.length; i++)
  {
    var node = this.childNodes[i]; if (node.hasChild)
    setTimeout("Instance('"+x+"').nodes['"+ node.index +"'].expandAll()", 1);
  }
};
MzTreeNode.prototype.expandLevel=function(level)
{
  if(level<=0) return; level--; var me=this;
  if(this.hasChild && !this.expanded) this.expand();
  for(var x=this.$$caller.index, i=0, n=this.childNodes.length; i<n; i++)
  {
    var node=this.childNodes[i], d=node.index; if(node.hasChild)
    setTimeout("Instance('"+x+"').nodes['"+d+"'].expandLevel("+level+")",1);
  }
};
MzTreeNode.prototype.collapse=function()
{
  var $ = this.$$caller;
  var box=document.getElementById($.index +"_tree_"+ this.index);
  if (!box) {System._alert("error in getElementByid"); return;}

  var line=document.getElementById($.index+"_expand_"+ this.index);
  var icon=document.getElementById($.index+"_icon_"+ this.index);
  if($.dynamic)MzEffect.hide(box);else box.style.display="none";
  box=MzTreeView.icons.collapse;
  if(line) line.src= box[this.line].src; this.expanded=false;
  if(icon) icon.src=(box[this.icon]||box["file"]).src;
  if($.selectedNode && 0==$.selectedNode.path.indexOf(this.path)
    && $.selectedNode.path!=this.path) this.focus();
  $.currentNode=this; $.dispatchEvent(new System.Event("oncollapse"));
};
MzTreeNode.prototype.collapseAll = function()
{
  if(this.hasChild && this.expanded) this.collapse();
  for(var x=this.$$caller.index, i=0; i<this.childNodes.length; i++)
  {
    var node = this.childNodes[i]; if (node.hasChild && node.isLoaded)
    setTimeout("Instance('"+x+"').nodes['"+ node.index +"'].collapseAll()", 1);
  }
};
MzTreeNode.prototype.focus=function()
{
  var $ = this.$$caller, a=$.rootNode, o;
  if(!$.selectedNode) $.selectedNode=a;
  if(a = document.getElementById($.index +"_link_"+ this.index)){
  if(o = document.getElementById($.index +"_link_"+ $.selectedNode.index))
  o.className="";a.className="selected";
  if($.autoFocused){try{a.focus();}catch(ex){}} $.selectedNode=this;
  $.currentNode=this;  $.dispatchEvent(new System.Event("onfocus"));}
};




//append update remove  --node method
//if the node is not loaded then don't use this method!!
MzTreeNode.prototype.appendNode=function(node)
{
  var $=this.$$caller; if(!$.canOperate) return;
  if(this.hasChild && !this.isLoaded){this.expand(); return;}
  this.childNodes.push(node); this.hasChild=this.isLoaded=true;
  var div=document.getElementById($.index +"_tree_"+ this.index);
  if(div.insertAdjacentHTML) div.insertAdjacentHTML("beforeEnd",node.render(true));
  else{var d=document.createElement("DIV"); d.innerHTML=node.render(true);
  div.appendChild(d); div.insertBefore(d.firstChild, d); div.removeChild(d);}
  if(this.childNodes.length>1)this.childNodes[this.childNodes.length-2].updateNodeLine();
  else {this.updateNodeLine(); this.updateNodeIcon();} this.expand(); this.expanded=true;
};
MzTreeNode.prototype.updateNode=function()
{
  var $=this.$$caller; if(!$.canOperate)return;
  $.currentNode=this; var e=new System.Event("onupdatenode");
  $.dispatchEvent(e); if(!e.returnValue) return;

  this.updateNodeLine();
  this.updateNodeIcon();
  this.updateNodeLink();
};
MzTreeNode.prototype.updateNodeLine=function()
{
  var $=this.$$caller, pcs=this.parentNode.childNodes;
  this.hasChild=this.isLoaded?this.childNodes.length>0:this.hasChildNodes();

  var line=document.getElementById($.index +"_expand_"+ this.index);
  if(line){var i=MzTreeView.icons; if($.showLines)
  {
    var b=pcs.indexOf(this)==(pcs.length-1);
    if(b)this.line=this.hasChild?"pm2":"l2";
    else this.line=this.hasChild?"pm1":"l1";
  }
  else   this.line=this.hasChild?"pm3":"ll";
  i=this.hasChild ? (this.expanded?i.expand:i.collapse) : i.line;
  line.src=i[this.line].src;}

};
MzTreeNode.prototype.updateNodeIcon=function()
{
  var $=this.$$caller;
  this.hasChild=this.isLoaded?this.childNodes.length>0:this.hasChildNodes();
  if($.showNodeIcon)
  {
    var icon=document.getElementById($.index +"_icon_"+ this.index);
    var ico=this.$$caller.dataSource[this.sourceIndex].getAttribute("icon");
    if(ico!="folder"&&ico!="file"&&(this.icon=="folder"||this.icon=="file"))
      this.icon = this.hasChild ? "folder" : "file";
    var i=MzTreeView.icons; ico="undefined"==typeof i.expand[this.icon];
    if(this.expanded) {i=ico?i.collapse:i.expand;icon.src=i[this.icon].src;}
    else icon.src=MzTreeView.icons.collapse[this.icon].src;
  }
};
MzTreeNode.prototype.updateNodeText=function()
{
  document.getElementById(this.$$caller.index+"_link_"+this.index).innerHTML=this.text;
};
MzTreeNode.prototype.updateNodeLink=function()
{
  var $=this.$$caller;
  var link=document.getElementById($.index +"_link_"+ this.index);
  var s = $.dataSource[this.sourceIndex], target, url;
  var cs= $.selectedNode==this?"selected":"MzTreeView";
  if(!(target=s.getAttribute("target")))target=$.getDefaultTarget();
  if(!(url=s.getAttribute("url"))) url = $.getDefaultUrl(); if($.showToolTip)
  searchByTagName(link, "TR").title=s.getAttribute("hint")||this.text;
  if(data=s.getAttribute("data"))url+=(url.indexOf("?")==-1?"?":"&")+data;
  s="<a target='"+ target +"' id='"+$.index +"_link_"+ this.index +
    "' href='"+ url +"' class='"+ cs +"'>"+ this.text +"</a>";
  link.parentNode.innerHTML=s;
};
MzTreeNode.prototype.removeNode=function()
{
  var $=this.$$caller; if(!$.canOperate) return;
  $.currentNode=this; var evt=new System.Event("onremovenode")
  $.dispatchEvent(evt); if(!evt.returnValue) return;
  if(this.parentNode)
  {
    var div=document.getElementById($.index +"_tree_"+ this.index).parentNode;
    $.indexes=$.indexes.replace($.get__() + this.sourceIndex, "");

    var p=this.parentNode, pcs=p.childNodes, n=pcs.indexOf(this), a=[];
    for(var i=0; i<pcs.length; i++){if(i==n) continue; a.push(pcs[i]);}
    p.childNodes=a; pcs=$.dataSource[this.sourceIndex];
    $.dataSource[this.sourceIndex]=pcs.deleteAttribute("index_"+ $.index);
    if(a.length==0){p.collapse();p.updateNode();MzEffect.hide(div.parentNode);}
    else if(n==a.length){a[a.length-1].updateNode();} pcs=a=null;

    div.parentNode.removeChild(div); p.focus();
  }
};



/****** MzTreeView Inputer *****/
t=[];
t.push("<table border='0' cellspacing='1' id='MzTreeInputer' widht='100%'>");
t.push("<colgroup><col class='caption'/><col class='content' /></colgroup>");
t.push("<tr><td>&#33410;&#28857;ID</td><td><input class='text' id='mtinputerId' maxlength='16'/></td></tr>");
t.push("<tr><td>&#29238;&#33410;&#28857;ID</td><td><input class='text' id='mtinputerParentId' maxlength='16'/></td></tr>");
t.push("<tr><td>&#33410;&#28857;&#25991;&#23383;</td><td><input class='text' id='mtinputerText' maxlength='64'/></td></tr>");
t.push("<tr><td>&nbsp;</td><td id='mtinputeroption' onclick='MzTreeView.inputerhs(this)'>&#20854;&#23427;&#36873;&#39033; &gt;&gt;&gt;</td></tr>");
t.push("<tr style='display: none'><td>&#33410;&#28857;&#22270;&#26631;</td><td><select id='mtinputerIcon'><option value=''>&#35831;&#36873;&#25321;</option></select></td></tr>");
t.push("<tr style='display: none'><td>&#33410;&#28857;&#38142;&#25509;</td><td><input class='text' maxlength='128' id='mtinputerUrl'/></td></tr>");
t.push("<tr style='display: none'><td>Target</td><td><input class='text' id='mtinputerTarget' maxlength='32'/></td></tr>");
t.push("<tr style='display: none'><td>&#25552;&#31034;&#20449;&#24687;</td><td><input class='text' maxlength='64' id='mtinputerHint'/></td></tr>");
t.push("<tr style='display: none'><td>&#38468;&#21152;&#25968;&#25454;</td><td><input class='text' maxlength='255' id='mtinputerData' title='key=value&key=value&key=value&...'/></td></tr>");
t.push("<tr style='display: none'><td>&#36873;&#20013;&#29366;&#24577;</td><td><input type='checkbox' id='mtinputerCheck'/></td></tr>");
t.push("<tr><td><input class='button' type='button' value='&#30830;&#23450;' /></td><td><input class='button' type='button' value='&#21462;&#28040;' /></td></tr>")
MzTreeView.htmlInputer=t.join("") +"</table>";
MzTreeView.inputerhs=function(td)
{
  var tab = searchByTagName(td, "TABLE");
  var b=tab.rows[td.parentNode.rowIndex+1].style.display=="none";
  for(var i=td.parentNode.rowIndex+1; i<tab.rows.length-1; i++)
  b?MzEffect.show(tab.rows[i]):MzEffect.hide(tab.rows[i]);tab=td.innerHTML;
  td.innerHTML = tab.substring(0, tab.indexOf(" ")) +" "+
  (b ? "&lt;&lt;&lt;" : "&gt;&gt;&gt;");
  tab=document.getElementById("mtinputerIcon")
  b?MzEffect.show(tab):MzEffect.hide(tab);
};
MzTreeView.hideInputer=function()
{
  var inputer=document.getElementById("MzTreeInputer");
  inputer.parentNode.removeChild(inputer);
};

MzTreeView.prototype.showInputer = function()
{
  var container=document.createElement("DIV");
  container.style.width="100%";
  MzEffect.show(container);
  container.innerHTML = MzTreeView.htmlInputer;
  document.body.appendChild(container);
  var sel = document.getElementById("mtinputerIcon");
  sel.options.length=1;
  for(var i in MzTreeView.icons.collapse) if(!/^pm\d$/.test(i))
  sel.options[sel.options.length]=new Option(i, i, true, true);
  sel.selectedIndex=0;
};