Editable Selectable Tree View Plugin - jQuery TreeEditor
File Size: | 22.3 KB |
---|---|
Views Total: | 1878 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.