Dynamic Checkable Tree View Plugin - jQuery Flex Tree

Dynamic Checkable Tree View Plugin - jQuery Flex Tree
File Size: 14.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.