Comment rendre une table jQuery modifiable uniquement pour une colonne spécifique

Question

Le code que j'ai ci-dessous utilise un simple DataTable. Je reçois les données et tout le tri est bon, mais maintenant je veux mettre à jour le contenu de la cellule dans la dernière colonne qui est la colonne "raison non couverte" et la renvoyer comme mise à jour vers la DB éventuellement par AJAX. Je ne suis pas sûr d'utiliser Editor ou JEditable pour rendre la table modifiable et comment la rendre modifiable pour cette seule colonne. Vous avez essayé différentes options en utilisant makeEditable et Editor, mais vous ne pouvez pas rendre le contenu de la cellule inline modifiable pour la colonne ou la cellule .Have dataTables.editor.min.js dans le chemin du script. Également essayé jEditable avec jquery.jeditable.mini.js Toute aide profondément appréciée.

jquery-3.1.1.min.js, jquery.dataTables.min.js, dataTables.buttons.min.js, buttons.colVis.min.js, dataTables.editor.min.js

<script> 
     $(document).ready(function() { 
     $('#selectedDetails').DataTable({ 
      "bJQueryUI": true, 
      "sPaginationType": "full_numbers", 
      "fixedHeader": true, 
      "scrollY": '400px' 
     }); 


    });</script> 



    <table id = "selectedDetails" class="table table-striped table-bordered" cellspacing="0" width="80%"> 
    <caption><h3>DETAILS FOR SELECTED FILTERS: <font color="brown">FORM ID</font>=<font color="blue"><%=request.getAttribute("formNameSelection")%></font> AND <font color="brown">COVERED IN AUTOTAX</font> = <font color="blue"><%=request.getAttribute("YesOrNoValueSelection") %></font> </h3></caption>   
     <thead style="background-color:#D7DBDD; border:solid 2px; border-color:black">   
     <tr> 
      <th>FORM ID</th> 
      <th>FIELD ID</th> 
      <th>FIELD NAME</th> 
      <th>FIELD TYPE</th> 
      <th>NO: OF HARD CALCS</th> 
      <th>NO: OF DROP ASSIGNEDS</th> 
      <th>COVERED IN AUTOTAX ?</th> 
      <th>REASON NOT COVERED</th> 
     </tr> 
     <thead> 
     </thead> 
     <tbody>    
     <c:forEach var="filterFieldInfo" items="${filteredValues}"> 
      <tr> 
       <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.formId}" /></td> 
       <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.fieldId}" /></td> 
       <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.fieldName}" /></td> 
       <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.fieldType}" /></td> 
       <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.numHardCalcs}" /></td> 
       <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.numDroptAssigneds}" /></td> 
       <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.autoTaxCovered}" /></td> 
       <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.reasonAutoTaxCovered}" /></td> 
      </tr> 
     </c:forEach> 
     </tbody> 
    </table> 

Answer 1

Voici une très simple mais pas mon premier choix. Parce que son contenu est modifiable, vous perdez le contrôle de la largeur de la colonne et vous vous retrouvez avec des choses étranges. Cliquez simplement sur une cellule dans la colonne d'édition et commencez à taper.

Les gestionnaires d'événements conservent l'objet de données et la cellule du tableau en synchronisation.

http://jsbin.com/zizepoh/edit?html,js,output

$(document).ready(function() { 
    // add editable column data 
    var dtData = $.map(dataStore.data, function(item){item.contentEdit = ""; return item;}); 

    var dtTable = $('#example').DataTable({ 
     "data": dtData, 
     "select":"single", 
     "columnDefs":[{"targets":[6], render : function(ditem){return "<div contenteditable>" + ditem + "</div>";}}], 
     "columns": [ 
      { "data": "name" }, 
      { "data": "position" }, 
      { "data": "office" }, 
      { "data": "extn" }, 
      { "data": "start_date" }, 
      { "data": "salary" }, 
      {"data":"contentEdit", "className": "contentEdit"} 

     ], 
     dom: 'Bfrtip', 
     buttons: [ 'excelHtml5' ] 
    }); 

    // Uses key press event handler to keep the associated data object in sync 
    $("#example").on("keypress", ".contentEdit div", function(){ 
     var rData = dtTable.rows($(this).closest("tr")).data()[0]; 
     rData.contentEdit = $(this).text(); 
     $("#txtFollower").val($(this).text()); 
    }); 
}); 

Answer 2

celui-ci est un peu plus sûr et plus évident. il met dans une zone de texte.

De plus, j'ai dû ajouter un peu plus pour que la décharge Excel fonctionne.

http://jsbin.com/zufesop/3/edit?html,js,output

