divtree.js

html树型结构 html树型结构

      }
    }
  } else {                             //如果用户指定了图标
    img.src = this.img;
    img.className = xyTree.CONSTANT.treeUserImgStyle;
    img.align = "absbottom";
    img.onclick = function() {
      var divbody = this.parentNode.parentNode.lastChild;
      divbody.style.display = (divbody.style.display == 'block')?'none':'block';
      divtree.tree.root.displaychild =(divbody.style.display == 'block')?false:true;
    }
  }
  divhead.appendChild(img);

  //(2) 绘制复选框的图标，有单击事件，复杂
  img = document.createElement('img');
  img.id = qjName + xyTree.CONSTANT.treeCheckBoxID + '0'; //做标记
  img.src = xyTree.TreeConfig.buzhongIcon; //初始化时根节点的图标自然空白
  img.align = "top";
  img.style.paddingTop = '3px';
  img.style.marginLeft = xyTree.TreeConfig.jianju3;
  img.onclick = function() {
    var current = divtree.tree.treeArray[0]; //current是全局节点
    if (current.checked == 1 || current.checked == 2) {
      current.checked = 0;
      this.src = xyTree.TreeConfig.buzhongIcon;
    } else {
      current.checked = 1;
      this.src = xyTree.TreeConfig.quanzhongIcon;
    }
    current.downDigui(current);
  }
  divhead.appendChild(img);
  
  //(3) 绘制根节点文字链接
  var a = document.createElement('a');
  //a.href = 'javascript:void 0';
  a.appendChild(document.createTextNode(this.tree.treename));
  a.style.marginLeft = xyTree.TreeConfig.jianju2;
  a.onclick = function() {
    divtree.clickRootNode(divtree.tree.root);
  };
  a.onfocus = function(){this.blur();}
  a.onmouseover = function (){this.style.color='blue';}
  a.onmouseout  = function (){this.style.color='black';}
  
  divhead.appendChild(a);
  div.appendChild(divhead);

  var divbody = document.createElement('div');
  divbody.style.display = 'block';
  div.appendChild(divbody);
  
  return div;
}

/**
 * 返回是否根节点状态
 * @return 返回是否根节点被完全选中
 * @type boolean  
 */
xyTree.DivTree.prototype.isSelectAll = function() {
  return (this.tree.root.checked == 1)?true:false;
}

/**
 * 得到被选中的节点，不含子节点
 * @return 得到被选中的节点，不含子节点
 * @type Array:xyTree.Node  
 */
xyTree.DivTree.prototype.getNodes = function (){
  function getNodesdigui(arr, node) {
    //xieye：决定采用树状遍历
    //如果节点的checked = 0,那么退出
    //如果节点的checked = 1,那么记录，退出
    //如果节点的checked = 2,那么跟进去
    if (node.checked == 0)
      /*空函数体*/ ;
    else if (node.checked == 1 && node.level != 0)
      arr.push(node);
    else if (node.checked == 1 && node.level == 0)
      for (var i = 0; i < node.child.length ; i++)
        getNodesdigui(arr, node.child[i]);
    else
      for (var i = 0; i < node.child.length ; i++)
        getNodesdigui(arr, node.child[i]);
  }
  var resultArr = [];
  getNodesdigui(resultArr, this.tree.root);
  return resultArr;
}

/**
 * 得到被选中的所有节点，
 * @return 得到被选中的所有节点
 * @type Array:xyTree.Node  
 */
xyTree.DivTree.prototype.getNodesAll = function (){
  function getNodesdiguiAll(arr, node){
    function getNodesdiguiAllSelected(node2){ //闭包
      arr.push(node2);
      for(var i = 0; i < node2.child.length ; i++)
        getNodesdiguiAllSelected(node2.child[i]);
    }
    if(node.checked == 0)
      /*空函数体*/ ;
    else if(node.checked == 1 ){
      arr.push(node);
      for (var i = 0; i < node.child.length ; i++)
      getNodesdiguiAllSelected(node.child[i]);
    }
    else
      for (var i = 0; i < node.child.length ; i++)
        getNodesdiguiAll(arr, node.child[i]);
  }
  var resultArr = [];
  getNodesdiguiAll(resultArr, this.tree.root);
  return resultArr;
}



/**
 * 得到被选中的叶节点数组
 * @return 得到被选中的叶节点数组
 * @type Array:xyTree.Node  
 */
