具有客户端分页的 Gridview 不会为其他页面上的文本框调用 OnTextChanged

Question

我正在使用 Datatables 为我的 ASP.NET Gridview 提供更好的客户端功能。一切都运转良好。这个特定的网格视图始终处于“编辑模式”，或者是文本框的集合而不是字符串数据值。

我在回发上有它（只能通过单击“保存”按钮来完成 - 其他一切都在客户端完成），我保存所有已标记为已修改的记录。记录由回发时发生的 Textbox 的 OnTextChanged 事件标记为已修改。

这是问题和一个示例：如果我修改第 1 页上的值，请转到第 2 页，然后单击“保存...OnTextChanged”似乎只会为第 2 页上的文本框调用，因此不会保存第 1 页上的修改值。如何确保最终单击按钮时保存所有页面上更改的值？

编辑： 我真的很想让这个工作。这是我的 Javascript 部分的全部内容，其中包含 Yuriy 的补充。

<script type="text/javascript">

/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) {
   var aData = [];
   $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
   aData.push(this.value);
   });
   return aData;
}

/* Make datatables send all rows to the server for saving */
$.fn.dataTableExt.fnGetHiddenNodes = function (oSettings) {
   var anNodes = this.oApi._fnGetTrNodes(oSettings);
   var anDisplay = $('tbody tr', oSettings.nTable);

   for (var i = 0; i < anDisplay.length; i++) {
      var iIndex = jQuery.inArray(anDisplay[i], anNodes);
      if (iIndex != -1) {
         anNodes.splice(iIndex, -1);
      }
    }
    return anNodes;
}

$(document).ready(function () {

   setTimeout(function () {
   $(document).ready(function () {

      $("#containers_gv").dataTable({
        "bJQueryUI": true,
        "bSortClasses": false,
        "sPaginationType": "full_numbers",
        "sDom": '<"#top"fl>rt<"#bottom"ip><"clear">',
        "aoColumns": [
        null,
        { "sSortDataType": "dom-checkbox" },
                { "sSortDataType": "dom-text" },
        { "sSortDataType": "dom-text", "sType": "numeric" },
        { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
            { "sSortDataType": "dom-text" },
                { "sSortDataType": "dom-checkbox" },
                { "sSortDataType": "dom-text" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text", "sType": "numeric" },
                { "sSortDataType": "dom-text", "sType": "numeric"}]
      });

      $('#bottom').appendTo('#gv_controls');
      $('#top').appendTo('#gv_topcontrols');


  }), 1000
});

$(function () {
  $("#containers_gv").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
});

});

function doSave() {
  var grid = $("#containers_gv");
  var hiddenRows = grid.dataTable().fnGetHiddenNodes();
  $.each(hiddenRows, function () { $(this).css("display", "none").appendTo(grid); });
  return true;
}   

</script>

Answer 1

问题在于 dataTable 插件完全从 DOM 中删除了其他页面的表格行。从那时起，除当前页面之外的其他页面的文本框不会转发到服务器。您可以从 dataTable 的缓存中获取隐藏行，将它们添加到 GridView 的表中，并在回发之前使用 display: none 样式隐藏。这样他们就可以在服务器上访问。您需要从那里使用 fnGetHiddenNodes API 函数：自定义 API 函数< /a>

下面的完整脚本：

<script type="text/javascript">
     $.fn.dataTableExt.oApi.fnGetHiddenNodes = function (oSettings) {
          /* Note the use of a DataTables 'private' function thought the 'oApi' object */
          var anNodes = this.oApi._fnGetTrNodes(oSettings);
          var anDisplay = $('tbody tr', oSettings.nTable);

          /* Remove nodes which are being displayed */
          for (var i = 0; i < anDisplay.length; i++) {
               var iIndex = jQuery.inArray(anDisplay[i], anNodes);
               if (iIndex != -1) {
                    anNodes.splice(iIndex, 1);
               }
          }

          /* Fire back the array to the caller */
          return anNodes;
     }

     $(function () {
          $("#<%= GridView1.ClientID %>").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
     });

     function doSave() {
          var grid = $("#<%= GridView1.ClientID %>");
          var hiddenRows = grid.dataTable().fnGetHiddenNodes();
          $.each(hiddenRows, function () { $(this).css("display", "none").appendTo(grid); });
          return true;
     }
</script>

添加：用于保存按钮的 OnClientClick 属性的 doSave 函数：