Tree View
JqTree is a jQuery widget for displaying a tree structure in html. It supports json data, loading via ajax and drag-and-drop.
Basic example
Load a simple json data in javascript tree.
<div class="treeview"></div>
// Json tree
var treeviewData = [
{
name: 'node1',
children: [
{
name: 'node1_1',
children: [
{ name: 'node1_1_1' },
{ name: 'node1_1_2' },
{ name: 'node1_1_3' }
]
},
{ name: 'node1_2' },
{ name: 'node1_3' }
]
},
{
name: 'node2',
children: [
{ name: 'node2_1' },
{ name: 'node2_2' },
{ name: 'node2_3' }
]
},
{
name: 'node3',
children: [
{ name: 'node3_1' },
{ name: 'node3_2' },
{ name: 'node3_3' }
]
}
];
// Initiate treeview
if($('.treeview')[0]) {
$('.treeview').tree({
data: treeviewData,
closedIcon: $('<i class="zmdi zmdi-plus"></i>'),
openedIcon: $('<i class="zmdi zmdi-minus"></i>')
});
}
Expanded
Expand all hidden branches using autoOpen
<div class="treeview-expanded"></div>
// Json tree
var treeviewData = [
{
name: 'node1',
children: [
{
name: 'node1_1',
children: [
{ name: 'node1_1_1' },
{ name: 'node1_1_2' },
{ name: 'node1_1_3' }
]
},
{ name: 'node1_2' },
{ name: 'node1_3' }
]
},
{
name: 'node2',
children: [
{ name: 'node2_1' },
{ name: 'node2_2' },
{ name: 'node2_3' }
]
},
{
name: 'node3',
children: [
{ name: 'node3_1' },
{ name: 'node3_2' },
{ name: 'node3_3' }
]
}
];
// Initiate treeview
if($('.treeview-expanded')[0]) {
$('.treeview-expanded').tree({
data: treeviewData,
autoOpen: true,
closedIcon: $('<i class="zmdi zmdi-plus"></i>'),
openedIcon: $('<i class="zmdi zmdi-minus"></i>')
});
}
Drag and drop
Add drag-and-drop support by setting the option dragAndDrop
to true
. You can now drag tree nodes to another position.
autoEscape
You can put html in the node titles setting the autoEscape
option to false
Files required:
Type | Files |
---|---|
Custom SCSS | /src/scss/inc/vendor-overrides/_jqtree.scss |
Javascript | /src/js/vendors/jqtree.js |
Library |
/resources/vendors/jqtree/jqtree.css
/resources/vendors/jqtree/jqtree.js
|