node.js

html树型结构 html树型结构

  return s;
}

/**
 * 返回加号位置的图片，不过是点击后判断,注意是4种图标
 * @param {boolean} img1 节点的子节点是否正在显示
 * @param {boolean} node 节点是否在末尾
 * @return 返回加号位置图片
 * @type String
 */
xyTree.Node.prototype.getimgdianji = function(img1, mowei) {
  var s;
  if (mowei)                      //在末尾
    //正在展开 ? 变为减 : 变为加
    s = img1 ? xyTree.TreeConfig.lMinusIcon : xyTree.TreeConfig.lPlusIcon;
  else                            //不在末尾
    //正在展开 ? 变为减 : 变为加
    s = img1 ? xyTree.TreeConfig.tMinusIcon : xyTree.TreeConfig.tPlusIcon;
  return s;
}

/**
 * 返回缺省文件夹图片
 * @return 返回文件夹图片
 * @type String
 */
xyTree.Node.prototype.getimgfold = function() {
  //xieye：有3种，开文件夹，闭文件夹，一张纸
  if (this.img)
    return this.img;
  var s;
  if(this.level != 0){
	  if (this.child.length > 0) //有子节点
	    if (this.displaychild)//子节点在显示
	      s = xyTree.TreeConfig.openFolderIcon;
	    else                  //子节点不在显示 
	      s = xyTree.TreeConfig.folderIcon;
	  else                       //无子节点
	    s = xyTree.TreeConfig.fileIcon;  
  }else{
	      s = xyTree.TreeConfig.openFolderIcon;
  }
  return s;
}

/**
 * 根据状态返回图片（复选框）
 * @param {int} checked 节点状态
 * @return 根据状态返回图片（复选框）
 * @type String
 */
xyTree.Node.prototype.getimgbyyangshi = function(checked) {
  if (checked == 0) return xyTree.TreeConfig.buzhongIcon;
  if (checked == 1) return xyTree.TreeConfig.quanzhongIcon;
  if (checked == 2) return xyTree.TreeConfig.jubuzhongIcon;
}

/**
 * 返回复选框图片，副作用：改变节点状态属性
 * @return 返回复选框图片
 * @type String
 */
xyTree.Node.prototype.getfuxuanimg = function() {
  if (this.parent.checked == 2)
    return this.getimgbyyangshi(this.checked);
  var s;
  if (this.parent.checked == 1) {
    this.checked = 1;
    s = xyTree.TreeConfig.quanzhongIcon;
  } else {
    this.checked = 0;
    s = xyTree.TreeConfig.buzhongIcon;
  }
  return s;
}

/**
 * 渐变背景
 */
xyTree.Node.prototype.slowChange = function(timenum) {
  if(arguments.length == 1)
  xyTree.fun.slowChange(this.tree.divtree.xuhao,this.xuhao,timenum);
  else
  xyTree.fun.slowChange(this.tree.divtree.xuhao,this.xuhao);
  
}

/**
 * 页面上显示节点
 */
xyTree.Node.prototype.expand = function() {
  this.tree.divtree.expandNode(this);
}

/**
 * 页面上显示节点并打勾
 */
xyTree.Node.prototype.expandChecked = function() {
  this.tree.divtree.expandCheckedNode(this);
}

/**
 * 页面上展开子节点,谨慎使用
 * @private
 */
xyTree.Node.prototype.expandChilds = function() {
  //如果它不是叶节点，而且节点的状态是this.displaychild = false;
  //那么就单击
  if(this.level == 0)
    this.tree.divtree.showTreeBody();
  else
    if(this.level != this.tree.maxlevel
       && (!this.displaychild)){
      this.getHtmlElementjiahaoimg().onclick();
    }
}

/**
 * 返回节点链，0是根节点，最后是自己
 * @return 一个节点数组，从根节点开始，根节点的一个子节点，
 *         根节点的一个子节点的子节点……直到自己
 * @type Ayyay:xyTree.Node
 */
