Question

我的代码如下，使用简单的DataTable。我得到的数据和所有排序都很棒，但现在我想更新最后一列中的单元格内容，这是＆＃34;原因未涵盖＆＃34;列，并可能通过AJAX调用将其作为更新提交回DB。我不确定是使用编辑器还是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

class Profile < ActiveRecord::Base
  belongs_to :user

  accepts_nested_attributes_for :user
end

class User < ActiveRecord::Base
  has_one :profile, :dependent => :destroy
end

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。在您的示例中，我只需要“编辑”和“保存”按钮，“添加”和“删除”不需要任何功能。下面仍然不起作用，我实际上甚至看不到编辑按钮。函数函数（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

contentEditable任何人？

说它是HTML5的新功能，也是“全球HTML”属性。

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

如何使jQuery表仅针对特定列进行编辑

6 个答案: