jQuery按钮点击刷新jqGrid仅触发一次

Question

我有以下的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>

- The Matt

Answer 1

网格不重新加载的原因是你调用了错误的方法。jqGrid方法大致执行以下操作：

1. 检查表格是否已经成为一个网格，如果是，则退出。
2. 将表格转换为网格。
3. 填充第一页的数据。

所以第二次调用该方法时，会按照步骤1什么也不做。

相反，你应该在第二次及以后的点击上调用$("#list").trigger("reloadGrid") 方法。

现在，由于你在网格选项中使用了mtype，网格将进行GET而不是POST。因此，如果POST来自按钮本身（换句话说，它是一个类型为submit的输入），则应返回true以指示提交应像往常一样继续。

- Craig Stuntz

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

- Levi

Answer 3

因为我需要向动作 POST 新值，对我来说“reloadGrid”无法工作。

我只需删除所有内容并再次创建空表格即可。

在 if 语句中，如果网格存在，则隐藏“空图表”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());
        });

- Alfonso Muñoz