xyTree.Node.prototype.getNodeLink = function() {
  if(this.level == 0) return [this];
  
  var s = [];
  var node = this;
  s.unshift(node);
  ee(node);
  return s;
  //递归
  function ee(node){
    var parent = node.parent;
    s.unshift(parent);
    if (parent == node.tree.root) return;
    ee(parent);
  };
}

/**
 * 给节点添加子节点
 * @param {xyTree.Node} node 子节点
 */
xyTree.Node.prototype.add = function (node){
  //(1)设置自身的： child子节点，
  var chang = this.child.length;
  this.child[chang] = node;
  	
  //(2)要设置node的：parent，level，tree，不设置下一个节点，子节点
  node.parent = this;
  node.level = this.level + 1;
  node.tree = this.tree;
  	
  //(3)设置node的前一个节点的 ：next,     node的previous，
  if (chang > 0) {
    node.previous = this.child[chang - 1];
    node.previous.next = node;
  } 
  	
  //(4)设置树的treeArray[],     node的xuhao，
  chang =  node.tree.treeArray.length;
  node.tree.treeArray[chang] = node;
  node.xuhao = chang;
  	
  //(5)设置树的maxlevel;
  if (node.level > this.tree.maxlevel)
    this.tree.maxlevel = node.level;
};

/**
 * 给节点动态添加子节点,参数还可以是数组
 * @param {xyTree.Node} node 子节点
 */
xyTree.Node.prototype.addDynamic = function (node){
 // this.
  if(this.level == 0){ //如果是根节点
    moxingtianjia(this,node);
    var tree = this.tree.divtree; //获得树
    tree.showTreeBody();          //展开
    var div = tree.div.lastChild; //获得树干
    if(node instanceof Array){
      for(var i=0;i<node.length;i++){ 
        panduan(node[i]);
        div.appendChild(node[i].innerhtml());
        node[i].expand();
      }
    }
    else{ 
      panduan(node);
      div.appendChild(node.innerhtml());
      node.expand();
    }
  } else {  //如果当前节点不是根节点
    //首先自己一定要显示出来！！
    /* 
     * 1、没子节点
     * 变加号（注意到可能不是一级节点）
     * 变收缩文件夹或指定图片
     * 然后自己onclick()
     * 2、3、有子节点但不在显示,那就让子节点先显示
     * 如果子节点的最后一个是不带子节点的
     * 如果子节点的最后还是一个带子节点的且曾经显示过
     * 添加到模型tree
     * 然后父节点加innerHTML()
     * */
    this.expand();
    if(this.child.length == 0){ //自己没子节点
      moxingtianjia(this,node); //模型添加
      var jiahaoDOM = this.getHtmlElementjiahaoimg();
      if(this.next){     //如果不是最后一个
        jiahaoDOM.src = xyTree.TreeConfig.tPlusIcon;
      } else
        jiahaoDOM.src = xyTree.TreeConfig.lPlusIcon;
      if(!this.img)
        jiahaoDOM.nextSibling.src =   
          xyTree.TreeConfig.folderIcon;
      jiahaoDOM.onclick();    
      for(var j=0;j<this.child.length; j++)
        this.child[j].expand();
    }else{                      //自己有子节点
      if(!this.displaychild)
        this.expandChilds();
      var lastNode = this.child[this.child.length - 1];
      var lastNodejiahaoDOM = lastNode.getHtmlElementjiahaoimg();
      if(lastNode.child.length == 0) //如果末尾是不带子节点的
        lastNodejiahaoDOM.src = xyTree.TreeConfig.tIcon;
      else{
        if(lastNode.zhankaiguo){   //如果展开过，要递归
       //递归前先处理自己
          if(lastNode.displaychild) {     //正在显示
            //alert('ok222222');
              lastNodejiahaoDOM.src = xyTree.TreeConfig.tMinusIcon;    
          }
          else {                      //不在显示
            //alert('ok');
              lastNodejiahaoDOM.src = xyTree.TreeConfig.tPlusIcon;
          }
          var arr = lastNode.child; //递归
          for(var i=0; i<arr.length; i++)
            arr[i].chonghui2(lastNode.level-1);
        }else  //即便末尾未展开过，也变
           lastNodejiahaoDOM.src = xyTree.TreeConfig.tPlusIcon;
        
      }
     
      moxingtianjia(this,node); //模型添加
      var div = this.getHtmlElement();
      //逐个添加,要改
      if(node instanceof Array){
        for(var i=0;i<node.length;i++){ 
          div.appendChild(node[i].innerhtml());
          node[i].expand();
        }
      }
      else{ 
        div.appendChild(node.innerhtml());
        node.expand();
      }
    }//自己有子节点
  }//如果当前节点不是根节点
  //子函数：如果有前个节点，前个节点重绘
  function panduan(node2){
    if(node2.previous)node2.previous.chonghui();
  }
  //给内存中的树的某节点添加子节点
  function moxingtianjia(node3,node4){
    if(node4 instanceof Array){
      for(var i2=0;i2<node4.length;i2++) node3.add(node4[i2]);
    }
    else node3.add(node4);
  }
  
};

/*
 * 设置节点的文件夹图标为loading.gif
 * 仅在节点显示时有效
 */
xyTree.Node.prototype.loadingGif = function (node){
	var img = this.getHtmlElementfuxuanimg().previousSibling;
  if(this.level == 0){ //如果是根节点
  		img.src = xyTree.TreeConfig.loadingIcon;
  } else {  //如果当前节点不是根节点
  	//首先，要判断，如果当前节点不在显示，则什么都不做
  	if(this.parent.displaychild){
  		img.src = xyTree.TreeConfig.loadingIcon;
  	}else{
  	 /*alert("该节点不在显示")*/;
  	}
  }
} 
 
/*
 * 恢复节点的文件夹图标为标准样式 
 * 不是仅在节点显示时有效
 */
xyTree.Node.prototype.loadingGifRenew = function (node){
	var img = this.getHtmlElementfuxuanimg().previousSibling;
  if(!img)return;
  if(this.level == 0){ //如果是根节点
  		img.src = this.getimgfold();
  } else {  //如果当前节点不是根节点
  	//首先，要判断，如果当前节点不在显示，则什么都不做
  	if(this.parent.displaychild){
  		img.src = this.getimgfold();
  	}else{
  	 /*alert("该节点不在显示")*/;
  	 img.src = this.getimgfold(); //先凑合着用，看情况改
  	}
  }
} 
 



//重绘竖线
xyTree.Node.prototype.chonghui2 = function (num){
  
  if(this.parent.displaychild){
    var img = this.getHtmlElement().firstChild;
    for(var i=0;i<num; i++)
      img = getimg();
    img.src = xyTree.TreeConfig.iIcon;
    
    for(var j=0;j<this.child.length; j++)
      this.child[j].chonghui2(num);
  }
  
  function getimg(){
    img = img.nextSibling;
    return img;
  }
  
}


/**
 * 给节点重绘第一条线
 * @private
 */
xyTree.Node.prototype.chonghuifirstimg = function (){
//    alert(this.level);
  var img = this.getHtmlElement().firstChild;
   // alert(img.src);
  if(this.level == 1){
    if (this.child.length == 0 ) //如果没有子节点
      img.src = xyTree.TreeConfig.tIcon;
    else{                        //有子节点
      if(this.displaychild)      //正在显示
        img.src = xyTree.TreeConfig.tMinusIcon;    
      else                       //不在显示
        img.src = xyTree.TreeConfig.tPlusIcon;
    }
  }
  else
    img.src = xyTree.TreeConfig.iIcon;
}

/**
 * 给节点以及它的子节点重绘第一条线
 * @private
 */
xyTree.Node.prototype.chonghui = function (){
  if(this.parent.zhankaiguo){
    //alert('chonghui');
    this.chonghuifirstimg();
    var arr = this.child;
    for(var i=0; i<arr.length; i++)
      arr[i].chonghui();
  }
}





/**
 * 调试用
 */
xyTree.Node.prototype.display = function() {
  for (var i = 0; i <this.level; i++)
    this.tree.tempString += ' ';
  this.tree.tempString += '[' + this.id + ']=[' + this.name + ']' + '\n';
  for (var i = 0; i < this.child.length; i++)
    this.child[i].display();
};