重新加载网格不适用于多个 jqgrid [英] Reload Grid not working for multiple jqgrid
问题描述
我正在使用 jqgrid.我的页面有三个选项卡，每个选项卡包含一个不同的网格.所有网格都有不同的 id.选项卡的内容是通过 AJAX 请求延迟获取的.现在在渲染所有三个网格之后，我尝试通过函数重新加载网格
I am using jqgrid. My page has three tabs and each tab contains a different grid. All grids have different ids. The content of tabs is fetched via AJAX request lazily. Now after all three grids are rendered and I try to reload grid via function
jQuery("#myOffersTable").trigger('reloadGrid');
只有上次加载的网格会重新加载，其他网格不起作用.
Only the grid which loaded last reloads and it doesn't work for other grids.
例如，如果 grids load seq 为 : 1-2-3 那么此代码仅适用于 grid 3但如果 seq 是 3-2-1 那么它只适用于 1.
For example, if grids load seq is : 1-2-3 then this code will only work for grid 3 but if seq is 3-2-1 then it will work only for 1.
但是如果我尝试使用导航栏上的重新加载按钮重新加载网格，它工作正常.
But if I try reloading grids using reload button on navigator bar it works fine.
我正在使用 Struts2 jQuery 插件.它使用 jqGrid 3.6.4我使用 ajax 加载 json 数据.
I am using Struts2 jQuery Plugin.It uses jqGrid 3.6.4 I load json data using ajax.
以下是我的网格的定义.
Below is the definition of my grid.
<div id='t1'>
<s:url id="offersurl" action="offers"/>
<sjg:grid
id="offerstable"
caption="Customer Examples"
autoencode="false"
dataType="json"
href="%{offersurl}"
pager="true"
navigator="true"
navigatorAdd="false"
navigatorDelete="false"
navigatorEdit="false"
navigatorSearch="false"
gridModel="offers"
rowList="10,15,20"
rowNum="15"
rownumbers="true"
onCompleteTopics="addAcceptButtons"
filter="true"
>
<sjg:gridColumn name="id" index="id" title="ID" formatter="integer" sortable="false" search="false"/>
<sjg:gridColumn name="offeror" index="offeror" title="Offeror" sortable="true" search="false"/>
<sjg:gridColumn name="itemOffered" index="itemOffered" title="ItemOffered" sortable="false" search="true" searchoptions="{sopt:['eq']}"/>
<sjg:gridColumn name="quantityOffered" index="quantityOffered" title="QuantityOffered" sortable="false" search="true" searchoptions="{sopt:['eq','lt','gt']}"/>
<sjg:gridColumn name="expectedItem" index="expectedItem" title="ExpectedItem" sortable="false" search="true" searchoptions="{sopt:['eq']}"/>
<sjg:gridColumn name="expectedQuantity" index="expectedQuantity" title="ExpectedQuantity" sortable="false" search="true" searchoptions="{sopt:['eq','lt','gt']}"/>
<sjg:gridColumn name="acceptOffer" index="acceptOffer" title="Accept Offer" search="false"/>
</sjg:grid>
</div>
我有三个这样的网格都有不同的 id 和所有这些东西.
I have three such grids all have different ids and all that stuff.
每个网格上方都有一个搜索按钮，它调用以下函数，参数sel.sel为每个网格对应的1,2或3
There is a search button above each grid which calls the following function with parameter sel.sel is 1,2 or 3 corresponding to each grid
function search(sel)
{
alert("search");
if(sel==1)
{
tradeOffer = $("#games").val();
var srchValue = $("#srchoptions").val();
$.ajaxSetup({
data: {'gameId': tradeOffer},
});
jQuery("#offerstable").jqGrid('setGridParam',{url:"offers.action?q=1&srch="+srchValue,page:1});
//jQuery("#offerstable").trigger('reloadGrid');
$("#offerstable").trigger("reloadGrid");
}
else if(sel==2)
{
myTradeOfferGame = $("#my").val();
$.ajaxSetup({
data: {'gameId': myTradeOffer},
});
jQuery("#myOffersTable").jqGrid('setGridParam',{url:"offers.action?q=1",page:1});
jQuery("#myOffersTable").trigger('reloadGrid');
}
else if(sel==3)
{
acceptedTradeOfferGame = $("#accepted").val();
$.ajaxSetup({
data: {'gameId': acceptedTradeOffer},
});
jQuery("#acceptedtable").jqGrid('setGridParam',{url:"offers.action?q=1",page:1});
jQuery("#acceptedtable").trigger('reloadGrid');
}
}
每个网格都会调用该函数，但是
The function gets called for each grid but
jQuery("#acceptedtable").trigger('reloadGrid');
仅适用于最后加载的网格.
works for only grid loaded last.
推荐答案
首先在你的代码中定义变量 myTradeOfferGame 和 acceptedTradeOfferGame(在 elseif(sel==2) 和 else if(sel==3))，但使用 myTradeOffer 和 acceptedTradeOffer.看起来像错误.
First of all in your code you define variables myTradeOfferGame and acceptedTradeOfferGame (inside of else if(sel==2) and else if(sel==3)), but use myTradeOffer and acceptedTradeOffer. It looks like errors.
第二个:else if(sel==2) 和 else if(sel==3) 内部的 url 看起来像第一个表中的另一个:URL 是静态的，那么为什么每次都要设置这个值呢?可能您想在所有 url 中添加 $("#srchoptions").val() 的部分?您应该自己解决这些问题.
Second: The urls inside of else if(sel==2) and else if(sel==3) look another as in the first table: URLs are static, so why one should set this value every time? Probably you want to add in all urls the part with $("#srchoptions").val()? You should fix these problem yourself.
在您的代码中可以看到，您使用 $.ajaxSetup 来更改 $.ajax 的全局设置.如果您更改此 3 次，则只会保存最后一个.如果一次刷新只有三项设置中的一项起作用，那么 $.ajaxSetup 仍然不是最好的方法.jqGrid 有参数 ajaxGridOptions，它为每个表设置 $.ajax 的参数(参见 设置jQuery jqGrid执行的请求的内容类型).
In your code one can see, that you use $.ajaxSetup which change global settings of $.ajax. If you change this 3 times only the last one will be saved. If only one from three setting work at one refresh, $.ajaxSetup is nevertheless not the best way. jqGrid has parameter ajaxGridOptions, which set parameters of $.ajax per table (see Setting the content-type of requests performed by jQuery jqGrid).
此外，jqGrid(每个实例)都有一个参数postData，它将作为data参数转发给$.ajax.所以你可以在 jqGrid 定义中使用这个参数.如果您希望您放置为 postData 的数据将在 every trigger('reloadGrid') 期间重新加载您可以使用函数定义 postData.$.ajax 的默认行为是测试 data 参数的字段是否为函数，是的，$.ajax 调用这个函数获取值.因此您的代码可能如下所示:
Moreover jqGrid (every instance) has a parameter postData, which will be forward to $.ajax as data parameter. So you can use this parameter in the jqGrid definition. If you want that the data which you place as postData will be reloaded during every trigger('reloadGrid') you can just define postData using function. The default behavior of $.ajax is to test whether the field of data parameter is function, it it is so, $.ajax call this function the get the value. So your code could look like following:
// definition of 3 jqGrids
jQuery("#offerstable").jqGrid ({
postData: {'gameId': function() { return $("#games").val(); } },
//...
});
jQuery("#myOffersTable").jqGrid ({
postData: {'gameId': function() { return $("#my").val(); } },
//...
});
jQuery("#myOffersTable").jqGrid ({
postData: {'gameId': function() { return $("#accepted").val(); } },
//...
});
if(sel==1)
{
jQuery("#offerstable")
.jqGrid('setGridParam',
{url:"offers.action?q=1&srch="+encodeURIComponent($("#srchoptions").val()),
page:1})
.trigger('reloadGrid');
} else //...
// ...
顺便说一下，如果您使用 HTTP GET 进行数据请求，来自 data 参数 (postData) 的参数将只是 附加 到url(放置?"和&"，就像通常这样做的那样).
By the way if you use HTTP GET for data request, the parameters from data parameter (postData) will be just appended to the url (with placing '?' and '&' like one do this usual).
最终的代码可能如下所示:
The final code can be something like following:
// definition of 3 jqGrids
jQuery("#offerstable").jqGrid ({
url:"offers.action",
postData: {'q': 1,
'gameId': function() { return $("#games").val(); },
'srch': function() { return $("#srchoptions").val(); },
//...
});
jQuery("#myOffersTable").jqGrid ({
url:"offers.action",
postData: {'q': 1,
'gameId': function() { return $("#my").val(); } },
//...
});
jQuery("#myOffersTable").jqGrid ({
url:"offers.action",
postData: {'q': 1,
'gameId': function() { return $("#accepted").val(); } },
//...
});
和
if(sel==1) {
jQuery("#offerstable").jqGrid('setGridParam',{page:1}).trigger('reloadGrid');
} else if (sel==2) {
jQuery("#myOffersTable").jqGrid('setGridParam',{page:1}).trigger('reloadGrid');
} else if (sel==3) {
jQuery("#acceptedtable").jqGrid('setGridParam',{page:1}).trigger('reloadGrid');
}
这篇关于重新加载网格不适用于多个 jqgrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
