Tree View - jqTree
JqTree is a jQuery widget for displaying a tree structure in html. It supports json data, loading via ajax and drag-and-drop.
Page Demo Plugin WebsiteBasic 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.
<div class="treeview-drag"></div>
if($('.treeview-drag')[0]) {
$('.treeview-drag').tree({
data: treeviewSimpleData,
dragAndDrop: true,
autoOpen: true,
closedIcon: $('<i class="zmdi zmdi-plus"></i>'),
openedIcon: $('<i class="zmdi zmdi-minus"></i>')
});
}
autoEscape
You can put html in the node titles setting the autoEscape
option to false
<div class="treeview-escape"></div>
if($('.treeview-escape')[0]) {
$('.treeview-escape').tree({
data: treeviewEscapeData,
autoEscape: false,
autoOpen: true,
closedIcon: $('<i class="zmdi zmdi-plus"></i>'),
openedIcon: $('<i class="zmdi zmdi-minus"></i>')
});
}
Requirements:
/scss/inc/vendor-overrides/_jqtree.scss
/vendors/jqTree/jqtree.css
/vendors/jqTree/tree.jquery.js