为什么当我编辑同一行中的另一个单元格时，此数据表单元格会恢复为旧值？

如何解决为什么当我编辑同一行中的另一个单元格时，此数据表单元格会恢复为旧值？

我正在使用以前的开发人员设置的 jQuery 数据表。对于可编辑的列，无论何时双击该值，更改它并按回车键，数据库表中的相应记录都会通过 AJAX 更新。但是当发生这种情况时，数据表中的一个字段似乎总是恢复为较旧的、明显存储的值。

此列是一条错误消息。发生的情况是，数据表最初是从一个数据库查询填充的，该查询获取提交时验证失败的记录。因此，也许电子邮件地址无效，数据表将向您显示记录、错误的电子邮件地址以及来自 API 的错误消息“错误的电子邮件地址”。因此，您可以通过单击 dbl、更改电子邮件地址并按回车键来更新电子邮件地址。这会更新数据库中临时表中的记录，现在可以重新提交给 API。

我设置了一个按钮和一个 jQuery 函数来重新提交给 API。因此，您单击该按钮，将拉取并提交该数据库临时表中更正的记录。但是说记录还有另一个问题，比如 SSN 无效。 API 将捕获它并回复一条新的错误消息，我的函数会捕获 API 的响应并相应地更新数据库暂存表和数据表。现在在屏幕上您会看到更新了该行的数据表；它有一条新的错误消息，我的函数在 <td> 元素中使用 $('#errorMessageTD').text(newErrorMessageFromAPI) 对其进行了更改。

这里是问题发生的地方 - 现在，如果您点击 SSN 值，将其更改为有效的 SSN，然后按回车键，那么旧的“无效电子邮件地址”消息会立即替换 {{ 1}}。在 DB 暂存表中，错误消息保留为 SSN 错误消息，因此不会从那里提取值。所以我认为必须发生的事情是，使用上面的 text() 函数替换用户在该 <td> 元素中看到的错误消息，但不替换 jQuery 数据表为该列存储的文本和行。或者，并不是值本身存储在数据表中，而是值显然存储在某处。因此，当您编辑该行中的另一个单元格并按回车键时，<td> 的内容将替换为表格首次呈现到屏幕时的原始文本。

所以我想知道的是，当编辑字段并按下回车按钮时，如何使新的错误消息保留在 <td> 中？当行中的所有其他 td 保持不变（即使它们已被编辑）时，为什么这个 <td> 会还原？

相关代码如下。在这种情况下，错误消息列是 aoColumnDefs 中的列 [0]，并且不是可编辑的字段。该数据表最初是从临时数据库表的查询中填充的，而且似乎是这个初始值，每当您按 Enter 键编辑同一行中的字段时，<td> 都会返回到该初始值。

<td>

此外，下面是我编写的函数，用于将更正后的错误重新提交给 API，并使用来自 API 的新错误消息更新 td：

// Data Table Scripts for Mass Uploader
var oTable;
var editRowID;
var editText;

