重新加载网格不适用于多个jqgrid

时间:2010-05-15 20:52:30

标签: jquery jqgrid struts2 grid

我正在使用jqgrid。我的页面有三个选项卡,每个选项卡包含不同的网格。所有网格都有不同的ID。选项卡的内容是通过懒惰的AJAX请求获取的。现在,在渲染了所有三个网格后,我尝试通过函数重新加载网格

jQuery("#myOffersTable").trigger('reloadGrid'); 

只有最后重新加载的网格才会对其他网格起作用。

例如,如果网格加载seq为:1-2-3,则此代码仅适用于网格3 但如果seq是3-2-1那么它只适用于1。

但是,如果我尝试使用导航栏上的重新加载按钮重新加载网格,它可以正常工作。

更新

我正在使用Struts2 jQuery Plugin.It使用jqGrid 3.6.4 我使用ajax加载json数据。

以下是我网格的定义。

<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和所有东西。

每个网格上方都有一个搜索按钮,它使用参数sel.sel调用以下函数:1,2或3对应于每个网格

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');                 
    }

}

为每个网格调用该函数,但

jQuery("#acceptedtable").trigger('reloadGrid'); 

仅适用于最后加载的网格。

1 个答案:

答案 0 :(得分:3)

首先,在代码中定义变量myTradeOfferGameacceptedTradeOfferGame(在else if(sel==2)else if(sel==3)内),但使用myTradeOffer和{{1 }}。看起来像是错误。

第二:acceptedTradeOfferelse if(sel==2)内的网址与第一个表中的网址相同:网址是静态的,为什么每次都要设置此值?您可能希望在else if(sel==3)的所有网址中添加该部分?你应该自己解决这些问题。

在您的代码中,您可以看到,您使用$("#srchoptions").val()更改$.ajaxSetup的全局设置。如果更改3次,则仅保存最后一次。如果一次刷新中只有一个设置工作,$.ajax仍然不是最佳方式。 jqGrid有参数$.ajaxSetup,它为每个表设置ajaxGridOptions的参数(参见Setting the content-type of requests performed by jQuery jqGrid)。

此外,jqGrid(每个实例)都有一个参数$.ajax,它将作为postData参数转发到$.ajax。因此,您可以在jqGrid定义中使用此参数。如果您希望在每次 data期间<{>}}的数据重新加载,您可以使用函数定义postDatatrigger('reloadGrid')的默认行为是测试postData参数的字段是否为函数,它是如此,$.ajax调用此函数获取值。所以你的代码可能如下所示:

data

顺便说一下,如果您使用HTTP GET进行数据请求,$.ajax参数(// 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 //... // ... )中的参数只会追加到网址(放置'? '和'&amp;'喜欢这样做。)

最终代码可以是以下内容:

data

postData