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>

更新

以下两个解决了它

通过@ function使其变得动态，如@Oleg的答案所述。
serializeGridData的复杂版本，由@Oleg postData method not executing function

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()将保存为{{ 1}}参数对象的gameSearch的属性。我在the old answer详细介绍了函数的技巧。

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

1 个答案: