Dynamic Tree View Plugin jQuery Bootstrap - Download Dynamic Tree View Plugin With jQuery And Bootstrap

Download Dynamic Tree View Plugin With jQuery And Bootstrap

By Posted on

This time I will share jQuery Plugin and tutorial about Dynamic Tree View Plugin With jQuery And Bootstrap, hope it will help you in programming stack.

Dynamic Tree View Plugin jQuery Bootstrap - Download Dynamic Tree View Plugin With jQuery And Bootstrap
File Size: 171 KB
Views Total: 107696
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A jQuery treeview plugin that helps you render a dynamic, checkable, filterable, collapsible, vertical hierarchical tree from a JSON schema. Licensed under the Apache License, Version 2.0.

How to use it:

1. Make sure you first have jQuery library and Twitter Bootstrap‘s stylesheet are loaded in the document.

view source
1 <link rel="stylesheet" href="bootstrap.min.css">
2 <script src="//code.jquery.com/jquery.min.js"></script>

2. Load the jQuery Bootstrap tree view plugin’s files in the document.

view source
1 <link rel="stylesheet" href="bootstrap-treeview.css">
2 <script src="bootstrap-treeview.js"></script>

3. Create a placeholder element for the tree view.

view source
1 <div id="default-tree"></div>

4. The required JSON structure to hold your hierarchical data.

view source
01 var myTree = [
02     {
03       text: "Item 1",
04       nodes: [
05         {
06           text: "Item 1-1",
07           nodes: [
08             {
09               text: "Item 1-1-1"
10             },
11             {
12               text: "Item 1-1-2"
13             }
14           ]
15         },
16         {
17           text: "Item 1-2"
18         }
19       ]
20     },
21     {
22       text: "Item 2"
23     },
24     {
25       text: "Item 3"
26     }
27     ...
28 ];

5. Render a default tree view inside the DIV container you just created.

view source
1 $('#default-tree').treeview({
2   data: myTree
3 });

6. All customization options for the tree view.

view source
01 $('#default-tree').treeview({
02  
03   // expanded to 2 levels
04   levels: 2,
05  
06   // custom icons
07   expandIcon: 'glyphicon glyphicon-plus',
08   collapseIcon: 'glyphicon glyphicon-minus',
09   emptyIcon: 'glyphicon',
10   nodeIcon: '',
11   selectedIcon: '',
12   checkedIcon: 'glyphicon glyphicon-check',
13   uncheckedIcon: 'glyphicon glyphicon-unchecked',
14  
15   // colors
16   color: undefined, // '#000000',
17   backColor: undefined, // '#FFFFFF',
18   borderColor: undefined, // '#dddddd',
19   onhoverColor: '#F5F5F5',
20   selectedColor: '#FFFFFF',
21   selectedBackColor: '#428bca',
22   searchResultColor: '#D9534F',
23   searchResultBackColor: undefined, //'#FFFFFF',
24  
25   // enables links
26   enableLinks: false,
27  
28   // highlights selected items
29   highlightSelected: true,
30  
31   // highlights search results
32   highlightSearchResults: true,
33  
34   // shows borders
35   showBorder: true,
36  
37   // shows icons
38   showIcon: true,
39  
40   // shows checkboxes
41   showCheckbox: false,
42  
43   // shows tags
44   showTags: false,
45  
46   // enables multi select
47   multiSelect: false
48  
49 });

7. Event handlers available.

view source
01 $('#default-tree').treeview({
02  
03   onNodeChecked: undefined,
04   onNodeCollapsed: undefined,
05   onNodeDisabled: undefined,
06   onNodeEnabled: undefined,
07   onNodeExpanded: undefined,
08   onNodeSelected: undefined,
09   onNodeUnchecked: undefined,
10   onNodeUnselected: undefined,
11   onSearchComplete: undefined,
12   onSearchCleared: undefined
13  
14 });

8. All available methods.

view source
01 // check all nodes
02 $('#default-tree').treeview('checkAll', { silent: true });
03  
04 // checks a given node
05 $('#default-tree').treeview('checkNode', [ nodeId, { silent: true } ]);
06  
07 // clears search results
08 $('#default-tree').treeview('clearSearch');
09  
10 // collapses all nodes
11 $('#default-tree').treeview

source : jqueryscript.net

Related posts: