SHARE
TWEET

Untitled

a guest Nov 12th, 2019 86 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <link href="{{ asset('/assets/js/plugins/jstree/themes/default/style.min.css') }}" rel="stylesheet">
  2. <link href="{{ asset('/assets/js/plugins/jstree/themes/default-dark/style.min.css') }}" rel="stylesheet">
  3. <script src="{{ asset('/assets/js/plugins/jstree/jstree.min.js') }}" async></script>
  4. <script type="text/javascript">
  5.     var arrFull = [];
  6.     var arrs = [];
  7.  
  8.     function removeAllElements(array, elem) {
  9.         var index = array.indexOf(elem);
  10.         while (index > -1) {
  11.             array.splice(index, 1);
  12.             index = array.indexOf(elem);
  13.         }
  14.     }
  15.     addressbook = {
  16.         target : null,
  17.         tree : null,
  18.         selected : null,
  19.         open : function(id){
  20.             removeDataTable();
  21.             $('#modal-addressbook').modal('show');
  22.  
  23.             /**************************************** Init ****************************************/
  24.             addressbook.target = $("#" + id);
  25.             addressbook.tree = $('#tree-addressbook');
  26.             addressbook.selected = $('#addressbook-selected');
  27.  
  28.             /**************************************** Tree Structure ****************************************/
  29.  
  30.             addressbook.tree
  31.                 .on('changed.jstree', function (e, data) {
  32.                     var node = data.node;
  33.                     if(!node.children.length){
  34.                         addressbook.add({id : node.id, text : node.text});
  35.                     }
  36.                 })
  37.                 .jstree({core : {data : {url: "/addressbook/childnode",
  38.                             'data' : function (node) {
  39.                                 return { 'id' : node.id };
  40.                             }
  41.  
  42.                         }}
  43.                 });
  44.  
  45.  
  46.             /**************************************** Tree Selected ****************************************/
  47.  
  48.             var dataSelected = [];
  49.             addressbook.selected.jstree({'core' : {'data' : 'dataSelected', 'check_callback' : true},
  50.                 "plugins" : [ "dnd","contextmenu"]});
  51.  
  52.             var select = addressbook.get();
  53.             for(var i in select){
  54.                 $('#addressbook-selected').jstree().delete_node([select[i]]);
  55.                 $('#addressbook-selected').jstree("refresh");
  56.             }
  57.  
  58.             var datleng = $(this.target)[0].getElementsByTagName("option").length;
  59.  
  60.             for (i = 0; i < datleng; i++)
  61.             {
  62.                 var names = $(this.target)[0].getElementsByTagName("option")[i].text;
  63.                 var ids = $(this.target)[0].getElementsByTagName("option")[i].value;
  64.  
  65.                 var obj = {
  66.                     'id': ids,
  67.                     'text': names
  68.                 };
  69.                 addressbook.add(obj);
  70.             }
  71.         },
  72.  
  73.  
  74.         add : function(node){
  75.             var selected = addressbook.get();
  76.             var doit = true;
  77.             for(var i in selected){if(selected[i].id === node.id){doit = false}}
  78.             if(doit){
  79.                 addressbook.selected.jstree('create_node', '#', node);
  80.                 arrFull.push([node.id, node.text]);
  81.             }
  82.         },
  83.  
  84.         get : function(){
  85.            //  var data = addressbook.selected.jstree()._model.data;
  86.            //  $.each(data, function () {
  87.            //     arrFull.push(this.id);
  88.            //  });
  89.            //
  90.            //  arrs.push(arrFull[0]);
  91.            //  arrFull.splice(0, arrFull.length);
  92.            // console.log(arrs);
  93.  
  94.             // var dt = addressbook.selected.jstree()._model.data;
  95.             // arrFull = [];
  96.             //
  97.             // for(var i in dt)
  98.             // {
  99.             //     arrFull.push(i);
  100.             //     i = [];
  101.             // }
  102.  
  103.  
  104.  
  105.             // arrs.push(arrFull[0]);
  106.             // removeAllElements(arrFull, '#');
  107.             // console.log(arrFull);
  108.  
  109.  
  110.             return addressbook.selected.jstree()._model.data;
  111.         },
  112.         remove : function(){
  113.             arrFull = [];
  114.             var select = addressbook.get();
  115.             for(var i in select){
  116.                 $('#addressbook-selected').jstree().delete_node([select[i]]);
  117.                 $('#addressbook-selected').jstree("refresh");
  118.             }
  119.         },
  120.  
  121.         save : function(){
  122.             addressbook.target.children().remove();
  123.  
  124.             for (var i = 0; i < arrFull.length; i++)
  125.             {
  126.                     addressbook.target.append("<option value='" + arrFull[i][0] + "' selected>" + arrFull[i][1] + "</option>");
  127.             }
  128.  
  129.             $('#modal-addressbook').modal('hide');
  130.             arrFull = [];
  131.         }
  132.     };
  133.  
  134.     window.onload = function(){
  135.         $('#btn-search').click(function () {
  136.             displayLoader();
  137.             var name = $('#search-address').val().toLowerCase();
  138.             $.ajax({
  139.                 type: "GET",
  140.                 url: "/addressbook/GetData",
  141.                 data: {
  142.                     'data': name
  143.                 },
  144.                 success: function (response) {
  145.                    
  146.                     $('#table-search tbody').empty();
  147.                     var tb = document.getElementById('table-search').getElementsByTagName('tbody')[0];
  148.                     var arr = tb.getElementsByTagName("tr");
  149.  
  150.                     for(i = 0; i<response['mess'].length; i++)
  151.                     {
  152.                         $('#table-search tbody').append(`<tr id="${response['idOrg'][i]}" class="selected"><td>${response['mess'][i]}</td></tr>`);
  153.                         arr[i].addEventListener('click', function () {
  154.                             // console.log($(this).attr('id'));
  155.                             // console.log(this.getElementsByTagName("td")[0].innerHTML);
  156.                             addNode($(this).attr('id'), this.getElementsByTagName("td")[0].innerHTML);
  157.                         });
  158.                     }
  159.                     hideLoader();
  160.                 }
  161.  
  162.             })
  163.         });
  164.  
  165.  
  166.         $("#search-address").on('keydown', function (e) {
  167.             if(e.keyCode == 8){
  168.                 $('#table-search tbody').empty();
  169.             }
  170.         })
  171.     };
  172.  
  173.     function addNode(id, name) {
  174.         var node = {
  175.             'id': id,
  176.             'text': name
  177.         };
  178.         addressbook.add(node)
  179.     }
  180.  
  181.  
  182.     function removeDataTable() {
  183.         $('#search-address').val("");
  184.         $('#table-search tbody').empty();
  185.         $("#JSTreeRes").text("Find Employee...");
  186.     }
  187.  
  188.     function displayLoader() {
  189.      $('#divLoading').css("visibility", "visible");
  190.     }
  191.  
  192.     function hideLoader() {
  193.      $('#divLoading').css("visibility", "hidden");
  194.     }
  195. </script>
  196.  
  197. <div id="modal-addressbook" class="modal fade addressbook" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  198.     <div class="modal-dialog" role="document">
  199.         <div class="modal-content modal-addressbook">
  200.             <div class="modal-header">
  201.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  202.                 <h4 class="modal-title">Addressbook</h4>
  203.             </div>
  204.             <div class="modal-body">
  205.                 <div class="tabs-container" style="width: 400px;">
  206.                     <ul class="nav nav-tabs" role="tablist">
  207.                         <li class="active"><a class="nav-link active" data-toggle="tab" href="#addressbook-tab-1">Organization Structure</a></li>
  208.                         <li><a class="nav-link" data-toggle="tab" href="#addressbook-tab-2">Employee</a></li>
  209.                     </ul>
  210.                     <div class="tab-content" >
  211.                         <div role="tabpanel" id="addressbook-tab-1" class="tab-pane active" >
  212.                             <div class="panel-body addressbook-content">
  213.                                 <div id="tree-addressbook"></div>
  214.                             </div>
  215.                         </div>
  216.                         <div role="tabpanel" id="addressbook-tab-2" class="tab-pane">
  217.                             <div class="panel-body addressbook-content">
  218.                                 <div class="form-inline">
  219.                                     <label>Cari User:</label>
  220.                                     <input type="text" class="form-control m-l-xl" name="search-address" id="search-address" placeholder="Ketik Kata Kunci..." autocomplete="off">
  221.                                     <button class="btn btn-primary glyphicon glyphicon-search" id="btn-search" type="button"></button>
  222.                                 </div>
  223.                                 <table class="table table-hover" id="table-search">
  224.                                     <thead>
  225.                                     <tr>
  226.                                         <th>Name</th>
  227.                                     </tr>
  228.                                     </thead>
  229.                                     <tbody id="tbodyid">
  230.                                     <tr>
  231.                                         <td id="JSTreeRes"></td>
  232.                                     </tr>
  233.                                     </tbody>
  234.                                 </table>
  235.                             </div>
  236.                         </div>
  237.                     </div>
  238.                 </div>
  239.                 <div class="addressbook-selected" style="width: 350px;">
  240.                     <h4>Selected</h4>
  241.                     <div id="addressbook-selected"></div>
  242.                 </div>
  243.             </div>
  244.             <div class="modal-footer">
  245.                 <button type="button" class="btn btn-default" onclick="addressbook.remove()">Hapus</button>
  246.                 <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-bottom: 5px">Cancel</button>
  247.                 <button type="button" class="btn btn-primary" onclick="addressbook.save()" style="margin-bottom: 5px">OK</button>
  248.             </div>
  249.         </div>
  250.     </div>
  251.       <div id="divLoading" class="divLoading" style="visibility:hidden">
  252.           <img src="{{ asset('assets/font-awesome/load-spin.gif') }}">
  253.       </div>
  254. </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top