DHTML Tree samples. dhtmlXTree - Checkboxes
Checkboxes
.defaultTreeTable{
margin : 0;
padding : 0;
border : 0;
}
.containerTableStyle { overflow : auto;}
.standartTreeRow{ font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 12px; -moz-user-select: none; }
.standartTreeImage{ width:18px; height:18px; overflow:hidden; border:0; padding:0; margin:0; }
.hiddenRow { width:1px; overflow:hidden; }
.dragSpanDiv{ font-size : 12px; border: thin solid 1 1 1 1; }
Two state checkboxes
Check item
UnCheck item
Check branch
UnCheck branch
Get list of checked
Three state checkboxes
Check item
UnCheck item
Get list of checked
<br/><div id="treeboxbox_tree" style="width:200;height:200"></div><br/><script><br/> tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);<br/> tree.setImagePath("treeImgs/");<br/> //enable checkboxes<br/> tree.enableCheckBoxes(1);<br/> tree.loadXML("tree.xml");<br/> <br/> ....<br/> //check item<br/> tree.setCheck(id,true);<br/> //uncheck item<br/> tree.setCheck(id,false); <br/> //check branch<br/> tree.setSubChecked(id,true);<br/> //uncheck branch<br/> tree.setSubChecked(id,false); <br/> //check item<br/> tree.setCheck(id,true);<br/> //return ids of checked items<br/> var list=tree.getAllChecked(); <br/></script><br/>
fancyTree.zip( 110 k)