Question

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

我在Postback上也是如此（只能通过单击“保存”按钮完成 - 其他一切都在客户端完成），我保存任何已标记为已修改的记录。记录被文本框的OnTextChanged事件标记修改，该事件发生在回发上。

以下是问题和示例：如果我修改了第1页上的值，请转到第2页，然后单击保存... OnTextChanged似乎仅在第2页上调用了文本框，因此第1页上的修改后的值没有保存。当最终点击按钮时，如何确保所有页面上的值都被保存？

编辑：我真的想让这个工作。以下是Yuriy添加的Javascript部分的全部内容。

<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函数：Custom API functions

以下完整的脚本：

<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>

已添加：doSave功能，用于保存按钮＆＃39; s OnClientClick proeprty：<asp:Button runat="server" ID="btnSave" Text="Save" OnClientClick="return doSave()" />

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

1 个答案: