树形菜单

Question

<!-- Beginning hiddenvar Tree = function(treeName) {  // 创建“树对象”。其中，treeName 是该对象的名。可在此后用“document.treeName”来调用之。      this.create = function(name) {         // 创建“树对象”。
            this.trim = function(s) {                               // 去尾部空格
                  var i = 0;
                  for (i = s.length-1; i >= 0; i--) {if (s.charAt(i) != " ") break;}
                  return s.substring(0,i+1);
            }
            this.name = (name==null?"":this.trim(name));     // 树名。字母、数字、下划线，不可间空。
            if (this.name==null || this.name=="") {
                  alert("树的名必须要有");
                  return null;
            }
            if (eval("(document." + this.name + "?true:false)")) {
                  alert("document." + this.name + "已经存在，请换一个树名");
                  return null;
            }
//--------- 定义属性 ---------------------------            this.hitFunctionName       = "hitHandle";             // 点击节点后的动作函数
            this.getSonFunctionName    = "getSonNode";            // 展开时如无子节点，则将调用的函数
            this.showIcon              = true;                    // 是否要画各节点前的图标
            this.showRoot              = true;                    // 是否要显示根节点
            this.hitClear              = true;                    // 点击节点后，是否全不选所有检查盒
            this.chooseMode            = 2;                       // 选择了某节点后的处理方式：0，无动作；1：同时选中第1层子节点；2：同时选中所有子节点
            this.generalColor          = "#000000";               // 普通节点的颜色
            this.currentColor          = "#000000";               // 当前节点的颜色
            this.generalBgColor        = "#EEF7FF";               // 普通节点的底色
            this.currentBgColor        = "#a0a0a0";               // 当前节点的底色
            this.imageDirectory        = "treeImages/";           // 图符文件目录
            this.imageOfVertLine       = 'img_vert_line.gif';     // 形如“┃”的垂直连线
            this.imageOfConCloseFolder = 'img_plus_cont.gif';     // 收拢之文件夹节点的、形如“┣”的加形图符
            this.imageOfEndCloseFolder = 'img_plus_end.gif';      // 收拢之终结文件夹节点的、形如“┗”的加形图符
            this.imageOfConOpenFolder  = 'img_minus_cont.gif';    // 展开之文件夹节点的、形如“┣”的减形图符
            this.imageOfEndOpenFolder  = 'img_minus_end.gif';     // 展开之终结文件夹节点的、形如“┗”的减形图符
            this.imageOfConLeaf        = 'img_branch_cont.gif';   // 叶子节点的、形如“┣”的连线图符
            this.imageOfEndLeaf        = 'img_branch_end.gif';    // 终结叶子节点的、形如“┗”的连线图符
            this.imageOfLeaf           = 'img_leaf.gif';          // 叶子节点图标
            this.imageOfOpenFolder     = 'img_folder_open.gif';   // 展开的文件夹节点图标
            this.imageOfCloseFolder    = 'img_folder_close.gif';  // 收拢的文件夹节点图标
// ----- 以下是中间变量，不用改 -----------------
            this.currentNode     = null;                    // 当前点击的节点。
            this.rootExist       = false;                   // 根节点是否已存在。
            this.root            = null;                    // 根节点元素//---------- 载入函数 -----------            this.test = function() {                   // 检查参数
                  this.name = this.trim(this.name);
                  this.imageOfCloseFolder = this.trim(this.imageOfCloseFolder);
                  this.imageOfOpenFolder  = this.trim(this.imageOfOpenFolder);
                  this.imageOfLeaf  = this.trim(this.imageOfLeaf);
/*
                  if (this.name == "") {alert("树名不能为空"); return false;}
                  if (this.imageOfLeaf == "") {                          // 确保叶子图片文件非空；否则，不显示图标
                        if (this.imageOfOpenFolder == "") {
                              if (this.imageOfCloseFolder == "") {this.showIcon = false;}
                              else {this.imageOfLeaf = this.imageOfCloseFolder;}
                        }
                        else {this.imageOfLeaf = this.imageOfOpenFolder;}
                  }
                  if (this.showIcon) {                                      // 此时，或者不显示图标，或者叶子图片文件非空
                        if (this.imageOfOpenFolder == "") {this.imageOfOpenFolder = this.imageOfLeaf;}
                        if (this.imageOfCloseFolder == "") {this.imageOfCloseFolder = this.imageOfOpenFolder;}
                        if (this.imageOfOpenFolder == "") {this.imageOfOpenFolder = this.imageOfCloseFolder;}
                  }
*/
                  return true;
            }
            this.hit = function(obj) {        // 点击节点后进行的动作
                  if (this.currentNode != null) {                      // 去掉原当前节点的高亮显示
                        this.currentNode.node_row.style.color           = this.generalColor;
                        this.currentNode.node_row.style.backgroundColor = this.generalBgColor;
                        this.currentNode.node_text.style.color          = this.generalColor;
                  }
                  obj.node_row.style.color           = this.currentColor;     // 此3句是：高亮显示当前节点
                  obj.node_row.style.backgroundColor = this.currentBgColor;
                  obj.node_text.style.color          = this.currentColor;
                  this.currentNode = obj;
                  if (this.hitClear) {this.resetCheckBox(false);}            // 取消所有检查盒的选中
                  if (this.hitFunctionName != "") {                          // 根据需要，对点击动作做进一步的处理
                        eval(this.hitFunctionName + "('" + obj.node_name + "','" + obj.node_parameters + "')");
                  }
            }
            this.resetCheckBox = function(isChoose) {    // 将所有节点的检查盒属性重置为指定值(isChoose)
                  this.root.resetCheckBox(isChoose);
            }
            this.findNode = function(nName) {                // 寻找指定名的节点
                  return this.root.findNode(nName);
            }
            this.getImgTag = function(imgName, imgID, altText) {
                  if (imgName == null) {imgName = "";}
                  else {imgName = this.trim(imgName);}
                  if (altText == null) {altText = "";}
                  else {altText = this.trim(altText);}
                  if (imgID == null) {imgID = "";}
                  var ss = "";
                  if (imgName == "") {
                        ss = "<span" + (imgID==""?"":" id='"+imgID+"'") + " style='text-decoration:none;color:"+this.generalColor+"'>" + altText + "</span>";
                  }
                  else {ss = "<IMG ALIGN=absmiddle BORDER=0" + (imgID==""?"":" id='"+imgID+"'") + " alt='" + altText + "'"
                                                             + " SRC='" + this.imageDirectory + imgName + "'>";
                  }
                  return ss;
            }

