treeex23.html

javascript编写的tree。支持复选框。

 if(node)temp=node;
 else{
 var temp=this._globalIdStorageFind(itemId);
};
 if(!temp)return 0;
 
 z="";
 for(var i=0;i<temp.childsCount;i++)
{
 if(!z)z=temp.childNodes[i].id;
 else z+=","+temp.childNodes[i].id;
 var zb=this._getAllSubItems(0,z,temp.childNodes[i])
 if(zb)z+=","+zb;
}
 return z;
};
 

 
 
 dhtmlXTreeObject.prototype.selectItem=function(itemId,mode){
 mode=convertStringToBoolean(mode);
 var temp=this._globalIdStorageFind(itemId);
 if(!temp)return 0;
 if(this._getOpenState(temp.parentObject)==-1)
 this.openItem(itemId);
 if(mode)
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],false);
 else
 this.onRowSelect(0,temp.htmlNode.childNodes[0].childNodes[0].childNodes[3],true);
};
 
 
 dhtmlXTreeObject.prototype.getSelectedItemText=function()
{
 if(this.lastSelected)
 return this.lastSelected.parentObject.htmlNode.childNodes[0].childNodes[0].childNodes[3].childNodes[0].innerHTML;
 else return("");
};




 
 dhtmlXTreeObject.prototype._compressChildList=function(Count,Nodes)
{
 Count--;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i]==0){Nodes[i]=Nodes[i+1];Nodes[i+1]=0;}
};
};
 
 dhtmlXTreeObject.prototype._deleteNode=function(itemId,htmlObject,skip){

 if(!skip){
 this._globalIdStorageRecSub(htmlObject);
}
 
 if((!htmlObject)||(!htmlObject.parentObject))return 0;
 var tempos=0;var tempos2=0;
 if(htmlObject.tr.nextSibling)tempos=htmlObject.tr.nextSibling.nodem;
 if(htmlObject.tr.previousSibling)tempos2=htmlObject.tr.previousSibling.nodem;
 
 var sN=htmlObject.parentObject;
 var Count=sN.childsCount;
 var Nodes=sN.childNodes;
 for(var i=0;i<Count;i++)
{
 if(Nodes[i].id==itemId){
 if(!skip)sN.htmlNode.childNodes[0].removeChild(Nodes[i].tr);
 Nodes[i]=0;
 break;
}
}
 this._compressChildList(Count,Nodes);
 if(!skip){
 sN.childsCount--;
}

 if(tempos){
 this._correctPlus(tempos);
 this._correctLine(tempos);
}
 if(tempos2){
 this._correctPlus(tempos2);
 this._correctLine(tempos2);
}
 if(this.tscheck)this._correctCheckStates(sN);
};
 
 dhtmlXTreeObject.prototype.setCheck=function(itemId,state){
 state=convertStringToBoolean(state);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(!this.tscheck)return this._setSubChecked(state,sNode);
 else this._setCheck(sNode,state);
 this._correctCheckStates(sNode.parentObject);
};
 
 dhtmlXTreeObject.prototype._setCheck=function(sNode,state){
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state=="notsure")sNode.checkstate=2;
 else if(state)sNode.checkstate=1;else sNode.checkstate=0;
 
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};
 
 
dhtmlXTreeObject.prototype.setSubChecked=function(itemId,state){
 var sNode=this._globalIdStorageFind(itemId);
 this._setSubChecked(state,sNode);
 this._correctCheckStates(sNode.parentObject);
}
 
 dhtmlXTreeObject.prototype._setSubChecked=function(state,sNode){
 state=convertStringToBoolean(state);
 if(!sNode)return;
 for(var i=0;i<sNode.childsCount;i++)
{
 this._setSubChecked(state,sNode.childNodes[i]);
};
 var z=sNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
 if(state)sNode.checkstate=1;
 else sNode.checkstate=0;
 z.src=this.imPath+this.checkArray[sNode.checkstate];
};

 
 dhtmlXTreeObject.prototype.isItemChecked=function(itemId){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 return sNode.checkstate;
};
 




 
 dhtmlXTreeObject.prototype.getAllChecked=function(){
 return this._getAllChecked("","",1);
}
 
 dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
 return this._getAllChecked("","",0);
}
 
 
 dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
 if(!htmlNode)htmlNode=this.htmlNode;
 if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
 var j=htmlNode.childsCount;
 for(var i=0;i<j;i++)
{
 list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
 if(list)return list;else return "";
};
 
 dhtmlXTreeObject.prototype.deleteChildItems=function(itemId)
{
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 var j=sNode.childsCount;
 for(var i=0;i<j;i++)
{
 this._deleteNode(sNode.childNodes[0].id,sNode.childNodes[0]);
};
};
 
 
dhtmlXTreeObject.prototype.deleteItem=function(itemId,selectParent){
 this._deleteItem(itemId,selectParent);
}
 
