divtreenormal.js

xyTreeV4.0.rar xyTreeV4.0.rar

var TreeConfigNormal = {
	rootIcon        : 'images/foldericon.gif',
	openRootIcon    : 'images/openfoldericon.gif',
	folderIcon      : 'images/foldericon.gif',
	openFolderIcon  : 'images/openfoldericon.gif',
	fileIcon        : 'images/file.gif',
	iIcon           : 'images/I.gif',
	lIcon           : 'images/L.gif',
	lMinusIcon      : 'images/Lminus.gif',
	lPlusIcon       : 'images/Lplus.gif',
	tIcon           : 'images/T.gif',
	tMinusIcon      : 'images/Tminus.gif',
	tPlusIcon       : 'images/Tplus.gif',
	blankIcon       : 'images/blank.gif',
	defaultText     : 'Tree Item',
	defaultAction   : 'javascript:void(0);',
	defaultBehavior : 'classic',
	usePersistence	: true,
	jianju1         : '4px'
};



//div树类
//=====================================================================
function DivTreeNormal(name){
	/*
	使用条件
	1：html的文档类型必须是XHTML 1.0
	2：给树添加节点的顺序必须固定，必须以深度遍历的方式初始化树，考虑到树的实际用途
	3：没有删除节点方法，考虑到树的实际用途
	4：function huifu()把树恢复到开始显示的样子
	5：funciton init() 对树做一个内部整理，必须在停止给树加节点时使用一下
	6：树的构造方法参数有(a,b,c,d)
	   a：有复选框，无复选框
	   b：是只有一个节点展开，还是随意
	   c：是点击减号后再点击加号，他保持点击减号后的形状
	   d：
	7：树的构造方法基本参数，名称
	8：function add()  //添加一级节点
	9: function getParentNodes() //返回最靠前父节点
	10： 
	*/

	var objectname = this.getName();
	this.tree = new TreeNormal(name, objectname);
	this.tree.divtree = this;
	this.div = this.creatediv();
}

DivTreeNormal.count = 0;

DivTreeNormal.prototype.getName = function (){
	var s = "xytreenormalid" ;
	s += (window.DivTreeNormal.count++);
	return s;
}


DivTreeNormal.prototype.add = function (node){
  this.tree.add(node);	
}

DivTreeNormal.prototype.init = function (){
	var div = this.div.lastChild;
	//把所有的一级节点列出来
	//首先得到所有的一级节点
	var root = this.tree.root;
	var arr = root.child;
	for(var i = 0; i < arr.length; i++ )
	  div.appendChild(arr[i].innerhtml());
}

DivTreeNormal.prototype.creatediv = function (){
  var divtree = this;
  var div = document.createElement('div');
  div.className = 'treeyangshi';
  
  var divhead = document.createElement('div');
  var img = document.createElement('img');
  img.src = TreeConfigNormal.openRootIcon;
  img.onclick = function(){
   var divbody = this.parentNode.parentNode.lastChild;
   if(divbody.style.display == 'block'){
   	divbody.style.display = 'none';
	  img.src = TreeConfigNormal.rootIcon;
   }else{
   	divbody.style.display = 'block';
  	img.src = TreeConfigNormal.openRootIcon;
   }
  }
  img.align = "absbottom";
  divhead.appendChild(img);

  var qj = this.tree.objectname; //得到全局对象的名称
  var a = document.createElement('a');
  a.href = 'javascript:void(0);';
  a.onclick = function (){
	  divtree.clickRootNode();
  };
  a.onfocus = function(){this.blur();}
  a.appendChild(document.createTextNode(this.tree.treename));
  a.style.marginLeft = TreeConfigNormal.jianju1;
  
  divhead.appendChild(a);
  div.appendChild(divhead);

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



DivTreeNormal.prototype.hideTreeBody = function (){
   	this.div.lastChild.style.display = 'none';
	  this.div.firstChild.firstChild.src = TreeConfigNormal.rootIcon;
}

DivTreeNormal.prototype.showTreeBody = function (){
   	this.div.lastChild.style.display = 'block';
	  this.div.firstChild.firstChild.src = TreeConfigNormal.openRootIcon;
}



//新的补充：20070418：在这里可以自己写单击节点的反应
DivTreeNormal.prototype.clickNode = function (xuhao){
	var node = this.tree.treeArray[xuhao]; //这句话是固定的，勿改，目的：获得节点
	var s;
	if(this.tree.treename == '《精通CSS》') //如果节点所在树的根节点名称是精通CSS的话
	                                        //打印3个属性，节点的属性只有name是必须的，别的最好在节点类中自定义(自行添加)，
	  s =  '[' + node.name + ']开始于第' + node.page + '页，字数是' + node.zishu;
	else
	  s = '[' + node.id + ']=[' + node.name + ']'; //否则打印id属性和name属性
	alert(s);

}

//新的补充：20070418：在这里可以自己写单击根节点文字的反应
DivTreeNormal.prototype.clickRootNode = function (){
	var s='';
	s+='当前树：';
	s+='\n节点总数(不含根节点) = '+(this.tree.treeArray.length-1);
	s+='\n层数(不含根节点的层) = '+this.tree.maxlevel;
	s+='\n根节点名称 = '+this.tree.treeArray[0].name;
	alert(s);
}