Answer 1

this.help = function(wObj) {           // 在wObj窗口（缺省：在新窗口）显示帮助页面
                  if (wObj == null) {
                        var attrString = "top=0,left=10,width=800,height=500,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes";
                        wObj = window.open("", "", attrString);
                  }
                  with (wObj.document) {
                        open("text/html");
                        writeln("<HTML>");
                        writeln("<HEAD>");
                        writeln("<title>说明</title>");
                        writeln("<style>");
                        writeln("<!--");
                        writeln("td   {font-face:宋体;font-size:12px;line-height:12px;letter-spacing:0px;margin-top:0px;}");
                        writeln(".tit {COLOR:#ffffff;backGround-color:#999933;font-face:宋体;font-size:12px;text-align:center;font-weight:bold}");
                        writeln("-->");
                        writeln("</style>");
                        writeln("</HEAD>");
                        writeln("<BODY topmargin='0' leftmargin='0' marginheight='0' marginwidth='0'>");
                        writeln("<table border='1' cellpadding='3' cellspacing='0'>");
                        writeln("<tr><td colspan=3 class=tit>建立目录树的方法</td></tr>");
                        writeln("<tr><td nowrap><b>1、var myTree = Tree(treeName);</b></td><td colspan=2>首先建立一个目录树处理对象</td></tr>");
                        writeln("<tr><td></td><td colspan=2>其中，treeName是赋予该对象的名。以便此后可通过“document.treeName”来调用之。</td></tr>");
                        writeln("<tr><td align=right>它有如下可配置的属性：</td><td>showIcon = true;</td><td>是否要画各节点前的图标</td></tr>");
                        writeln("<tr><td></td><td>showRoot = true;</td><td>是否要显示根节点</td></tr>");
                        writeln("<tr><td></td><td>hitClear = true;</td><td>点击节点后，是否全不选所有检查盒</td></tr>");
                        writeln("<tr><td></td><td>chooseMode = 2;</td><td>选择了某节点后的处理方式：0，无动作；1：同时选中第1层子节点；2：同时选中所有子节点</td></tr>");
                        writeln("<tr><td></td><td>hitFunctionName = 'hitHandle';</td><td>点击节点后的动作函数</td></tr>");
                        writeln("<tr><td></td><td>getSonFunctionName = 'getSonNode';</td><td>展开时如无子节点，则将调用的函数</td></tr>");
                        writeln("<tr><td></td><td>generalColor   = '#000000';</td><td>普通节点的颜色</td></tr>");
                        writeln("<tr><td></td><td>currentColor   = '#000000';</td><td>当前节点的颜色</td></tr>");
                        writeln("<tr><td></td><td>generalBgColor = '#EEF7FF';</td><td>普通节点的底色</td></tr>");
                        writeln("<tr><td></td><td>currentBgColor = '#a0a0a0';</td><td>当前节点的底色</td></tr>");
                        writeln("<tr><td></td><td>imageDirectory        = 'treeImages/'; </td><td>图符文件目录</td></tr>");
                        writeln("<tr><td></td><td>imageOfVertLine       = 'img_vert_line.gif';</td><td>形如“┃”的垂直连线</td></tr>");
                        writeln("<tr><td></td><td nowrap>imageOfConCloseFolder = 'img_plus_cont.gif';</td><td>收拢之文件夹节点的、形如“┣”的加形图符</td></tr>");
                        writeln("<tr><td></td><td>imageOfEndCloseFolder = 'img_plus_end.gif';</td><td>收拢之终结文件夹节点的、形如“┗”的加形图符</td></tr>");
                        writeln("<tr><td></td><td>imageOfConOpenFolder  = 'img_minus_cont.gif';</td><td>展开之文件夹节点的、形如“┣”的减形图符</td></tr>");
                        writeln("<tr><td></td><td>imageOfEndOpenFolder  = 'img_minus_end.gif';</td><td>展开之终结文件夹节点的、形如“┗”的减形图符</td></tr>");
                        writeln("<tr><td></td><td>imageOfConLeaf        = 'img_branch_cont.gif';</td><td>叶子节点的、形如“┣”的连线图符</td></tr>");
                        writeln("<tr><td></td><td>imageOfEndLeaf        = 'img_branch_end.gif';</td><td>终结叶子节点的、形如“┗”的连线图符</td></tr>");
                        writeln("<tr><td></td><td>imageOfLeaf           = 'img_leaf.gif';</td><td>叶子节点图标</td></tr>");
                        writeln("<tr><td></td><td>imageOfOpenFolder     = 'img_folder_open.gif';</td><td>展开的文件夹节点图标</td></tr>");
                        writeln("<tr><td></td><td>imageOfCloseFolder    = 'img_folder_close.gif';</td><td>收拢的文件夹节点图标</td></tr>");
                        writeln("<tr><td align=right>及只读属性：</td><td>currentNode</td><td>最近一次点击的节点。</td></tr>");
                        writeln("<tr><td></td><td>rootExist</td><td>根节点是否已存在。</td></tr>");
                        writeln("<tr><td></td><td>root</td><td>根节点元素</td></tr>");
                        writeln("<tr><td align=right>它有如下方法：</td><td>trim(String)</td><td>去尾部空格</td></tr>");
                        writeln("<tr><td></td><td>hit(node)</td><td>点击后，高亮显示当前节点，并调用用户自定义的hitFunctionName函数</td></tr>");
                        writeln("<tr><td></td><td>findNode(nodeName)</td><td>寻找指定名的节点</td></tr>");
                        writeln("<tr><td></td><td>drawRoot(......)</td><td>画根节点</td></tr>");
                        writeln("<tr><td></td><td>addNode(......)</td><td>插入节点</td></tr>");
                        writeln("<tr><td></td><td>help(wObj)</td><td>在wObj窗口（缺省：在新窗口）显示帮助页面</td></tr>");
                        writeln("<tr><td><b>2、建立hitHandle函数</b></td><td colspan=2>如果hitFunctionName属性有值，则别忘了建立该函数。该函数的参数总是（节点名，节点自带的属性串）</td></tr>");
                        writeln("<tr><td><b>3、建立getSonFunctionName函数</b></td><td colspan=2>如果getSonFunctionName属性有值，则别忘了建立该函数。该函数的参数总是（节点名，节点自带的属性串）</td></tr>");
                        writeln("<tr><td><b>4、画根节点：myTree.drawRoot();</b></td><td>其参数按顺序如下：</td><td>根节点的名</td></tr>");

Answer 2

writeln("<tr><td></td><td></td><td>根节点的显示文字</td></tr>");
                        writeln("<tr><td></td><td></td><td>根节点的自带属性串</td></tr>");
                        writeln("<tr><td></td><td></td><td>根节点的图标文件名</td></tr>");
                        writeln("<tr><td></td><td></td><td>根节点是否有检查盒（缺省：无）</td></tr>");
                        writeln("<tr><td></td><td></td><td>该检查盒是否不可用（缺省：可用）</td></tr>");
                        writeln("<tr><td></td><td></td><td>放置目录树的目标元素。空：则document.write；否则putObj.innerHTML=</td></tr>");
                        writeln("<tr><td><b>5、加入节点：myTree.addNode();</b></td><td>其参数按顺序如下：</td><td>父节点的名(缺省是根节点)</td></tr>");
                        writeln("<tr><td></td><td></td><td>本节点的名</td></tr>");
                        writeln("<tr><td></td><td></td><td>本节点的显示文字</td></tr>");
                        writeln("<tr><td></td><td></td><td>本节点的自带属性串</td></tr>");
                        writeln("<tr><td></td><td></td><td>本节点状态。0——叶子；1——收拢文件夹；2——展开文件夹</td></tr>");
                        writeln("<tr><td></td><td></td><td>本节点是否有检查盒（缺省：无）</td></tr>");
                        writeln("<tr><td></td><td></td><td>该检查盒是否不可用（缺省：可用）</td></tr>");
                        writeln("<tr><td><b>6、节点的属性和方法：</b></td><td></td><td></td></tr>");
                        writeln("<tr><td align=right>各节点主要有如下属性：</td><td>node_name</td><td>本节点的名</td></tr>");
                        writeln("<tr><td></td><td>node_parameters</td><td>本节点的自带属性串</td></tr>");
                        writeln("<tr><td></td><td>node_status</td><td>本节点的状态</td></tr>");
                        writeln("<tr><td></td><td>node_isLast</td><td>本节点是否是本层的最后一个节点</td></tr>");
                        writeln("<tr><td></td><td>node_chkbox</td><td>本节点的检查盒元素</td></tr>");
                        writeln("<tr><td></td><td>node_icon</td><td>本节点的图标元素</td></tr>");
                        writeln("<tr><td></td><td>node_row</td><td>本节点的所在行元素</td></tr>");
                        writeln("<tr><td></td><td>node_text</td><td>本节点的显示文字元素</td></tr>");
                        writeln("<tr><td></td><td>node_expandElement</td><td>本节点的子目录展开元素</td></tr>");
                        writeln("<tr><td></td><td>node_son</td><td>本节点的子节点表</td></tr>");
                        writeln("<tr><td></td><td>node_sonNodes</td><td>本节点的所有子节点</td></tr>");
                        writeln("<tr><td align=right>各节点有如下方法：</td><td>resetCheckBox(isChoose)</td><td>将本节点及其下属的检查盒属性重置为指定值(isChoose)</td></tr>");
                        writeln("<tr><td></td><td>findNode(nodeName)</td><td>在本节点及其下属子节点中寻找指定名的节点</td></tr>");
                        writeln("<tr><td></td><td>collapseOrExpand()</td><td>收拢或展开</td></tr>");
                        writeln("</TABLE>");
                        writeln("</BODY></HTML>");
                        close();
                  }
                  wObj.focus();
            }