This time I will share jQuery Plugin and tutorial about Multi Select With Checkbox Tree – jQuery treeSelector, hope it will help you in programming stack.
| File Size: | 6.17 KB |
|---|---|
| Views Total: | 15808 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
The jQuery treeSelector plugin enables the user to select multiple options from a dynamic hierarchical tree structure with checkboxes.
The selected tree nodes can be deleted in a container just like the token/tag input.
How to use it:
1. Link to jQuery and the jQuery treeSelector plugin’s files:
1 |
<link rel="stylesheet" href="jquery.treeSelector.css"> |
2 |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" |
3 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
4 |
crossorigin="anonymous"> |
5 |
</script> |
6 |
<script src="jquery.treeSelector.js"></script> |
2. The plugin also requires Font Awesome for the icons.
1 |
<link rel="stylesheet" |
3 |
integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" |
4 |
crossorigin="anonymous"> |
3. Create a container in which you want to render the multi select component.
1 |
<div class="treeSelector"></div> |
4. Define your own hierarchical data to be presented in the tree view.
01 |
var rootNode = [{ |
02 |
"id": "1", |
03 |
"title": "Node 0", |
04 |
value: 1, |
05 |
"children": [ |
06 |
{ |
07 |
"id": "1-1", |
08 |
"title": "Node 1-1", |
09 |
value: 11, |
10 |
"children": [ |
11 |
{ |
12 |
"id": "1-1-1", |
13 |
"title": "Node 1-1-1", |
14 |
value: 111, |
15 |
"children": [] |
16 |
}, |
17 |
{ |
18 |
"id": "1-1-2", |
19 |
"title": "Node 1-1-2", |
20 |
value: 112, |
21 |
"children": [] |
22 |
} |
23 |
] |
24 |
}, |
25 |
{ |
26 |
"id": "1-2", |
27 |
"title": "Node 1-2", |
28 |
value: 12, |
29 |
"children": [ |
30 |
{ |
31 |
"id": "1-2-1", |
32 |
"title": "Node 1-2-1", |
33 |
value: 121, |
34 |
"children": [] |
35 |
} |
36 |
] |
37 |
}, |
38 |
{ |
39 |
"id": "1-3", |
40 |
"title": "Node 1-3", |
41 |
value: 13, |
42 |
"children": [] |
43 |
} |
44 |
] |
45 |
}] |
5. Render the tree structure in the container and specify the pre-selected nodes as follows:
1 |
$('div.treeSelector').treeSelector(rootNode, [11, 12]) |
6. Get the values you selected.
1 |
$('div.treeSelector').treeSelector(rootNode, [11, 12], function (e, values) { |
2 |
console.info('onChange', e, values); |
3 |
} |
7. Override the default settings to customize the plugin.
01 |
$('div.treeSelector').treeSelector(rootNode, [11, 12], function (e, values) { |
02 |
console.info('onChange', e, values); |
03 |
},{ |
04 |
05 |
// children checked/unchecked if true |
06 |
checkWithParent: false, |
07 |
08 |
// title with 'title1 - title 2' if true |
09 |
titleWithParent: false, |
10 |
11 |
// when item click, only view leaf title if true |
12 |
notViewClickParentTitle: false, |
13 |
14 |
// disable the plugin |
15 |
disabled: false, |
16 |
17 |
// placeholder if empty |
18 |
emptyOptonPlaceholder: 'no options' |
19 |
|
20 |
}) |
Changelog:
2019-01-27
- JS update
This awesome jQuery plugin is developed by shatle. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