dhtmlXTreeObject.prototype._deleteItem=function(itemId,selectParent,skip){
 selectParent=convertStringToBoolean(selectParent);
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return;
 if(selectParent)this.selectItem(this.getParentId(this.getSelectedItemId()),1);
 if(!skip){
 this._globalIdStorageRecSub(sNode);
};
 var zTemp=sNode.parentObject;
 this._deleteNode(itemId,sNode,skip);
 this._correctPlus(zTemp);
 this._correctLine(zTemp);
};
 
 
 dhtmlXTreeObject.prototype._globalIdStorageRecSub=function(itemObject){
 for(var i=0;i<itemObject.childsCount;i++)
{
 this._globalIdStorageRecSub(itemObject.childNodes[i]);
 this._globalIdStorageSub(itemObject.childNodes[i].id);
};
 this._globalIdStorageSub(itemObject.id);
};
 
 
 dhtmlXTreeObject.prototype.insertNewNext=function(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs){
 var sNode=this._globalIdStorageFind(parentItemId);
 if(!sNode)return(0);
 this._attachChildNode(0,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs,sNode);
};

 
 
 
 dhtmlXTreeObject.prototype.getItemIdByIndex=function(itemId,index){
 var z=this._globalIdStorageFind(itemId);
 if(!z)return 0;
 var temp=z.htmlNode.childNodes[0].childNodes[0];
 while(index>0)
{
 temp=temp.nextSibling;
 if((!temp)||(!temp.nodem))return 0;
 index--;
}
 return temp.nodem.id;
};
 
 dhtmlXTreeObject.prototype.getChildItemIdByIndex=function(itemId,index){
 var sNode=this._globalIdStorageFind(itemId);
 if(!sNode)return(0);
 if(this.hasChildren(itemId)<index)return 0;
 return sNode.htmlNode.childNodes[0].childNodes[index].nodem.id;
};


 
 

 
 dhtmlXTreeObject.prototype.setDragHandler=function(func){if(typeof(func)=="function")this.dragFunc=func;else this.dragFunc=eval(func);};
 
 
 dhtmlXTreeObject.prototype._clearMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className='standartTreeRow';
 if(htmlNode.parentObject.acolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.acolor;
}
};
 
 
 dhtmlXTreeObject.prototype.enableDragAndDrop=function(mode){this.dragAndDropOff=convertStringToBoolean(mode);};
 
 
 dhtmlXTreeObject.prototype._setMove=function(htmlNode){
 if(htmlNode.parentObject.span){
 htmlNode.parentObject.span.className='selectedTreeRow';
 if(htmlNode.parentObject.scolor)htmlNode.parentObject.span.style.color=htmlNode.parentObject.scolor;
}
};
 
 
 
dhtmlXTreeObject.prototype._createDragNode=function(htmlObject){
 dhtmlObject=htmlObject.parentObject;
 if(this.lastSelected)this._clearMove(this.lastSelected);
 var dragSpan=document.createElement('div');
 dragSpan.appendChild(document.createTextNode(dhtmlObject.label));
 dragSpan.style.position="absolute";
 dragSpan.className="dragSpanDiv";
 return dragSpan;
}

















 
dhtmlXTreeObject.prototype._preventNsDrag=function(e){
 if((e)&&(e.preventDefault)){e.preventDefault();return false;}
}

