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

$（文档）.ready（函数（）{
$（'#btnsupmit'）。单击（函数（）{
/*刷新网格*/
$（“#列表”）.jqGrid({
/*从中获取网格数据的控制器操作*/
url:“/CRA/AddPart”，
数据：{partNumber:“123”}，
数据类型：“json”，
mtype:'获取'，
/*在网格上定义标题*/
colNames:['col1'，'col2'，'col3'，'col4']，
/*定义行列来自哪些字段*/
colModel：[
{name:'col1'，index:'invid'，width:290}，
{name:'col2'，index:'invdate'，宽度：290}，
{name:'col3'，index:'amount'，width:290，align:'right'}，
{name:'col4'，index:'tax'，width:290，align:'right'}]，
高度：“自动”，
rowNum:10，
行列表：[10,20,30]，
sortname:'id'，
巫师：“描述”，
viewrecords：是的，
imgpath:“../../Scripts/jgrid/themes/steel/images”，
标题：“核心退货授权内容：”，
cellEdit：对
});
});
});

网格没有重新加载的原因是您调用了错误的方法。jqGrid方法大致做到了这一点：

检查表格是否已经是网格；如果是，退出

把桌子变成网格

填充数据的第一页

因此，第二次调用该方法时，它不会执行任何操作，如步骤1所示

相反，您应该在第二次和所有后续单击时调用

$（“#list”）.trigger（“reloadGrid”）

---

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

以下是解决方案：

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

var firstClick=true；
$（文档）.ready（函数（）{
$（'#btnsupmit'）。单击（函数（）{
如果（！firstClick）{
$（“#列表”）.trigger（“重载网格”）；
}
firstClick=false；
/*刷新网格*/
$（“#列表”）.jqGrid({
/*从中获取网格数据的控制器操作*/
url:“/CRA/AddPart”，
数据：{partNumber:“123”}，
数据类型：“json”，
mtype:'获取'，
/*在网格上定义标题*/
colNames:['col1'，'col2'，'col3'，'col4']，
/*定义行列来自哪些字段*/
colModel：[
{name:'col1'，index:'invid'，width:290}，
{name:'col2'，index:'invdate'，宽度：290}，
{name:'col3'，index:'amount'，width:290，align:'right'}，
{name:'col4'，index:'tax'，width:290，align:'right'}]，
高度：“自动”，
rowNum:10，
行列表：[10,20,30]，
sortname:'id'，
巫师：“描述”，
viewrecords：是的，
imgpath:“../../Scripts/jgrid/themes/steel/images”，
标题：“核心退货授权内容：”，
cellEdit：对
});
});
});

因为我需要将新值发布到操作，所以“重新加载网格”不起作用

我只需删除所有内容，然后再次创建空表

在if中，我检查网格是否用于隐藏“empty chart”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());
        });

$（“#btnDownloadsPerFile”）。单击（函数（）{
如果（$（'#chartContainerDownloadsPerFile.ui jqgrid'）。长度==0）{
$（'#chartContainerDownloadsPerFile.emptyChart'）.hide（）；
}
否则{
$（“#chartContainerDownloadsPerFile”）.empty（）；
$（“#chartContainerDownloadsPerFile”）.append（“”）；
}
LoadTableData（“downloadsPerFileGrid”，“$”（“#ddlportationsdownloadsperfile”）.val（），“downloadsPerFile”，“$”（“#ddltimeoptions downloadsPerFile”）.val（），$（“#ddlTimeValuesDownloadsPerFile”）.val（），$（“#ddlCountries”）.val（）；
});