jQuery按钮单击刷新jqGrid只触发一次答案

【问题标题】：jQuery button click refresh of jqGrid only firing oncejQuery按钮单击刷新jqGrid只触发一次
【发布时间】：2010-11-12 10:36:32
【问题描述】：

我有以下用于填充 jqGrid 的 jQuery 代码。在第一次单击按钮时，它可以完美地发布到我的 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>

【问题讨论】：

标签： javascript jquery asp.net-mvc jqgrid

【解决方案1】：

因为我需要向 Action 发布新值，所以它不能“reloadGrid”工作。

我只是删除所有内容并再次创建空表。

如果我检查网格是否存在隐藏“空图表”div（它只显示一条消息）。在 else 中，我只是清理表格周围的 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());
        });

【讨论】：

【解决方案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】：

网格未重新加载的原因是您调用了错误的方法。 jqGrid 方法的作用大致如下：

检查表格看它是否已经是一个网格；如果是，请退出。
将表格变成网格。
填充第一页数据。

所以第二次调用该方法时，它什么也不做，就像第 1 步一样。

相反，您应该在第二次和所有后续点击时调用 $("#list").trigger("reloadGrid")。

现在，由于网格选项中的 mtype，网格将执行 GET，而不是 POST。因此，如果 POST 来自按钮本身（换句话说，它是提交类型的输入），您应该返回 true 以指示提交应该照常继续。

【讨论】：