var UITree = function () {
|
|
return {
|
//main function to initiate the module
|
init: function () {
|
|
var DataSourceTree = function (options) {
|
this._data = options.data;
|
this._delay = options.delay;
|
};
|
|
DataSourceTree.prototype = {
|
|
data: function (options, callback) {
|
var self = this;
|
|
setTimeout(function () {
|
var data = $.extend(true, [], self._data);
|
|
callback({ data: data });
|
|
}, this._delay)
|
}
|
};
|
|
// INITIALIZING TREE
|
var treeDataSource = new DataSourceTree({
|
data: [
|
{ name: 'Sales', type: 'folder', additionalParameters: { id: 'F1' } },
|
{ name: 'Projects', type: 'folder', additionalParameters: { id: 'F2' } },
|
{ name: 'Reports', type: 'item', additionalParameters: { id: 'I1' } },
|
{ name: 'Finance', type: 'item', additionalParameters: { id: 'I2' } }
|
],
|
delay: 400
|
});
|
|
var treeDataSource2 = new DataSourceTree({
|
data: [
|
{ name: 'System Logs <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F11' } },
|
{ name: 'Notifications <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F12' } },
|
{ name: '<i class="fa fa-bell"></i> Alerts', type: 'item', additionalParameters: { id: 'I11' } },
|
{ name: '<i class="fa fa-bar-chart-o"></i> Tasks', type: 'item', additionalParameters: { id: 'I12' } }
|
],
|
delay: 400
|
});
|
|
var treeDataSource3 = new DataSourceTree({
|
data: [
|
{ name: 'Resources <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F11' } },
|
{ name: 'Projects <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F12' } },
|
{ name: 'Nike Promo 2013', type: 'item', additionalParameters: { id: 'I11' } },
|
{ name: 'IPO Reports', type: 'item', additionalParameters: { id: 'I12' } }
|
],
|
delay: 400
|
});
|
|
var treeDataSource4 = new DataSourceTree({
|
data: [
|
{ name: 'Projects<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F11' } },
|
{ name: 'Reports<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F12' } },
|
{ name: '<i class="fa fa-user"></i> Member <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div><div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I11' } },
|
{ name: '<i class="fa fa-calendar"></i> Events <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } },
|
{ name: '<i class="fa fa-suitcase"></i> Portfolio <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } }
|
],
|
delay: 400
|
});
|
|
var treeDataSource5 = new DataSourceTree({
|
data: [
|
{ name: 'Projects<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F11' } },
|
{ name: 'Reports<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F12' } },
|
{ name: '<i class="fa fa-user"></i> Member <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div><div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I11' } },
|
{ name: '<i class="fa fa-calendar"></i> Events <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } },
|
{ name: '<i class="fa fa-suitcase"></i> Portfolio <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } }
|
],
|
delay: 400
|
});
|
|
var treeDataSource6 = new DataSourceTree({
|
data: [
|
{ name: 'Projects<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F11' } },
|
{ name: 'Reports<div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'folder', additionalParameters: { id: 'F12' } },
|
{ name: '<i class="fa fa-user"></i> Member <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div><div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I11' } },
|
{ name: '<i class="fa fa-calendar"></i> Events <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } },
|
{ name: '<i class="fa fa-suitcase"></i> Portfolio <div class="tree-actions"><i class="fa fa-plus"></i><i class="fa fa-trash-o"></i><i class="fa fa-refresh"></i></div>', type: 'item', additionalParameters: { id: 'I12' } }
|
],
|
delay: 400
|
});
|
|
$('#MyTree').tree({
|
dataSource: treeDataSource,
|
loadingHTML: '<img src="assets/img/input-spinner.gif"/>',
|
});
|
|
|
$('#MyTree2').tree({
|
dataSource: treeDataSource2,
|
loadingHTML: '<img src="assets/img/input-spinner.gif"/>',
|
});
|
|
$('#MyTree3').tree({
|
dataSource: treeDataSource3,
|
loadingHTML: '<img src="assets/img/input-spinner.gif"/>',
|
});
|
|
$('#MyTree4').tree({
|
selectable: false,
|
dataSource: treeDataSource4,
|
loadingHTML: '<img src="assets/img/input-spinner.gif"/>',
|
});
|
|
$('#MyTree5').tree({
|
selectable: false,
|
dataSource: treeDataSource5,
|
loadingHTML: '<img src="assets/img/input-spinner.gif"/>',
|
});
|
|
$('#MyTree6').tree({
|
selectable: false,
|
dataSource: treeDataSource6,
|
loadingHTML: '<img src="assets/img/input-spinner.gif"/>',
|
});
|
}
|
|
};
|
|
}();
|
