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.
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.
This awesome plugin is developed by shatle. Visit their official github repository for more information and follow for future updates.