API tools faq
paste
Advertisement
ivandrofly

Project-MVC-editable-table

ivandrofly
May 22nd, 2016
343
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 17.14 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. // Will contain which type of item table contains.
  4. var tableType = null;
  5.  
  6. var EditableTable = function () {
  7.     return {
  8.  
  9.         //main function to initiate the module
  10.         init: function ($editableSample) {
  11.             // this object type.
  12.             // this.type = type;
  13.            
  14.             function restoreRow(oTable, nRow) {
  15.                 var aData = oTable.fnGetData(nRow);
  16.                 var jqTds = $('>td', nRow);
  17.  
  18.                 for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
  19.                     oTable.fnUpdate(aData[i], nRow, i, false);
  20.                 }
  21.  
  22.                 oTable.fnDraw();
  23.             }
  24.  
  25.             var useInputTag = false;
  26.  
  27.             function editRow(oTable, nRow) {
  28.                 var aData = oTable.fnGetData(nRow);
  29.                 var $jqTds = $('>td', nRow);
  30.                 switch(tableType){
  31.                     case 'group':
  32.                         editGroup($jqTds, aData);
  33.                         break;
  34.                     case 'user':
  35.                         editUser($jqTds, aData);
  36.                         break;
  37.                 }
  38.             }
  39.  
  40.             function saveRow(oTable, nRow) {
  41.  
  42.                 // SAVE WHEN ADD NEW.
  43.                 if (useInputTag) {
  44.                     // get only <input> element which is groupe-name from current row.
  45.                     var $jqInputs = $('input', nRow);
  46.                     switch(tableType)
  47.                     {
  48.                         case 'user':
  49.                             break;
  50.                         case 'group':
  51.                             saveGroupInfosNew($jqInputs)
  52.                             break;
  53.                     }
  54.                 }
  55.                 else // SAVE WHEN EDITIING
  56.                 {
  57.                     switch(tableType)
  58.                     {
  59.                         case 'user':
  60.                             break;
  61.                         case 'group':
  62.                             saveGroupeInfosEdit(nRow)
  63.                             break;
  64.                     }
  65.  
  66.                 }
  67.             }
  68.  
  69.             // NOT USED
  70.             function cancelEditRow(oTable, nRow) {
  71.                 var jqInputs = $('input', nRow);
  72.                 oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
  73.                 oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
  74.                 // $('td', nRow).eq().text();
  75.                 oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
  76.                 oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
  77.                 oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
  78.                 oTable.fnUpdate('<a class="edit" href="">Editer</a>', nRow, 5, false);
  79.                 oTable.fnDraw();
  80.             }
  81.  
  82.             // $('#editable-sample') == $table
  83.             var oTable = $editableSample.dataTable({
  84.                 "aLengthMenu": [
  85.                     [5, 15, 20, -1],
  86.                     [5, 15, 20, "All"] // change per page values here
  87.                 ],
  88.                 // set the initial value
  89.                 "iDisplayLength": 5,
  90.                 "sDom": "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>",
  91.                 "sPaginationType": "bootstrap",
  92.                 "oLanguage": {
  93.                     "sLengthMenu": "_MENU_ records per page",
  94.                     "oPaginate": {
  95.                         "sPrevious": "Prev",
  96.                         "sNext": "Next"
  97.                     }
  98.                 },
  99.                 "aoColumnDefs": [{
  100.                     'bSortable': false,
  101.                     'aTargets': [0]
  102.                 }
  103.                 ]
  104.             });
  105.  
  106.             var $editableSampleWrapper = $('#editable-sample_wrapper');
  107.             $editableSampleWrapper.find('.dataTables_filter input').addClass("form-control medium"); // modify table search input
  108.             $editableSampleWrapper.find('.dataTables_length select').addClass("form-control xsmall"); // modify table per page dropdown
  109.  
  110.             var nEditing = null;
  111.  
  112.             // FIRE WHEN ADD NEW IS CLICKED not dynamic which mean .
  113.             // event if new element is adding with this same (#editable-...) its binded with this.
  114.             $('#editable-sample_new').click(function (e) {
  115.                 e.preventDefault();
  116.  
  117.                 // TODO: make this specific per table type.
  118.                 var aiNew = oTable.fnAddData([guid(), '',
  119.                     // TODO: use calender/picker
  120.                     '<input type="date" name="date">',
  121.                     'Hors ligne',
  122.                     '<input type="checkbox" disabled="disabled" checked>',
  123.                     // TODO: Rename this to sauvegarder/enregistre
  124.                     '<a class="edit" href="">Save</a>',
  125.                     '<a class="cancel" data-mode="new" href="">Cancel</a>'
  126.                 ]);
  127.  
  128.                 // Prevent multiply adding.
  129.                 $(this).attr('disabled', 'disabled');
  130.  
  131.                 // TODO: change text from edit to save.
  132.                 var nRow = oTable.fnGetNodes(aiNew[0]);
  133.                 useInputTag = true;
  134.                 editRow(oTable, nRow);
  135.                 nEditing = nRow;
  136.             });
  137.  
  138.             // on binds dynamic clicking to new added element can use this method. Note: *click event is not dynamic!
  139.             $editableSample.on('click', 'a.delete', function (e) {
  140.                 console.log("delete clicked");
  141.                 e.preventDefault();
  142.  
  143.                 // TODO: Uncommet this!
  144.                 if (confirm("Voulez vous supprimer?") == false) {
  145.                     return;
  146.                 }
  147.  
  148.                 //console.log($(obj).html());
  149.  
  150.                 // $(this).toggle(2000)
  151.                 // $(this).toggle(1000);
  152.                 // console.log($(this).parents().parents().html());
  153.                 // console.log($(this).parents().parents().length);
  154.  
  155.                 // //console.log($(this).html());
  156.                 // var jqInputs = $('tr', $(this));
  157.  
  158.                 //console.log($(nRow).html().('input'));
  159.                 // console.log($(this).html());
  160.                 // console.log($(this).text());
  161.                 // console.log($(this).parents().html());
  162.  
  163.                 // console.log(jqInputs.html());
  164.                 // console.log(jqInputs.length);
  165.  
  166.                 var nRow = $(this).parents('tr')[0];
  167.                 var reference = $('td', nRow).first().text();
  168.  
  169.                 $.post('vue/Groupe/quickInsert.php',
  170.                     {
  171.                         reference: reference,
  172.                         function: 'delete'
  173.                     });
  174.  
  175.                 oTable.fnDeleteRow(nRow);
  176.             });
  177.  
  178.             $editableSample.on('click', 'a.cancel', function (e) {
  179.                 e.preventDefault();
  180.                 if ($(this).attr("data-mode") == "new") {
  181.                     var nRow = $(this).parents('tr')[0];
  182.                     oTable.fnDeleteRow(nRow);
  183.                     nEditing = null;
  184.                 } else {
  185.                     restoreRow(oTable, nEditing);
  186.                     nEditing = null;
  187.                 }
  188.                 enableAdd();
  189.             });
  190.  
  191.             $editableSample.on('click', 'a.edit', function (e) {
  192.                 e.preventDefault();
  193.  
  194.                 // disable add new click when editing...
  195.                 var $buttonAddNew = $('#editable-sample_new');
  196.                 if(!$buttonAddNew.is(":disabled"))
  197.                 {
  198.                     $buttonAddNew.attr('disabled', 'disabled');
  199.                 }
  200.  
  201.                 /* Get the row as a parent of the link that was clicked on */
  202.                 var nRow = $(this).parents('tr')[0];
  203.                 if (nEditing !== null && nEditing != nRow) {
  204.                     /* Currently editing - but not this row - restore the old before continuing to edit mode */
  205.                     restoreRow(oTable, nEditing);
  206.                     editRow(oTable, nRow);
  207.                     nEditing = nRow;
  208.                 } else if (nEditing == nRow && this.innerHTML == "Save") {
  209.                     /* Editing this row and want to save it */
  210.  
  211.                     // TODO: Do validation before calling this method.
  212.                     saveRow(oTable, nEditing);
  213.  
  214.                     // Enable adding.
  215.                     enableAdd();
  216.  
  217.                     // TODO: test.
  218.                     //console.log($(this).parents['tr'].eq(0) == null);
  219.  
  220.                     // remove disabled attribute
  221.                     // .('input [disabled="disabled"]').removeAttribute('disabled');
  222.                     //console.log($(nRow).children().removeAttr('disabled'));
  223.  
  224.                     //console.log($(nRow).html());
  225.                     // console.log($(nRow).children().html());
  226.                     //$(nRow).('input').removeAttr('disabled');
  227.                     // $(nRow).children().removeAttr("disabled");
  228.                     //console.log($(nRow).html());
  229.  
  230.                     // TODO: delete
  231.                     // try {
  232.                     //     var inputTag = $(nRow).children()
  233.                     //     console.log($(inputTag)[1].attributes);
  234.                     //     if (inputTag != null) {
  235.                     //         console.log($(inputTag).attr('disabled'));
  236.                     //     }
  237.                     // } catch (e) {
  238.                     //     console.log(e.toString());
  239.                     // }
  240.  
  241.  
  242.                     // $(nRow).remove(); works
  243.                     // $(nRow).("[disabled]").removeAttr("disabled");
  244.                     //console.log('input:' + $(nRow).children().html());
  245.                     nEditing = null;
  246.                     // alert("Updated! Do not forget to do some ajax to sync with backend :)");
  247.  
  248.                 } else {
  249.                     /* No edit in progress - let's start one */
  250.                     useInputTag = false;
  251.                     editRow(oTable, nRow);
  252.                     nEditing = nRow;
  253.                 }
  254.             });
  255.  
  256.             // ------------------- Helper functions
  257.             function enableAdd() {
  258.                 $('#editable-sample_new').removeAttr('disabled');
  259.             }
  260.  
  261.             function guid() {
  262.                 function s4() {
  263.                     return Math.floor((1 + Math.random()) * 0x10000)
  264.                         .toString(16)
  265.                         .substring(1);
  266.                 }
  267.  
  268.                 return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
  269.                     s4() + '-' + s4() + s4() + s4();
  270.             }
  271.  
  272.             function getDatePicker(){
  273.                 var strVar="";
  274.                 strVar += "                                <div class=\"form-group\">";
  275.                 strVar += "                                    <label class=\"control-label col-md-3\">Start with years viewMode<\/label>";
  276.                 strVar += "                                    <div class=\"col-md-4 col-xs-11\">";
  277.                 strVar += "";
  278.                 strVar += "                                        <div data-date-viewmode=\"years\" data-date-format=\"dd-mm-yyyy\" data-date=\"12-02-2012\"  class=\"input-append date dpYears\">";
  279.                 strVar += "                                            <input type=\"text\" readonly=\"\" value=\"12-02-2012\" size=\"16\" class=\"form-control\">";
  280.                 strVar += "                                                          <span class=\"input-group-btn add-on\">";
  281.                 strVar += "                                                            <button class=\"btn btn-primary\" type=\"button\"><i class=\"fa fa-calendar\"><\/i><\/button>";
  282.                 strVar += "                                                          <\/span>";
  283.                 strVar += "                                        <\/div>";
  284.                 strVar += "                                    <\/div>";
  285.                 strVar += "                                <\/div>";
  286.                 return strVar;
  287.  
  288.             }
  289.  
  290.             // -------------------- Group helper functions
  291.             function editGroup($jqTds, aData){
  292.                 // Adding new row
  293.                 if (useInputTag) {
  294.                     // if($(jqTds[0]).is(":visible"))
  295.                     // {
  296.                     //     console.log('hide')
  297.                     //     $(jqTds[0]).hide();
  298.                     // }
  299.                     // ref
  300.                     $jqTds[0].innerHTML =  aData[0];
  301.                     // name
  302.                     $jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
  303.                     // date creation
  304.                     // jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">';
  305.                     // jqTds[2].innerHTML = '<input type="text" class="form-control small" value="' + aData[2] + '">';
  306.  
  307.                     jqTds[2].innerHTML = '<input class="form-control  input-medium default-date-picker" type="date" name="date">';
  308.                     // $jqTds[2].innerHTML = getDatePicker();
  309.                     // status
  310.                     $jqTds[3].innerHTML = aData[3];
  311.                     //jqTds[4].innerHTML = '<input type="text" class="form-control small" value="' + aData[4] + ' disabled="disabled">';
  312.                     // alive
  313.                     $jqTds[4].innerHTML = aData[4];
  314.                     $jqTds[5].innerHTML = '<a class="Save" href="">Save</a>';
  315.                     $jqTds[6].innerHTML = '<a class="cancel" data-mode="new" href="">Cancel</a>';
  316.                 }
  317.                 else { // Edit name only.
  318.  
  319.                     // TODO: test.
  320.                     $jqTds[0].innerHTML = aData[0];
  321.                     $jqTds[1].innerHTML = '<input type="text" class="form-control small" value="' + aData[1] + '">';
  322.                     $jqTds[2].innerHTML = aData[2];
  323.                     $jqTds[3].innerHTML = aData[3];
  324.                     $jqTds[4].innerHTML = aData[4];
  325.                     $jqTds[5].innerHTML = '<a class="edit" href="">Save</a>';
  326.                     $jqTds[6].innerHTML = '<a class="cancel" href="">Cancel</a>';
  327.                 }
  328.  
  329.             }
  330.            
  331.             function saveGroupInfosNew($jqInputs) {
  332.                 // INSERT
  333.                 var reference = $jqInputs[0].value;
  334.                 var nom = $jqInputs[1].value;
  335.                 var date_creation = $jqInputs[2].value;
  336.  
  337.                 var statut = 'Hors ligne';
  338.                 var alive = '<td><input type="checkbox" checked disabled="disabled" /></td>';
  339.  
  340.                 oTable.fnUpdate(reference, nRow, 0, false);
  341.                 oTable.fnUpdate(nom, nRow, 1, false);
  342.                 oTable.fnUpdate(date_creation, nRow, 2, false);
  343.                 oTable.fnUpdate(statut, nRow, 3, false);
  344.                 oTable.fnUpdate(alive, nRow, 4, false);
  345.                 oTable.fnUpdate('<a class="edit" href="">Editer</a>', nRow, 5, false);
  346.                 oTable.fnUpdate('<a class="delete" href="">Supprimer</a>', nRow, 6, false);
  347.                 oTable.fnDraw();
  348.                 $.post("vue/Groupe/quickInsert.php",
  349.                     {
  350.                         reference: reference,
  351.                         nom: nom,
  352.                         date_creation: date_creation,
  353.                         statut: statut,
  354.                         alive: alive,
  355.                         function: 'insert'
  356.                     }, function (obj) {
  357.                         //alert(obj);
  358.                     });
  359.             }
  360.  
  361.             function saveGroupeInfosEdit(nRow){
  362.                 // UPDATE
  363.                 // var aData = oTable.fnGetData(nRow);
  364.  
  365.                 // get all input from row
  366.                 // var jqInputs = $('input', nRow);  default
  367.  
  368.  
  369.                 // NOTE: Useful.
  370.                 /*
  371.                  // method 1
  372.                  var val_1 = $('td', nRow)[0];
  373.                  console.log(val_1.innerHTML);
  374.                  // method 2
  375.                  console.log($('td', nRow).first().text());
  376.                  //method 3
  377.                  console.log($('td', nRow).eq(0).text());
  378.                  */
  379.                 // get text of first td from row;
  380.                 var reference = $('td', nRow).first().text();
  381.                 var newGroupName = $('input', nRow)[0].value; // javascript way, with jquery would be: .eq(0).text();
  382.                 // console.log(reference);
  383.                 // console.log(newGroupName);
  384.                 // throw new Error();
  385.                 oTable.fnUpdate(newGroupName, nRow, 1, false);
  386.                 oTable.fnUpdate('<a class="edit" href="">Editer</a>', nRow, 5, false);
  387.                 oTable.fnUpdate('<a class="delete" href="">Supprimer</a>', nRow, 6, false);
  388.  
  389.                 oTable.fnDraw();
  390.                 // DO UPDATE
  391.                 $.post('vue/Groupe/quickInsert.php',
  392.                     {
  393.                         reference: reference,
  394.                         groupe_name: newGroupName,
  395.                         function: 'update'
  396.                     });
  397.             }
  398.  
  399.             // -------------------- USER helper functions
  400.             function editUser(jqTdsm, aData) {
  401.             }
  402.            
  403.             function saveUserInfos($jqInputs) {
  404.                 throw new Error('Not implemented!');
  405.             }
  406.  
  407.  
  408.  
  409.  
  410.  
  411.  
  412.  
  413.         }
  414.     };
  415. }();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!