Editable Selectable Tree View Plugin - jQuery TreeEditor

TreeEditor is a jQuery tree plugin to dynamically generate an editable, checkable, and hierarchical tree structure from a JavaScript array.

Features:

• Minimal clean interface.
• Each node is editable.
• Insert/delete nodes.
• Select nodes via checkboxes or radio buttons.
• Smooth collapse/expand animations.

How to use it:

1. Create an empty DIV container for the tree.

<div class="example"></div>

2. Load the jQuery TreeEditor plugin's files in the document.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery TreeEditor -->
<script src="js/dinamp.treeeditor.js"></script>
<link rel="stylesheet" href="css/treeeditor.css" />

3. Define your hierarchical data in a JS array as follows:

var data = [
    {
      title: "Warehouse",
      children: [
        {
          title:"Shelfs A",
          children: [
            {title:"Shelf A1"},
            {title:"Shelf A2"},
            {title:"Shelf A3"},
            {title:"Shelf A4"}
          ]
        },
        {
          title:"Shelfs B",
          children: [
            {title:"Shelf B1"},
            {title:"Shelf B2"}
          ]
        },
        {title:"Ground"}
      ]
    }
];

3. Initialize the plugin to generate a basic tree.

const myTree = new DinampTreeEditor('.example').setData(data);

4. Add radio buttons or checkboxes to tree nodes.

const myTree = new DinampTreeEditor('.example').setData(data).set({
      radios: true,
      oncheck: function(state, text, path) {
        // do something
      }
});;

const myTree = new DinampTreeEditor('.example').setData(data).set({
      checkboxes: true,
      onchange: function(tree) {
        // JSON.stringify(tree.getData());
      }
});;

5. Disable the Editable functionality.

const myTree = new DinampTreeEditor('.example').setData(data).set({
      editable: false,
});;

6. Collapse all nodes on page load.

const myTree = new DinampTreeEditor('.example').setData(data).set({
      extended: false,
});;

---

This awesome jQuery plugin is developed by FFlaser. For more Advanced Usages, please check the demo page or visit the official website.