$(document).ready(function() { 
    // add editable column data 
    var dtData = $.map(dataStore.data, function(item){item.contentEdit = ""; return item;}); 

    var dtTable = $('#example').DataTable({ 
     "data": dtData, 
     "select":"single", 
     "columnDefs":[{"targets":[6], render : function(ditem){return "<input type='text' value = '" + ditem +"'/>" ;}}], 
     "columns": [ 
      { "data": "name" }, 
      { "data": "position" }, 
      { "data": "office" }, 
      { "data": "extn" }, 
      { "data": "start_date" }, 
      { "data": "salary" }, 
      {"data":"contentEdit", "className": ""} 

     ], 
     dom: 'Bfrtip', 
     buttons: [ 
      { 
       extend: 'excelHtml5', 
       text: 'Save as Excel', 
       // updates the data before being sent to excel 
       customizeData: function (a, b, c, d) { 
        var exd = a.body; 
        var dtdata = $('#example').DataTable().rows().data(); 
        for (var ii = 0; ii < dtdata.length ; ++ii) { 
         var cur = dtdata[ii].contentEdit; 
         exd[ii][6] = cur; 
        } 
       } 
      } 
     ] 
    }); 

    // Uses key press event handler to keep the associated data object in sync 
    $("#example").on("keyup", "input[type='text']", function(){ 
     var rData = dtTable.rows($(this).closest("tr")).data()[0]; 
     rData.contentEdit = $(this).val(); 
     $("#txtFollower").val($(this).val()); 

    }); 
}); 

Answer 3

Voici quelque chose pour vous de regarder.

Toutes mes tables sont créées à partir d'un objet de données de tableau en JavaScript. Le vôtre, je pense, a été fait à partir d'un côté serveur généré par la table html. Donc, pour émuler de plus près ce que vous faites, j'ai créé un serveur de table, puis j'ai essayé d'utiliser mon code pour le mettre à jour. Cela n'a pas fonctionné. Voici ce que j'ai dû faire pour le mettre à jour.

Fondamentalement, le code ci-dessous utilise un gestionnaire d'événements qui ouvre une boîte de saisie pour que l'utilisateur effectue la modification, puis l'enregistre. (Je suis parti tout cela sur)

    // For my object array, this was all I had to do to update the data. 
        var dtTable = $($(target).closest("table")).DataTable(); 
        var dtData = dtTable.rows($(target).closest("tr")).data()[0]; 
        dtData.office = $(this).siblings("input").val(); 
        dtTable.rows().invalidate().draw(); 

Quand je l'ai changé à une table de côté serveur, le code ci-dessus a cessé de fonctionner (même après l'avoir modifié pour travailler avec tableau de tableaux qui tables côté serveur utilisent)

pour que cela fonctionne, je devais mettre à jour à la fois l'objet de données et les tables nœud html il ressemblait à ceci:

    var columnIndex = $(target).index(); 
        var dtTable = $($(target).closest("table")).DataTable(); 
        var dtData = dtTable.rows($(target).closest("tr")).data()[0]; 
        // here, I updated the data node 
        dtData[columnIndex] = $(this).siblings("input").val(); 
        // then I updated the html td. Once that was done, it started working for the server side table. 
        $(target).html(dtData[columnIndex]); 
        dtTable.rows().invalidate().draw(); 

Answer 4

Remercie un groupe à nouveau! J'ai modifié le code avec votre exemple pour essayer de le faire fonctionner pour voir ce qui me manque, ci-dessous est le script modifié et html. Dans votre exemple, j'ai juste besoin du bouton Modifier et Enregistrer, aucune fonctionnalité nécessaire pour Ajouter et Supprimer. Ci-dessous ne fonctionne toujours pas, je ne vois même pas un bouton d'édition. Quels sont les paramètres à l'intérieur de la fonction de fonction (e, dt, bt, config)?

