Multi Select With Checkbox Tree Plugin – jquery.treeSelector
In this tutorial I am going to share a jQuery Plugin which enables the user to select multiple options from a dynamic hierarchical tree structure with checkboxes feature. The selected tree nodes can be deleted in a container just like the token/tag input by clicking on cross(X) button.
Libraries
Load the required jQuery and the jQuery treeSelector plugin’s files, also load fontawesome library to use icon.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous"> <link rel="stylesheet" href="jquery.treeSelector.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="jquery.treeSelector.js"></script> |
HTML
Create simple html container where you want to render the Multi Select With Checkbox Tree.
<div class="treeSelector"></div> |
JS
Define your own hierarchical data in array form to be presented in the tree view.
var rootNode = [{ "id": "1", "title": "Node 0", value: 1, "children": [ { "id": "1-1", "title": "Node 1-1", value: 11, "children": [ { "id": "1-1-1", "title": "Node 1-1-1", value: 111, "children": [] }, { "id": "1-1-2", "title": "Node 1-1-2", value: 112, "children": [] } ] }, { "id": "1-2", "title": "Node 1-2", value: 12, "children": [ { "id": "1-2-1", "title": "Node 1-2-1", value: 121, "children": [] } ] }, { "id": "1-3", "title": "Node 1-3", value: 13, "children": [] } ] }] |
Render the tree structure in the container and specify the pre-selected nodes as follows:
$('div.treeSelector').treeSelector(rootNode, [11, 12], function (e, values) { console.info('onChange', e, values); }, { checkWithParent: true, titleWithParent: true, notViewClickParentTitle: true }); |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome plugin is developed by shatle. Visit their official github repository for more information and follow for future updates.