Перезагрузка сетки не работает для нескольких jqgrid - PullRequest
Новая
       26

Перезагрузка сетки не работает для нескольких jqgrid

4 голосов
/ 16 мая 2010

Я использую jqgrid. Моя страница имеет три вкладки, и каждая вкладка содержит свою сетку. Все сетки имеют разные идентификаторы. Содержимое вкладок лениво выбирается через AJAX-запрос. Теперь после того, как все три сетки визуализируются, и я пытаюсь перезагрузить сетку через функцию 

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

Перезагружается только сетка, загруженная последним, и она не работает для других сеток.

Например, если последовательность загрузки сетки равна: 1-2-3, этот код будет работать только для сетки 3 но если seq равен 3-2-1, он будет работать только для 1.

Но если я попытаюсь перезагрузить сетки, используя кнопку перезагрузки на панели навигации, все будет хорошо.

Обновление:

Я использую Struts2 jQuery Plugin. Он использует jqGrid 3.6.4. Я загружаю данные JSON с помощью AJAX.

Ниже приведено определение моей сетки. 

<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>

У меня есть три таких сетки, у всех разные идентификаторы и все такое.

Над каждой сеткой есть кнопка поиска, которая вызывает следующую функцию с параметром 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 Ответ

3 голосов
/ 16 мая 2010

Прежде всего в вашем коде вы определяете переменные myTradeOfferGame и acceptedTradeOfferGame (внутри else if(sel==2) и else if(sel==3)), но используете myTradeOffer и acceptedTradeOffer. Похоже на ошибки.

Второе: URL-адреса внутри else if(sel==2) и else if(sel==3) выглядят по-другому, как в первой таблице: URL-адреса являются статическими, так почему нужно каждый раз устанавливать это значение? Возможно, вы хотите добавить во все URL часть с $("#srchoptions").val()? Вы должны решить эту проблему самостоятельно.

В вашем коде видно, что вы используете $.ajaxSetup, который изменяет глобальные настройки $.ajax. Если вы измените это 3 раза, будет сохранен только последний. Если при одном обновлении работает только одна из трех настроек, то, тем не менее, $.ajaxSetup не лучший способ. jqGrid имеет параметр ajaxGridOptions, который устанавливает параметры $.ajax для таблицы (см. Установка типа содержимого запросов, выполняемых jQuery jqGrid ).

Кроме того, jqGrid (каждый экземпляр) имеет параметр postData, который будет перенаправлен на $.ajax как параметр data. Таким образом, вы можете использовать этот параметр в определении jqGrid. Если вы хотите, чтобы данные, которые вы указали как postData, были перезагружены в течение каждые trigger('reloadGrid'), вы можете просто определить postData, используя функцию. Поведение по умолчанию $.ajax заключается в проверке, является ли поле параметра data функцией, если это так, $.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');
}
...