网格将旧参数值传递给服务器 - ajax

Question

我正在尝试学习 jqGrid。使用以下代码，我可以在单击搜索按钮时加载数据。我搜索了很多博客和论坛帖子，发现可以将数据类型设置为local 以避免初始加载。所有这些都工作正常。但是在第二次搜索尝试时传递给服务器的参数值与第一次搜索尝试的旧值相同。下面我的代码中缺少什么？

下面是脚本

<script type="text/javascript">

        $(document).ready(function () {



            $('#txtLmiquidAmountFrom').val("800");
            $('#txtLmiquidAmountTo').val("1200");


            $("#grid").jqGrid({
                url: "GamesList.aspx/GetMyGames",
                mtype: 'POST',
                postData:
                {
                    gameSearch: $('#txtGameName').val() ,
                    ownerSearch:  $('#txtOwner').val() ,
                    createdDateFrom:  $('#txtCreatedFrom').val() ,
                    createdDateTo:  $('#txtCreatedTo').val() ,
                    liquidAmountFrom:  $('#txtLmiquidAmountFrom').val() ,
                    liquidAmountTo:  $('#txtLmiquidAmountTo').val() 
                },
                datatype: "local", //json if want to load initially
                ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                serializeGridData: function (postData) {
                    return JSON.stringify(postData);
                },
                jsonReader: {
                    repeatitems: false,
                    root: function (obj) { return obj.d; }
                },
                colNames: ['GameID', 'GameName', 'GameOwner', 'PlannedCloseDate', 'CreatedOnDate', 'GameLiquidAmount'],
                colModel: [
                    { name: 'GameID', index: 'GameID' },
                    { name: 'GameName', index: 'GameName' },
                    { name: 'GameOwner', index: 'GameOwner' },
                    { name: 'PlannedCloseDate', index: 'PlannedCloseDate', formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' } },
                    { name: 'CreatedOnDate', index: 'CreatedOnDate', formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' } },
                    { name: 'GameLiquidAmount', index: 'GameLiquidAmount' }
                ],
                rowNum: 10,
                /*rowList: [10, 20, 30],*/
                pager: '#pager2',
                sortname: 'id',
                viewrecords: true,
                sortorder: "desc",
                caption: "Games",
                gridview: true,
                height: "auto",
                loadonce: true,
                recordtext: "Records {0} - {1} of {2}",
                emptyrecords: "No records to view",
                loadtext: "Loading...",
                pgtext: "Page {0} of {1}"
            });

            $("#btnSearch").click(function (e)
            {
                $("#grid").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                e.preventDefault();
            });



        });


    </script>

HTML 标记

  <div id="multiAccordion">

        <h3><a style="font-size: 13px;">Search</a></h3>
        <div>
            <table class="app-search-table">
                <tr>
                    <td class="app-search-description-td">Created From 
                    </td>
                    <td>
                        <input id="txtCreatedFrom" type="text" />
                    </td>
                    <td class="app-search-description-td">Liquid Amount From 
                    </td>
                    <td>
                        <input id="txtLmiquidAmountFrom" type="text" />
                    </td>

                    <td class="app-search-description-td">Owner
                    </td>
                    <td>
                        <input id="txtOwner" type="text" />
                    </td>

                </tr>
                <tr>
                    <td class="app-search-description-td">Created To
                    </td>
                    <td>
                        <input id="txtCreatedTo" type="text" />
                    </td>
                    <td class="app-search-description-td">Liquid Amount To
                    </td>
                    <td>
                        <input id="txtLmiquidAmountTo" type="text" />
                    </td>

                    <td class="app-search-description-td">Game Name
                    </td>
                    <td>
                        <input id="txtGameName" type="text" />
                    </td>
                </tr>
                <tr>
                    <td colspan="6" style="text-align: right;">
                        <button id="btnSearch" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
                            <span class="ui-button-text">Search</span>
                        </button>
                    </td>

                </tr>

            </table>

        </div>

        <br />

        <h3><a style="font-size: 13px;">Search Result</a></h3>
        <div>
            <table id="grid"></table>
            <div id="pager2"></div>

        </div>
    </div>

更新

以下两个解决了

1. 通过 uisng function 使其动态化，正如 @Oleg 的回答中所述。
2. @Oleg postData method not executing function 评论的serializeGridData 的复杂版本

Answer 1

要解决问题，您应该为postData 的每个动态 属性使用函数：

postData: {
    gameSearch: function () { return $('#txtGameName').val(); },
    ownerSearch: function () { return $('#txtOwner').val(); },
    createdDateFrom: function () { return $('#txtCreatedFrom').val(); },
    createdDateTo: function () { return  $('#txtCreatedTo').val(); },
    liquidAmountFrom: function () { return $('#txtLmiquidAmountFrom').val(); },
    liquidAmountTo: function () { return $('#txtLmiquidAmountTo').val(); }
}

旧代码中的问题：$("#grid").jqGrid({...}); 语句将被执行一次。它以对象为参数调用$("#grid").jqGrid();。对象将在语句执行时初始化，当前值将保存为postData的属性（当前值$('#txtGameName').val()将保存为gameSearch属性987654331@参数对象）。我在the old answer中详细描述了这个技巧。