<script> 
      $(document).ready(function() { 

      var myTable = $('#selectedDetails').DataTable({ 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers", 
       "fixedHeader": true, 
       "scrollY": '400px', 
       buttons: [{ 
        text: "Edit", className :"editButton", 
         extend: "selectedSingle", 
         action: function (e, dt, bt, config) { editRow(e, dt, bt, config); } 
        }, { 
         text: "Save", 
         extend: "selectedSingle", 
         action: function (e, dt, bt, config) { saveRow(e, dt, bt, config); } 
        } 
        }], 
        dom: "Btp", 
        select: "single" 
      }); 

      var dataObject = myTable.rows().data(); 

      // keep the rows from deselection when you click on a textbox 
      // this means you have to click between textboxes to change edit rows when more than one is open 

      $("#selectedDetails").on("click", "input", function (e) { e.stopPropagation(); return false; }); 

      table.on('user-select', function (e, dt, type, cell, originalEvent) { 
       if ($('#selectedDetails input').length > 0) { 
        e.preventDefault(); 
        return false; 
       } 
      }); 

     }); 


      // Save the selected row (assuming its in edit mode) 
      function saveRow(e, dt, bt, config) { 
       var r = dt.rows(".selected").nodes()[0]; 

       // if row is not edit mode, just return. 
       if ($("input", r).length === 0) { return; } 


       var d = dt.rows(".selected").data()[0]; 
       var containsText = false; 
       $(r).children("td").each(function (i, it) { 
        var di = $("input", it).val(); 
        if (di.length > 0) { containsText = true; } 
        $(it).html(di); 
        d[i] = di; 
       }); 
       if (!containsText) { 
        alert("This row contains no data and will be removed"); 
        dt.rows(".selected").remove().draw(); 
       } 
       $(".editButton span").text("Edit"); 
      } 

      // Puts a row in edit mode 
      function editRow(e, dt, bt, config) { 
       var r = dt.rows(".selected").nodes()[0]; 
      if( $("span", bt[0]).text() == "Cancel"){ 

       if($(r).hasClass("newRow")){ 
        dt.rows(".selected").remove().draw(); 
       } 
       else { 
       $(r).children("td").each(function (i, it) { 
        var od = dt.cells(it).data(); 
        $(it).html(od[0]); 
       }); 
       } 

       $("span", bt[0]).text("Edit"); 
       return; 
      } 

       // if row already in edit mode, just return. 
       if ($("input", r).length > 0) { return; } 

       $(r).children("td").each(function (i, it) { 
        var h = $("<input type='text'>"); 
        h.val(it.innerText); 
        $(it).html(h); 
       }); 
       $("span", bt[0]).text("Cancel"); 
      } 



      </script> 

     <table id = "selectedDetails" class="table table-striped table-bordered" cellspacing="0" width="80%"> 
     <caption><h3>DETAILS FOR SELECTED FILTERS: <font color="brown">FORM ID</font>=<font color="blue"><%=request.getAttribute("formNameSelection")%></font> AND <font color="brown">COVERED IN AUTOTAX</font> = <font color="blue"><%=request.getAttribute("YesOrNoValueSelection") %></font> </h3></caption>   
      <thead style="background-color:#D7DBDD; border:solid 2px; border-color:black">   
      <tr> 
       <th>FORM ID</th> 
       <th>FIELD ID</th> 
       <th>FIELD NAME</th> 
       <th>FIELD TYPE</th> 
       <th>NO: OF HARD CALCS</th> 
       <th>NO: OF DROP ASSIGNEDS</th> 
       <th>COVERED IN AUTOTAX ?</th> 
       <th>REASON NOT COVERED</th> 
      </tr> 
      <thead> 
      </thead> 
      <tbody>    
      <c:forEach var="filterFieldInfo" items="${filteredValues}"> 
       <tr> 
        <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.formId}" /></td> 
        <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.fieldId}" /></td> 
        <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.fieldName}" /></td> 
        <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.fieldType}" /></td> 
        <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.numHardCalcs}" /></td> 
        <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.numDroptAssigneds}" /></td> 
        <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.autoTaxCovered}" /></td> 
        <td style="width: 45px;text-align: center;" align="center"><c:out value="${filterFieldInfo.reasonAutoTaxCovered}" /></td> 
       </tr> 
      </c:forEach> 
      </tbody> 
     </table> 

Answer 5

J'ai fait un de plus. Celui-ci, le html est créé côté serveur. En outre, il utilise un pop-up pour permettre à l'utilisateur d'entrer dans les modifications de cette façon. Comme je l'ai dit, je n'ai pas accès à la bibliothèque de l'éditeur DataTable. J'ai donc utilisé la bibliothèque QTip2 (http://qtip2.com/) à la place.

Cliquez sur n'importe quelle cellule dans la colonne du bureau.

http://jsbin.com/datecoy/edit?js,output

// Table defintion 
    $(document).ready(function() { 


     var dtTable = $('#example').DataTable({ 
      columns: [{ title: "Name" }, { title: "Postition" }, { title: 'Office' }, { title: "Age" }, { title: "Start Date" }, { title: "Salary" }], 
      columnDefs: [{ targets: [2], className: "editColumn" }] 
     }); 

     $('#example').on("click", ".editColumn", function() { 

      var index = $(this).index(); 
      var cols = dtTable.settings()[0].aoColumns; 
      var colTitle = cols[index].title; 
      var data = dtTable.rows($(this).closest("tr")).data()[0]; 

      DataTableDialog(this, colTitle, data[2]); 

     }) 

    }); 

Answer 6

contentEditable quelqu'un?

Dit que c'est nouveau pour HTML5, et aussi un attribut "Global HTML".

Semble fonctionner correctement sur les cellules de table.