如何使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」屬性。

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