Jquery datatable mise à jour makeEditable sans appuyer sur entrer

Ceci est mon code en ce moment:Jquery datatable mise à jour makeEditable sans appuyer sur entrer

$('#positionsCapteurs').dataTable({ 

       "paging": false, 
       "ordering": false, 
       "info":  false, 
       "bJQueryUI": true, 
       "bFilter": false, 

       "columnDefs": [{ 
        "targets": 0, 
        "orderable": false 
       }] 
      }).makeEditable(
      { 


       sUpdateURL:"/Appareils/UpdateData", 


      });

créer un dataTable et de le rendre modifiable, il fonctionne bien comme ça, mais je veux permettre à l'utilisateur de mettre à jour les données sans appuyer sur la touche Entrée, j'ai trouvé une propriété pour cela: onblur : 'submit'. J'ai essayé d'ajouter ceci à mes options (dataTable ou makeEditable) et cela n'a pas fonctionné.

Comment puis-je ajouter cette option et permettre à l'utilisateur d'appuyer sur Entrée ou non pour mettre à jour les données?

Merci à l'avance

Source

2016-10-19 Furtiro

EDIT: I figured it out pour vous.

Le code suivant ajoute un gestionnaire personnalisé. Vous pouvez créer votre requête ajax dans le onblur.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Datatable Save on blur</title> 
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.12.3.min.js"> 
    </script> 
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"> 
    </script> 
    <script type="text/javascript" language="javascript" class="init"> 

     $(document).ready(function() { 
      $('#positionsCapteurs').DataTable({ 
       "paging": false, 
       "ordering": false, 
       "info":  false, 
       "bJQueryUI": true, 
       "bFilter": false, 

       "columnDefs": [{ 
        "targets": 0, 
        "orderable": false 
       }] 
      }); 

      $('#positionsCapteurs').on('click', 'tbody td', function (e) { 
       // check if inout does not already exist 
       if ($(this).html().indexOf('input') == -1) { 
        var rel = $(this).attr('rel'); 
        var fieldname = $(this).attr('fieldname'); 
        var val = $(this).html(); 
        $(this).html(inlineEdit(this, rel, fieldname, val)); 
        var myTd = this; 
        // implement the blur 
        $("#" + rel + '_' + fieldname).on('blur', function() { 
         // create ajax call to save data 
         /* 
         $.ajax({ 
          url: "backendscript.php", 
          method: "POST", 
          data: { id : rel, fieldname: fieldname, val: $(this).val() } 
         }).done(function(html) { 
          stopEdit(this, myTd); 
         }); 
         */ 
         stopEdit(this, myTd); // comment this out when ajax call is impleneted stopEdit should be done when ajax call is done 
        }); 
        // implement the enter press 
        $("#" + rel + '_' + fieldname).on('keypress', function(event) { 
         if (event.keyCode == 13) { 
          $(this).trigger('blur'); 
         } 
        }); 
        // focus the input 
        $("#" + rel + '_' + fieldname).focus(); 
        // put the cursor on the end 
        var tmpStr = $("#" + rel + '_' + fieldname).val(); 
        $("#" + rel + '_' + fieldname).val(''); 
        $("#" + rel + '_' + fieldname).val(tmpStr); 
       } 
      }); 
     }); 
     // generate input 
     function inlineEdit(td, rel, fieldname, val) { 
      return $('<input/>').attr({ type: 'text', rel: rel, name: fieldname, autofocus: 'true', value: val, id: rel + '_' + fieldname}) 
     } 

     // stop input 
     function stopEdit(input, myTd) { 
      $(myTd).html($(input).val()); 
     } 
    </script> 
</head> 
<body> 
<div class="container"> 
    <table id="positionsCapteurs" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Col3</th> 
       <th>Col4</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td rel="1" fieldname="name">Olivier</td> 
       <td rel="1" fieldname="pos">Developer</td> 
       <td rel="1" fieldname="col3">val3</td> 
       <td rel="1" fieldname="col4">val4</td> 
      </tr> 
      <tr> 
       <td rel="2" fieldname="name">Olivier2</td> 
       <td rel="2" fieldname="pos">Developer2</td> 
       <td rel="2" fieldname="col3">val32</td> 
       <td rel="2" fieldname="col4">val42</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
</body> 
</html>

Source

2016-10-26 08:07:39

Merci pour votre réponse, je l'ai lu déjà cette documentation. Ma mise à jour fonctionne dans mon contrôleur, car il est déjà dans une fenêtre pop-up, je ne veux pas d'autre pop-up à afficher pour mon édition. Et si je ne me trompe pas, l'éditeur propose un pop-up pour l'édition non? L'utilisateur veut mettre à jour cellule par cellule pas rangée par rangée donc .. – Furtiro

Je peux être mal compris, mais comme vous pouvez le voir dans le lien fourni, il n'y a pas de popup d'édition dans chaque cellule est sauvegardée après flou/entrée, pas en ligne par rangée. –

Cet éditeur n'est pas gratuit ... – Furtiro

Voici une solution simple sur la façon de rendre les données sur soumettre si le champ de texte perd le focus.

Solution

onblur="document.getElementById('autopass').submit();"

Source

2016-10-26 10:33:59

Dans mon cas, j'ai une table html avec jquery.datatable, donc cette solution ne peut pas fonctionner (j'ai testé ..) – Furtiro

Jquery datatable mise à jour makeEditable sans appuyer sur entrer

Répondre

Questions connexes