JAVASCRIPT   50

tree

Guest on 8th July 2022 01:30:17 AM

  1. var TreeView = function () {
  2.  
  3.     return {
  4.         //main function to initiate the module
  5.         init: function () {
  6.  
  7.             var DataSourceTree = function (options) {
  8.                 this._data  = options.data;
  9.                 this._delay = options.delay;
  10.             };
  11.  
  12.             DataSourceTree.prototype = {
  13.  
  14.                 data: function (options, callback) {
  15.                     var self = this;
  16.  
  17.                     setTimeout(function () {
  18.                         var data = $.extend(true, [], self._data);
  19.  
  20.                         callback({ data: data });
  21.  
  22.                     }, this._delay)
  23.                 }
  24.             };
  25.  
  26.             // INITIALIZING TREE
  27.             var treeDataSource = new DataSourceTree({
  28.                 data: [
  29.                     { name: 'Dashboard', type: 'folder', additionalParameters: { id: 'F1' } },
  30.                     { name: 'Elements', type: 'folder', additionalParameters: { id: 'F2' } },
  31.                     { name: 'View Category', type: 'item', additionalParameters: { id: 'I1' } },
  32.                     { name: 'Testing', type: 'item', additionalParameters: { id: 'I2' } }
  33.                 ],
  34.                 delay: 400
  35.             });
  36.  
  37.             var treeDataSource2 = new DataSourceTree({
  38.                 data: [
  39.                     { name: 'Test tree 1 <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F11' } },
  40.                     { name: 'Test tree 2 <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F12' } },
  41.                     { name: '<i class="fa fa-bell-o"></i> Notification', type: 'item', additionalParameters: { id: 'I11' } },
  42.                     { name: '<i class="fa fa-bar-chart-o"></i> Assignment', type: 'item', additionalParameters: { id: 'I12' } }
  43.                 ],
  44.                 delay: 400
  45.             });
  46.  
  47.             var treeDataSource3 = new DataSourceTree({
  48.                 data: [
  49.                     { name: 'Dashboard <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F11' } },
  50.                     { name: 'View Category <div class="tree-actions"></div>', type: 'folder', additionalParameters: { id: 'F12' } },
  51.                     { name: 'Bucket Theme', type: 'item', additionalParameters: { id: 'I11' } },
  52.                     { name: 'Modern Elements', type: 'item', additionalParameters: { id: 'I12' } }
  53.                 ],
  54.                 delay: 400
  55.             });
  56.  
  57.             var treeDataSource4 = new DataSourceTree({
  58.                 data: [
  59.                     { name: 'Dashboard<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' } },
  60.                     { name: 'View Category<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' } },
  61.                     { name: '<i class="fa fa-user"></i> User <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' } },
  62.                     { 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' } },
  63.                     { name: '<i class="fa  fa-gear "></i> Works <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' } }
  64.                 ],
  65.                 delay: 400
  66.             });
  67.  
  68.             var treeDataSource5 = new DataSourceTree({
  69.                 data: [
  70.                     { name: 'Dashboard<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' } },
  71.                     { name: 'View Category<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' } },
  72.                     { name: '<i class="fa fa-user"></i> User <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' } },
  73.                     { 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' } },
  74.                     { name: '<i class="fa  fa-gear "></i> Works <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' } }
  75.                 ],
  76.                 delay: 400
  77.             });
  78.  
  79.             var treeDataSource6 = new DataSourceTree({
  80.                 data: [
  81.                     { name: 'Dashboard<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' } },
  82.                     { name: 'View Category<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' } },
  83.                     { name: '<i class="fa fa-user"></i> User <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' } },
  84.                     { 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' } },
  85.                     { name: '<i class="fa  fa-gear "></i> Works <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' } }
  86.                 ],
  87.                 delay: 400
  88.             });
  89.  
  90.             $('#FlatTree').tree({
  91.                 dataSource: treeDataSource,
  92.                 loadingHTML: '<img src="images/input-spinner.gif"/>',
  93.             });
  94.  
  95.  
  96.             $('#FlatTree2').tree({
  97.                 dataSource: treeDataSource2,
  98.                 loadingHTML: '<img src="images/input-spinner.gif"/>',
  99.             });
  100.  
  101.             $('#FlatTree3').tree({
  102.                 dataSource: treeDataSource3,
  103.                 loadingHTML: '<img src="images/input-spinner.gif"/>',
  104.             });
  105.  
  106.             $('#FlatTree4').tree({
  107.                 selectable: false,
  108.                 dataSource: treeDataSource4,
  109.                 loadingHTML: '<img src="images/input-spinner.gif"/>',
  110.             });
  111.  
  112.  
  113.         }
  114.  
  115.     };
  116.  
  117. }();

Raw Paste


Login or Register to edit or fork this paste. It's free.