
The jQuery Flex Tree plugin presents hierarchical data in a dynamic, interactive, collapsible tree structure with checkbox and radio button support.
More features:
- Collapsible and expandable.
- Slide and fade animations.
- Supports indeterminate checkboxes.
- Cross browser.
How to use it:
1. Insert jQuery library together with the flex tree plugin's files into the html page.
<link href="dist/flex-tree.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="dist/flex-tree.min.js"></script>
2. Create a container to place the tree view.
<div id="flex-tree-container"></div>
3. Define your own hierarchical data in an array or JSON object.
const myData = [ { label: 'Item 1', childrens: [ { label: 'Item 1.1', value: 'item_1_1', checked: true }, { label: 'Item 1.2', value: 'item_1_2', childrens: [ { label: 'Item 1.2.1', value: 'item_1_2_1', childrens: [ { label: 'Item 1.2.2.1', value: 'item_1_2_2_1' }, { label: 'Item 1.2.2.2', value: 'item_1_2_2_2', id: 'foo' } ] }, ]} ]} ]
4. Render a basic tree view inside the container element you just created.
$('#flex-tree-container').flexTree({ items: myData });
5. Add input controls (e.g. checkboxes or radio buttons) to the tree nodes.
$('#flex-tree-container').flexTree({ items: myData, type: 'checkbox', }); $('#flex-tree-container').flexTree({ items: myData, type: 'radio', });
6. Possible options to customize the tree view.
- buildTree: Build html structure.
- targetElement: jQuery target element object.
- debug: Debug mode.
- type: Type of <input>.
- name: Name of <input> elements.
- className: Class name widget.
- collapsable: Make tree collapsable.
- collapsed: Collapsed tree on load.
$('#flex-tree-container').flexTree({ id: undefined, targetElement: $(this), type: undefined, debug: false, name: 'flex_tree', className: 'flex-tree', buildTree: true, collapsed: false, collapsable: true });
This awesome jQuery plugin is developed by enrico-sorcinelli. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 28.11.2018
- Source