dhtmlXTreeObject.prototype._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
 if(!targetHtmlObject.parentObject){targetHtmlObject=this.htmlNode.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0];}
 else this._clearMove(targetHtmlObject);
 if(dhtmlObject.lastSelected)dhtmlObject._setMove(dhtmlObject.lastSelected);
 if((!this.dragMove)||(this.dragMove()))this._moveNode(sourceHtmlObject.parentObject,targetHtmlObject.parentObject);

}

dhtmlXTreeObject.prototype._dragIn=function(htmlObject,shtmlObject){
 if(!htmlObject.parentObject)
{
 
 return htmlObject;
}
 if((!this._checkParenNodes(shtmlObject.parentObject.id,htmlObject.parentObject,shtmlObject.parentObject))&&(htmlObject.parentObject.id!=shtmlObject.parentObject.id))
{
 this._setMove(htmlObject);
 if(this._getOpenState(htmlObject.parentObject)<0)
 this._autoOpenTimer=window.setTimeout(new callerFunction(this._autoOpenItem,this),1000);
 this._autoOpenId=htmlObject.parentObject.id;
 return htmlObject;
}
 else return 0;
}
dhtmlXTreeObject.prototype._autoOpenItem=function(e,treeObject){
 treeObject.openItem(treeObject._autoOpenId);
};
dhtmlXTreeObject.prototype._dragOut=function(htmlObject){
 if(!htmlObject.parentObject)return 0;
this._clearMove(htmlObject);if(this._autoOpenTimer)clearTimeout(this._autoOpenTimer);}



	</script>		
	
	<table>
		<tr>
			<td valign="top">
				<div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
			</td>
			<td  style="padding-left:25" valign="top">
			
			Two state checkboxes
			<a href="javascript:void(0);" onclick="tree.setCheck(tree.getSelectedItemId(),true);">Check item</a><br><br>
			<a href="javascript:void(0);" onclick="tree.setCheck(tree.getSelectedItemId(),false);">UnCheck item</a><br><br>
			<a href="javascript:void(0);" onclick="tree.setSubChecked(tree.getSelectedItemId(),true);">Check branch</a><br><br>
			<a href="javascript:void(0);" onclick="tree.setSubChecked(tree.getSelectedItemId(),false);">UnCheck branch</a><br><br>
			
			<a href="javascript:void(0);" onclick="alert(tree.getAllChecked());">Get list of checked</a><br><br>

			</td>
		</tr>
		<tr>
			<td valign="top">
				<div id="treeboxbox_tree2" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
			</td>
			<td  style="padding-left:25" valign="top">
			
						Three state checkboxes<br>
						<br>
						
			<a href="javascript:void(0);" onclick="tree2.setCheck(tree2.getSelectedItemId(),true);">Check item</a><br><br>
			<a href="javascript:void(0);" onclick="tree2.setCheck(tree2.getSelectedItemId(),false);">UnCheck item</a><br><br>
		
			<a href="javascript:void(0);" onclick="alert(tree2.getAllChecked());">Get list of checked</a><br><br>

			</td>
		</tr>
	</table>
	<hr>	
<XMP>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<script>
			tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
			tree.setImagePath("treeImgs/");
			//enable checkboxes
			tree.enableCheckBoxes(1);
			tree.loadXML("tree.xml");
			
			....
			//check item
			tree.setCheck(id,true);
			//uncheck item
			tree.setCheck(id,false);	
			//check branch
			tree.setSubChecked(id,true);
			//uncheck branch
			tree.setSubChecked(id,false);	
			//check item
			tree.setCheck(id,true);
			//return ids of checked items
			var list=tree.getAllChecked();	
</script>
</XMP>
	<script>
			tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
			tree.setImagePath("treeImgs/");
			tree.enableCheckBoxes(1);
			
			tree.loadXML("treeImgs/tree3.xml");
			
			tree2=new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
			tree2.setImagePath("treeImgs/");
			tree2.enableCheckBoxes(1);
			tree2.enableThreeStateCheckboxes(true);
			tree2.loadXML("treeImgs/tree3.xml");
						
	</script>
<br><br>

</body>
</html>