如何使 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 表生成的服務器端制作的。

因此，為了更接近地模擬您在做什么，我創建了一個表服務器端，然后嘗試使用我的代碼來更新它。 這沒用。 以下是我必須做的更新。

基本上，下面的代碼使用一個事件處理程序，它會彈出一個輸入框供用戶進行更改然后保存。 （我把所有這些都省略了）

                    // 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。 在您的示例中，我只需要 Edit 和 Save 按鈕，不需要添加和刪除功能。 下面仍然不起作用，我什至沒有看到編輯按鈕。 函數 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是在服務器端創建的。 此外，它使用彈出窗口來允許用戶以這種方式輸入更改。

就像我說的，我無權訪問 DataTable Editor 庫，所以我改用 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

內容可編輯任何人？

說它是 HTML5 的新特性，也是“全局 HTML”屬性。

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