Multi-select Treeview With Checkbox - jQuery TreeView
File Size: | 16.7 KB |
---|---|
Views Total: | 30102 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight, dynamic jQuery treeview plugin which enables the user to select multiple tree nodes with checkboxes.
The checkable treeview supports 3 check state: checked, unchecked and indeterminate. Requires Font Awesome Iconic Font for the checkbox marks.
How to use it:
1. Load the necessary jQuery library and Font Awesome in the document.
<link href="/path/to/font-awesome.min.css" rel="stylesheet"> <script src="/path/to/jquery.min.js"></script>
2. Load the jQuery TreeView plugin's files in the document.
<link href="css/jquery.treeview.css" rel="stylesheet"> <script src="js/jquery.treeview.js"></script>
3. Define multi-level tree nodes in an array of JS objects & arrays.
var treeObject = [{ text:"Parent 1", // Required checked:true, // Optional id:15, otherDatas:"Other Datas", // Optional children:[ // Required { text:"Child 1" /* Required */, checked:true }, { text:"Child 2" /* Required */ } ]},{ text:"Parent 2", children:[ { text:"Parent 3", children:[ {text:"Child 3",checked:true}, {text:"Child 4"} ] } ]} ]
4. Initialize the treeview plugin.
var myTree = new TreeView(treeObject);
5. Append the treeview to the webpage.
document.body.appendChild(myTree.root)
6. Config the treeview by passing the followiong options object as the second parameter to the TreeView
function.
var myTree = new TreeView(treeObject,{ // always shows the checkboxes showAlwaysCheckBox: true, // is foldable? fold: true, // opens all nodes on init openAllFold: false });
This awesome jQuery plugin is developed by HasanDelibas. For more Advanced Usages, please check the demo page or visit the official website.