如何使jQuery表格仅可编辑特定列

Question

我使用的代码如下所示使用简单的DataTable。我得到的数据和所有的排序是伟大的，但现在我想更新最后一列中的单元格内容，这是“未覆盖的原因”列，并将其作为可能通过AJAX调用的数据库更新提交回来。我不确定是使用Editor还是使用JEditable来编辑表格，以及如何仅编辑该表格。尝试了使用makeEditable和Editor的不同选项，但不能使列或单元格的内联单元格内容可编辑。在脚本路径中有dataTables.editor.min.js。也试过jEditable与jquery.jeditable.mini.js任何帮助深表谢意。

的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

这是一个非常简单的但不是我的第一选择。因为它的内容是可编辑的，所以你松散地控制了列的宽度，并最终得到了一些奇怪的外观。

只需点击编辑栏中的单元格，然后开始输入。

事件处理程序使数据对象和表格单元保持同步。

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

这一个是一点点更安全，更明显。它放入一个文本框。

此外，我不得不增加一点，使Excel转储工作。

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

这里是东西给你看。

我所有的表都是由JavaScript中的数组数据对象组成的。我认为，你的是由html表生成的服务器端生成的。

因此，为了更接近地模拟你在做什么，我创建了一个表服务器端，然后尝试使用我的代码来更新它。它不起作用。以下是我必须做的更新。

基本上，下面的代码使用一个事件处理程序，弹出一个输入框供用户进行更改并保存。 （I左所有这一切出）

    // 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(); 

当我它改变到服务器侧的表，上面的代码停止工作（即使改变之后与服务器侧表使用数组的数组工作）

为了得到它的工作，我不得不同时更新数据对象和表HTML节点所以它看起来像这样：

    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

多谢了！我用你的例子修改了代码，试着让它看起来有什么缺失，下面是修改后的脚本和html。在你的例子中，我只需要编辑和保存按钮，不需要添加和删除功能。下面仍然不起作用，我实际上甚至没有看到编辑按钮。函数function（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

我做了一个。这一个，html是创建服务器端的。 另外，它使用弹出窗口允许用户以这种方式输入更改。

就像我说的，我没有访问数据表编辑器库，所以我用了QTip2（http://qtip2.com/）库，而不是。

点击在办公室列任意单元格。

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人？

说，这是新的HTML5，也是“全球HTML”属性。

似乎在表格单元格工作得很好。