Multi-select Treeview With Checkbox - jQuery TreeView

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.