Gridview с клиентской подкачкой не вызывает OnTextChanged для текстовых полей на других страницах - PullRequest
Новая
       7

Gridview с клиентской подкачкой не вызывает OnTextChanged для текстовых полей на других страницах

2 голосов
/ 11 декабря 2011

Я использую Datatables , чтобы улучшить функциональность на стороне клиента для моего ASP.NET Gridview. Все работает отлично. Этот конкретный вид сетки всегда находится в «режиме редактирования» или представляет собой набор текстовых полей, а не значений строк.

У меня так на Postback (что можно сделать, только нажав кнопку Сохранить - все остальное делается на стороне клиента), я сохраняю все записи, которые были помечены как измененные. Записи помечаются как измененные событием OnTextChanged Textbox, которое происходит при обратной передаче.

Вот проблема и пример: если я изменяю значение на странице 1, перехожу на страницу 2, а затем нажимаю кнопку Сохранить ... OnTextChanged, кажется, вызывается только для текстовых полей на странице 2, поэтому измененное значение на странице 1 не сохраняется Как я могу убедиться, что значения, измененные на всех страницах, сохраняются при окончательном нажатии кнопки?

EDIT: Я действительно хочу, чтобы это работало. Вот полный раздел моего 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>

1 Ответ

1 голос
/ 12 декабря 2011

Проблема в том, что плагин dataTable полностью удаляет строки таблицы для других страниц из DOM.После этого текстовые поля с других страниц, кроме текущей, не пересылаются на сервер.Вы можете получить скрытые строки из кэша dataTable, добавить их в таблицу GridView и спрятать в стиле display: none перед обратной передачей.Таким образом, они будут доступны на сервере.Вам нужно использовать fnGetHiddenNodes API-функцию оттуда: Пользовательские API-функции

Полный скрипт ниже: 

<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 функция используется для сохранениякнопка OnClientClick proeprty: <asp:Button runat="server" ID="btnSave" Text="Save" OnClientClick="return doSave()" />

...