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
  }
});

如果您在数据列“预测”中注意到，我的标识设置为testID的范围。这个范围包括一个字体超棒的检查图标。我最初将它设置为display：none。

现在我有了这个更新功能，可以在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函数中看到，如果从流程脚本返回的数据等于'success'，则显示检查。

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

BTW，看起来你在事件处理函数中缺少{：

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

更新成功时，jQuery数据表显示跨度

1 个答案: