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

Question

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

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

只有上次加载的网格会重新加载，对其他网格不起作用。

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

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

更新:

我正在使用 Struts2 jQuery 插件。它使用 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'); 

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

Answer 1

首先在代码中定义变量 myTradeOfferGame 和 acceptedTradeOfferGame (在 else if(sel==2) 和 内部>else if(sel==3))，但使用 myTradeOffer 和 acceptedTradeOffer。看起来像是错误。

第二:else if(sel==2) 和 else if(sel==3) 中的 url 看起来与第一个表中的不同:URL 是static，那么为什么每次都要设置这个值呢？也许您想在所有网址中添加 $("#srchoptions").val() 部分？您应该自己解决这些问题。

在您的代码中，我们可以看到，您使用 $.ajaxSetup 来更改 $.ajax 的全局设置。如果您更改此设置 3 次，则只会保存最后一次。如果一次刷新时只能使用三种设置中的一种，那么 $.ajaxSetup 仍然不是最好的方法。 jqGrid 有参数 ajaxGridOptions，它设置每个表的 $.ajax 参数(参见 Setting the content-type of requests performed by jQuery jqGrid )。

此外jqGrid(每个实例)都有一个参数postData，它将作为data参数转发到$.ajax。所以你可以在jqGrid定义中使用这个参数。如果您希望放置为 postData 的数据在每个trigger('reloadGrid')期间重新加载您可以使用函数定义 postData 。 $.ajax 的默认行为是测试 data 参数的字段是否是 function，如果是的话，$.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 //...
// ...

顺便说一句，如果您使用 HTTP GET 进行数据请求，data 参数 (postData) 中的参数将被附加到url(像平常一样放置“？”和“&”)。

最终的代码可能如下所示:

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