重新加载网格不适用于多个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.

例如，如果网格负载seq为:1-2-3，则此代码仅适用于网格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(在else if(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是静态的，那么为什么每次都应该设置此值?可能您想在所有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(请参见

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定义中使用此参数.如果希望每 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).

最终代码如下:

// 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屋！