Skip to content

jQuery lightweight plugin that provides creation of interactive trees.

Notifications You must be signed in to change notification settings

enrico-sorcinelli/jquery-flex-tree

Repository files navigation

jQuery Flex Tree

jQuery Flex Tree is a lightweight jQuery plugin that provides creation of interactive trees.

  • Checkbox collapsable tree with three state handling.
  • Radio collapsable tree.
  • Plain text collapsable tree.

jQuery Flex Tree is extendable and skinnable.

jQuery Flex Tree has been tested with jQuery 1.12.4, 2.2.4 and 3.5.1.

Getting started

Include library files

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="flex-tree.min.css">
<script type="text/javascript" src="flex-tree.min.js"></script>

<div id="my-tree"></div>
<script type="text/javascript">
$( '#my-tree' ).flexTree( options );
</script>

Arguments

Name Type Default Description
items array undefined Tree items. Each item should be an object with following keys: label, value, checked (optional), id (optional), and name (optional).
build boolean true Build HTML structure.
targetElement object $(this) jQuery target element object.
debug boolean false Debug mode.
type string undefined Type of <input>. Possible values are: checkbox, radio. Default to plain text.
name string flex_tree Name of <input> elements.
className string flex-tree Class name widget.
collapsable boolean true Make tree collapsable.
collapsed boolean false Collapsed tree on load
addControlOnParent boolean true Add radio/checkbox <input> element also on parent item.
threeState boolean true Enable three state behavior with checkboxes.

Creating tree

<div id="my-tree"></div>
<script type="text/javascript">
$( '#my-tree' ).flexTree( {
	type: 'checkbox',
	name: 'foo',
	collapsed: false,
	items: [
		{
			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'
								}
							]
						},
						{
							label: 'Item 1.2.2',
							value: 'item_1_2_2'
						}
					]
				},
				{
					label: 'Item 1.3',
					value: 'item_1_3',
					checked: true
				}
			]
		},
		{
			label: 'Item 2',
			childrens: [
				{
					label: 'Item 2.1',
					value: 'item_2_1',
					checked: true
				}
			]
		}
	]
} );
</script>

Live examples

About

jQuery lightweight plugin that provides creation of interactive trees.

Resources

Stars

Watchers

Forks

Packages

No packages published