$(document).ready(function() {
    $('#myTable').dataTable({
        // Set the column names for saving to the database
        // The number of these settings need to be the same as the number of TRs and TDs in the table
        "aoColumnDefs": [
            {"sWidth": "150px","aTargets":[0]},{"sWidth": "60px","sName": "appl_fname","aTargets":[1]},{"sWidth": "50px","sName": "appl_mname","aTargets":[2]},{"sWidth": "70px","sName": "appl_lname","aTargets":[3]},{"sWidth": "75px","sName": "appl_street","aTargets":[4]},"sName": "appl_street2","aTargets":[5]},"sName": "appl_city","aTargets":[6]},{"sWidth": "45px","sName": "appl_state","aTargets":[7]},"sName": "appl_zip","aTargets":[8]},{"sWidth": "80px","sName": "appl_dob","aTargets":[9]},"sName": "appl_ssn","aTargets":[10]},"sName": "appl_phone","aTargets":[11]},{"sWidth": "120px","sName": "appl_email_Box","aTargets":[12]},"aTargets":[13]},"aTargets":[14]},"aTargets":[15]},"sName": "job_id","aTargets":[16]},"sName": "start_date","aTargets":[17]},"sName": "pay_rate","aTargets":[18]},"sName": "base_salary","aTargets":[19]},"sName": "position_type","aTargets":[20]},{"sWidth": "100px","sName": "benefit_status","aTargets":[21]},"sName": "status","aTargets":[22]},"sName": "reportsToRecLoginId","aTargets":[23]},"sName": "Send_Welcome_Email","aTargets":[24]},"sName": "Stage_To_Save_To_ID","aTargets":[25]},"aTargets":["SSCustomField"]}
        ],//"sPaginationType": "full_numbers"
        "sScrollXInner": "120%","bPaginate": false,"bAutoWidth": false,"bScrollCollapse": false,"bFilter": false
    }).makeEditable({
        // Set what columns are editable
        // The number of these settings need to be the same as the number of TRs and TDs in the table
        "aoColumns": [
            null,{},null,{type: 'select',onblur: 'submit',data: "{'':'Please select...','1':'Per Hour','2':'Per Year'}",event: 'dblclick'},'1':'Full Time','2':'Part Time','-1':'Other'}",'1':'Full Company Benefits','2':'Employee Contribution Benefits','3':'Employee Paid Benefits','4':'No Benefits','1':'Exempt','2':'Non-Exempt',/*{},*/
            null,//make ReportsTo not editable
            null,//make Send Welcome Email not editable
            /*{type: 'select','true':'Yes','false':'No'}",*/
            /*{type: 'select','9':'Completed','8':'Onboarding'}",//make Status to Save To Not Editable
            {}
            /*{}*/
        ],fnOnDeleted: function(status) {
            oTable.fnDraw();
        },fnOnEditing: function(input,oEditableSettings,sOriginalText,id) {
            editRowID = id;
            editText = sOriginalText;
            return true;
        },fnOnEdited: function(status,sOldValue,sNewCelldisplayValue,aPos0,aPos1,aPos2) {
            if(aPos2 == 16 && editText == sOldValue && sNewCelldisplayValue.trim() != '') {
                $.ajax({
                    url: "Admin/Massupload/GetLocationDepartmentPosition.cfm",type: "POST",dataType: "json",data: {JobID: sNewCelldisplayValue,ErrorRowID: editRowID},success: function (data) {
                        var stringData = data.DATA.toString();
                        if (stringData.length > 0) {
                            var locationPosition,departmentPosition,positionPosition;
                            locationPosition = 'Row'+editRowID+'Location';
                            $('#'+locationPosition).text(data.DATA[0][4]);
                            departmentPosition = 'Row'+editRowID+'Department';
                            $('#'+departmentPosition).text(data.DATA[0][2]);
                            positionPosition = 'Row'+editRowID+'Position';
                            $('#'+positionPosition).text(data.DATA[0][6]);
                        }
                    },error: function (xhr,ajaxOptions,thrownError) {
                        console.log(xhr.status);
                        console.log(thrownError);
                    }
                });
            }
        },sUpdateURL: "Admin/Massupload/UpdateDataTableRow.cfm",sDeleteURL: "Admin/Massupload/DeleteDataTableRow.cfm"
    });

    $('#demo').submit( function() {
        var sData = $('input',oTable.fnGetNodes()).serialize();
        this.submit();
        return false;
    });

    /* Add a click handler to the rows - this Could be used as a callback */
    $("#example tbody tr").click( function( e ) {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        } else {
            oTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
        }
    });

    /* Add a click handler for the delete row */
    $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        oTable.fnDeleteRow( anSelected[0] );
    });

    oTable = $('#myTable').dataTable();
    setTimeout(function(){
        oTable.fnAdjustColumnSizing();
    },100);
});

解决方法

好的，在完全被难住了几个星期之后，这里是解决方案。

首先，使此数据表可编辑的代码似乎来自 GitHub 上的一个分支 - https://github.com/ansballard/jquery-datatables-editable。

其次，本文中描述的不良行为似乎是固有的。对于表格中的给定行，您可以使用 jQuery 更改 td 元素的文本：

$('#myTDCell_row1').text('Here is some new text');

但在那之后，如果您通过双击单元格的内容、输入新内容并按“回车”键来编辑该 td 同一行中的任何其他单元格，则该单元格的文本将恢复为之前的内容。

我不知道这是为什么、“fnOnEditing()”和“fnOnEdited()”。这些函数可用于在 td 单元格中保留新文本。

我所做的是首先定义一个全局变量，以便可以在更改单元格文本之前捕获新文本并将其存储在 fnOnEditing() 中，然后在 fnOnEdited() 中将其检索并放回为该单元格的文本。

请参阅下面的代码了解总体思路。

    //define global variables
    var latestText;
    var editRowID;
    
    $(document).ready(function() {
        $('#myTable').dataTable({
            [ColumnDefs,other config options]
             }).makeEditable({
                  [settings for if/how each column can be edited],fnOnEditing: function(input,oEditableSettings,sOriginalText,id) {
                       //this function is run right before the edit is executed
                       //capture the edited row's id and the text in the cell 
                       editRowID = id;
                       latestText = $('#myTDCell_row' + editRowID).text();
                  },fnOnEdited: function(status,sOldValue,sNewCellDisplayValue,aPos0,aPos1,aPos2) {
                       //this function runs after the edit has been made
                      /* the edit has been made to some cell in the row,and the text in our cell (which is another cell in that same row) has reverted to what it was before we changed it. So now we immediately change it back */
                      $('#myTDCell_row' + editRowID).text(latestText);
                  },sUpdateURL: [path to page that handles the actual back-end DB update; a request is made to this page as soon as you click the enter key]
});