xyTree.DivTree.prototype.getNodesMoji = function() {
  function getNodesdiguiMoji(arr, node) {
    function getNodesdiguiMojiSelected(node2) { //闭包，arr相同
      if (node2.child.length == 0)
        arr.push(node2);
      else
        for (var i = 0; i < node2.child.length ; i++)
          getNodesdiguiMojiSelected(node2.child[i]);
    }
    //xieye：决定采用树状遍历
    //如果节点的checked = 0,那么退出
    //如果节点的checked = 1,那么记录，退出
    //如果节点的checked = 2,那么跟进去
    if(node.checked == 0)
      /*空函数体*/ ;
    else if (node.checked == 1) {
      if (node.child.length == 0)
        arr.push(node);
      else
        for (var i = 0; i < node.child.length ; i++)
          getNodesdiguiMojiSelected(node.child[i]);
    }
    else
      for (var i = 0; i < node.child.length ; i++)
        getNodesdiguiMoji(arr, node.child[i]);
  }	
  var resultArr = [];
  getNodesdiguiMoji(resultArr, this.tree.root);
  return resultArr;
}

/**
 * 得到正在显示的最末级节点
 * @return 得到正在显示的最末级节点
 * @type Array:xyTree.Node  
 */
xyTree.DivTree.prototype.getNodesDisplay = function (){
  function getNodesdiguiDisplay(arr, node) {
    //xieye：决定采用树状遍历
    //如果节点的checked = 0,那么退出
    //如果节点的checked = 1,那么记录，退出
    //如果节点的checked = 2,那么跟进去
    if (node.checked == 0)
      /*空函数体*/ ;
    else if (node.checked == 1 && !node.displaychild)
      arr.push(node);
    else if (node.checked == 1 && node.displaychild)
      for (var i = 0; i < node.child.length ; i++)
        getNodesdiguiDisplay(arr, node.child[i]);
    else
      for (var i = 0; i < node.child.length ; i++)
        getNodesdiguiDisplay(arr, node.child[i]);
  }
  var resultArr = [];
  getNodesdiguiDisplay(resultArr, this.tree.root);
  return resultArr;
}



/**
 * 隐藏树干
 */
xyTree.DivTree.prototype.hideTreeBody = function() {
  this.div.lastChild.style.display = 'none';
  if (!this.img) {
    this.div.firstChild.firstChild.src = xyTree.TreeConfig.rootIcon;
  }
  this.tree.root.displaychild = false;
}

/**
 * 显示树干
 */
xyTree.DivTree.prototype.showTreeBody = function() {
  this.div.lastChild.style.display = 'block';
  if (!this.img)
    this.div.firstChild.firstChild.src = xyTree.TreeConfig.openRootIcon;
  this.tree.root.displaychild = true;

}

/**
 * 展开某个节点
 * @param {xyTree.Node} node 待展开的节点 
 * @param timenum 可选参数，颜色渐变的时间，越大颜色保留越长，默认300
 */
xyTree.DivTree.prototype.expandNode = function(node,timenum) {
  if(!node) return ;
  var arr = node.getNodeLink();
  for (var i = 0; i < arr.length - 1; i++){
    arr[i].expandChilds();    
  }
  arr[i].getHtmlElementfuxuanimg().nextSibling.focus();
  if (arguments.length == 2)
    arr[i].slowChange(timenum);
  else
    arr[i].slowChange();
}

/**
 * 展开某个节点并选中它
 * @param {xyTree.Node} node 待展开并选中的节点 
 * @param timenum 可选参数，颜色渐变的时间，越大颜色保留越长，默认300
 */
xyTree.DivTree.prototype.expandCheckedNode = function(node,timenum) {
  //alert(124);
  if(!node) return ;
  var arr = node.getNodeLink();
  //var s='';
  //this.showTreeBody();
  for (var i = 0; i < arr.length - 1; i++){
    arr[i].expandChilds();    //把自己展现就是父节点打开
  }
  
  var fuxuan = arr[i].getHtmlElementfuxuanimg();
  if(arr[i].checked == 0)
    fuxuan.onclick();
  else if(arr[i].checked == 2){
    fuxuan.onclick();
    fuxuan.onclick();
  }
  arr[i].getHtmlElementfuxuanimg().nextSibling.focus();
  if (arguments.length == 2)
    arr[i].slowChange(timenum);
  else
    arr[i].slowChange();
  
  //return true;
}

/**
 * 根据名称寻找一个节点，如果有同名的节点，就随便找一个
 * @param {String} name 待寻找节点的名称 
 * @return 想找的节点
 * @type xyTree.Node
 */
xyTree.DivTree.prototype.findOneNodeByName = function(name) {
  var arr = this.tree.treeArray;
  for(var i=0;i<arr.length;i++){
    if(arr[i].name == name)
      return arr[i];
    
  }
  return null;
}

/**
 * 根据id寻找一个节点，用户必须给每个节点设id属性，并保证它的唯一性
 * @param {String || int} id 待寻找节点的id 
 * @return 想找的节点
 * @type xyTree.Node
 */
xyTree.DivTree.prototype.findOneNodeById = function(id) {
  var arr = this.tree.treeArray;
  for(var i=0;i<arr.length;i++){
    if(arr[i].id)
      if(arr[i].id == id)
        return arr[i];
    
  }
  return null;
}