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>

Answer 1

網格沒有重新加載的原因是你調用了錯誤的方法。 jqGrid方法大致如下：

1. 檢查表以查看它是否已經是網格; 如果是這樣，退出
2. 將表格變成網格。
3. 填充第一頁數據。

因此，第二次調用該方法時，它不會執行任何操作，如步驟1所示。

相反，你應該在第二次和所有后續點擊時調用$("#list").trigger("reloadGrid") 。

現在，由於你在網格選項中的mtype，網格將進行GET，而不是POST。 因此，如果POST來自按鈕本身（換句話說，它是類型提交的輸入），您應該返回true以指示提交應該像往常一樣繼續。

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>

Answer 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());
        });