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.