Кнопка jQuery нажимает кнопку обновления jqGrid только один раз

У меня есть следующий код jQuery, который я использую для заполнения jqGrid. Он работает отлично, отправляя на мою страницу ASP.NET MVC при первом нажатии кнопки. Мой
проблема в том, что любые другие клики, предшествующие первому, похоже, запускаются через код jquery при нажатии кнопки, но никогда не попадают на страницу POST. Любые идеи, почему?

<script type="text/javascript">

        $(document).ready(function() {
            $('#btnSubmit').click(function() {

                /* Refreshes the grid */
                $("#list").jqGrid({
                    /* The controller action to get the grid data from */
                    url: '/CRA/AddPart',
                    data: { partNumber: "123"},
                    datatype: 'json',
                    mtype: 'GET',
                    /* Define the headers on the grid */
                    colNames: ['col1', 'col2', 'col3', 'col4'],
                    /* Define what fields the row columns come from */
                    colModel: [
                  { name: 'col1', index: 'invid', width: 290 },
                  { name: 'col2', index: 'invdate', width: 290 },
                  { name: 'col3', index: 'amount', width: 290, align: 'right' },
                  { name: 'col4', index: 'tax', width: 290, align: 'right'}],
                    height: 'auto',
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    sortname: 'id',
                    sortorder: "desc",
                    viewrecords: true,
                    imgpath: '../../Scripts/jgrid/themes/steel/images',
                    caption: 'Core Return Authorization Contents:',
                    cellEdit: true
                });
            });
        });

    </script>

Ответ 1

Причина, по которой сетка не перезагружается, заключается в том, что вы вызываете неправильный метод. Метод jqGrid делает примерно следующее:

  • Изучите таблицу, чтобы увидеть, является ли она сеткой; если это так, выйдите.
  • Поверните таблицу в сетку.
  • Заполните первую страницу данных.

Итак, во второй раз, когда вы вызываете метод, он ничего не делает, как на шаг 1.

Вместо этого вы должны звонить $("#list").trigger("reloadGrid") во второй и все последующие клики.

Теперь из-за вашего mtype в параметрах сетки сетка собирается сделать GET, а не POST. Поэтому, если POST поступает из самой кнопки (другими словами, это ввод типа submit), вы должны вернуть true, чтобы указать, что отправка должна продолжаться, как обычно.

Ответ 2

Вот решение:

<script type="text/javascript">
        var firstClick = true;
        $(document).ready(function() {
            $('#btnSubmit').click(function() {
                 if (!firstClick) {
                     $("#list").trigger("reloadGrid");
                 }
                 firstClick = false;
                /* Refreshes the grid */
                $("#list").jqGrid({
                    /* The controller action to get the grid data from */
                    url: '/CRA/AddPart',
                    data: { partNumber: "123"},
                    datatype: 'json',
                    mtype: 'GET',
                    /* Define the headers on the grid */
                    colNames: ['col1', 'col2', 'col3', 'col4'],
                    /* Define what fields the row columns come from */
                    colModel: [
                  { name: 'col1', index: 'invid', width: 290 },
                  { name: 'col2', index: 'invdate', width: 290 },
                  { name: 'col3', index: 'amount', width: 290, align: 'right' },
                  { name: 'col4', index: 'tax', width: 290, align: 'right'}],
                    height: 'auto',
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    sortname: 'id',
                    sortorder: "desc",
                    viewrecords: true,
                    imgpath: '../../Scripts/jgrid/themes/steel/images',
                    caption: 'Core Return Authorization Contents:',
                    cellEdit: true
                });
            });
        });

    </script>

Ответ 3

Поскольку мне нужно POST новых значений для Action для меня, это не работает "reloadGrid".

Я просто удалю все содержимое и снова создаю пустую таблицу.

В случае если я проверяю, есть ли сетка, чтобы скрыть "пустой график" div (он показывает только сообщение). В другом я просто очищаю div, который окружает таблицу, а затем снова добавляю в таблицу. Когда плагин находит пустую таблицу, он снова загружает сетку.

LoadTableData - это функция, которая имеет общую функциональность для создания и загрузки сетки.

Возможно, это решение не изящно, но когда время торопится...

$("#btnDownloadsPerFile").click(function () {
            if ($('#chartContainerDownloadsPerFile .ui-jqgrid').length == 0) {
                $('#chartContainerDownloadsPerFile .emptyChart').hide();
            }
            else {
                $('#chartContainerDownloadsPerFile').empty();
                $('#chartContainerDownloadsPerFile').append('<table id="downloadsPerFileGrid"></table>');
            }
            LoadTableData("downloadsPerFileGrid", $('#ddlportalOptionsDownloadsPerFile').val(), "downloadsPerFile", $('#ddlTimeOptionsDownloadsPerFile').val(), $('#ddlTimeValuesDownloadsPerFile').val(), $('#ddlCountries').val());
        });