j查询数据表在更新成功时显示跨度

Question

我正在使用jQuery Datatables，并且正在研究内联编辑功能。我一直在尝试获得绿色支票以显示记录何时更新。

下面是填充数据表的 ajax：

$.ajax({
  url: 'api/massEditorSummary.php',
  type: 'POST',
  data: data,
  dataType: 'html',
  success: function(data, textStatus, jqXHR)
  {
    var jsonObject = $.parseJSON(data); 
    var table = $('#example1').DataTable({  
      "data": jsonObject,
      "columns": [
        { "data": "partner_name" }, 
        { "data": "service" },
        {
          "data": "forecast",
          "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
          {
                $(nTd).html("<input type='text' class='form-control editForecast' 
                id='editForecast' data-uid='"+oData.UID+"' data-editforecast='"+oData.forecast+"'
                value='"+oData.forecast+"' style='width:75px; height:30px;' /> 
               <span id='testID' style='display: none;'><i class='fa fa-check' id='updatedIcon' aria-hidden='true'
               style='color:green;'> </i></span>");
          }
        }
      ],
      "stateSave": true,
      "autoWidth": false    
    });
  },
  error: function(jqHHR, textStatus, errorThrown)
  {
    // show fail stuff
  }
});

如果您在数据列"预测"中注意到，我有一个 ID 设置为 testID 的范围。 此范围包括一个字体很棒的复选图标。我最初将其设置为显示：无。

现在我有了这个更新功能，可以在 BLUR 事件上运行：

$('#example1').on('blur', 'tr > td > .editForecast', function(e) 
  e.preventDefault();
  var uid = $(this).attr('data-uid');
  var forecastcurval = $(this).attr('data-editforecast');
  var forecastnewval = $(this).val();
  var forecastData = '';
  $.post('api/inlineEditProcess.php', {uid:uid, forecastcurval:forecastcurval, forecastnewval:forecastnewval}, function(data)
  {
    forecastData = data;
    callForecastFunction(forecastData);
  });
  function callForecastFunction(forecastData)
  {
    if(forecastData == "Success")
    {
      $(this).css('display', 'inline-block'); // this is where I want to show the check
    }
    else
    {
      // do fail stuff
    }
  }
});

您将在 callForecastFunction 函数中看到，如果从流程脚本返回的数据等于"成功"，则显示检查。

Answer 1

如上所述，

不允许重复id属性。 您应该修复输入和跨度 ID。 您可以基于 UID 的跨度id，例如：

"<span id='" + rowData.UID + "' style='display: none;'><i class='fa fa-check' id='updatedIcon' aria-hidden='true' style='color:green;'> </i></span>");

您可以添加其他文本以使其更加独特。

然后更改 callForecastFunction(( 中的选择器，以根据 UID 选择范围：

$('#' + uid).css('display', 'inline-block'); // this is where I want to show the check

顺便说一句，事件处理程序函数中似乎缺少{：

$('#example1').on('blur', 'tr > td > .editForecast', function(e)