网格将旧参数值传递给服务器-Ajax [英] Grid passing old parameter value to server - ajax
问题描述
我正在尝试学习jqGrid.使用以下代码，我可以在单击搜索按钮时加载数据.我搜索了许多博客和论坛帖子，发现可以将数据类型设置为local以避免初始加载.所有这些都工作正常.但是在第二次搜索尝试中传递给服务器的参数值与第一次搜索尝试的旧值相同.以下是我的代码中缺少的部分?
I am trying to learn jqGrid. Using the following code, I could load data upon search button click. I searched many blogs and forum posts and found that datatype can be made as local to avoid initial load. All those are working fine. But the parameter value passed to the server on the second search attempt is the same old value of the first search attempt. What is the missing part in my code below?
以下是脚本
<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>
更新
以下两个解决了
- 由uisng
function使它动态化，如@Oleg的答案中所述.
@li的 -
serializeGridData的复杂版本 postData方法未执行功能
- Making it dynamic by uisng
function, as mentioned in the answer by @Oleg. - Complex version of
serializeGridDataas commented by @Oleg postData method not executing function
推荐答案
要解决此问题，您应该为postData的每个 dynamic 属性使用函数:
To solve the problem you should use functions for every dynamical property of 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();.该对象将在执行语句时初始化，并且 current 值将另存为postData的属性(当前值$('#txtGameName').val()将另存为gameSearch的gameSearch属性c3>).我在旧答案中详细描述了该功能的窍门.
The problem in your old code: the statement $("#grid").jqGrid({...}); will be executed once. It calls $("#grid").jqGrid(); with object as parameter. The object will be initialized at the moment of execution of the statement and the current values will be saved as properties of postData(the current value $('#txtGameName').val() will be saved as gameSearch property of postData of the parameter object). I described the trick with functions in detailed in the old answer.
这篇关于网格将旧参数值传递给服务器-Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
