馃敂 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A lightweight, dynamic jQuery treeview plugin which enables the user to select multiple tree nodes with checkboxes.

tree-view

Documentation

jQuery TreeView Documentation

TreeView

	TreeView( DataStructure Object datas, OptionsStructure Object options ) 

Options Structure

	{ 		className : String Default "" 		showAlwaysCheckBox : Boolean Default False 		fold : Boolean Default false 		openAllFold : Boolean Default false 	} 

TreeView Structure

	e藱路 load ( DataStructure Object data ) 	e 路 save ( String type, Optional HTMLElement node) DataStrucute 		type -> [Default "tree", "list"] 		node -> Want To tree save from node 
e 路 update  v 路 HTMLElement root  

Node Structure

.treeview     p.group          i.fa[fold-button]          span.item               i.fa[check-icon=1]          p.group              span.item [check-value=0,1,2]                   i.fa[check-icon=1]     p.group ...

Data Structure

treeObject = [ 	{ 		text:"Parent 1", // Required 		checked:true, // Optional 		id:15,otherDatas:"Other Datas", // Other Datas Optional 		children:[ // Required 			{ text:"Child 1" /* Required */	}, 			{ text:"Child 2" /* Required */	} 		] 	}

HTML Node Structure

.item 	e 路 changeCheckState ( Integer value  ) 	e 路 setCheckState ( Integer value ) 
v 路 Integer checked v 路 Object data 

.group // e 路 open // e 路 close e 路 toggle

// v 路 isOpened 

Data Structure Example

treeObject = [ 	{ 		text:"Parent 1", // Required 		checked:true, // Optional 		id:15,otherDatas:"Other Datas", // Other Datas Optional 		children:[ // Required 			{ text:"Child 1" /* Required */	}, 			{ text:"Child 2" /* Required */	} 		] 	}, 	{ 		text:"Parent 2", // Required 		children:[ 			{ 				text:"Parent 3", 				children:[ 					{text:"Child 3",checked:true}, 					{text:"Child 4"} 				] 			} 		] 	} ]

You May Also Like