дублированные кнопки навигационной панели на jqGrid

Question

У меня проблема с обновлением сетки, потому что я добавляю несколько дополнительных кнопок после загрузки сетки, но когда я пытаюсь перезагрузить, добавляется еще одна кнопка.

  $j(document).ready(function (){
     $j("#search").button().click(function() {
       var loadingImg = "../img/bpm_scripts/common/images/images";
        var ejecutive=$j("#ejecutiveId").val();
        buildTable(ejecutive);
     });
 });

и

function buildTable( ejecutive){
    $j("#list").jqGrid('setGridParam',
                       {postData:{ ejecutive:ejecutive}, search:true });
    $j("#list2").trigger("reloadGrid");
    $j("#list2").jqGrid({ 
        url: "<f:invokeUrl methodName='getInstances' var='sales'/>",
        datatype: "xml", 
        colNames:['Inv No','No','Creado','Actualizado','Estatus','Hotel'], 
        colModel:[ 
            {name:'invoiceId',index:'invoiceId', width:40},
            {name:'invoiceContracCustom',index:'invoiceContracCustom', width:50},
            {name:'invoiceCreatedBy',index:'invoiceCreatedBy', width:100},
            {name:'invoiceUpdatedBy',index:'invoiceUpdatedBy', width:100},
            {name:'invoiceStatus',index:'invoiceStatus', width:75,align:'center'},
            {name:'invoiceHotels',index:'invoiceHotels', width:75,align:'center'}
        ], 
        rowNum:10, 
        autowidth: true, 
        rowList:[10,20,30],
        pager: jQuery('#pager2'), 
        sortname: 'invoiceId', 
        viewrecords: true, 
        sortorder: "desc", 
        xmlReader: { 
            root: "results",    
            row: "invoice",
            repeatitems: false, 
            page: "page>currentpage",
            total: "page>pages", 
            records:"page>records",
            id: "invoiceId" 
        }, 
        caption:"XML Example" }).navGrid('#pager2',
            {edit:false,add:false,del:true},
            {height:280,reloadAfterSubmit:false}, // edit options 
            {height:280,reloadAfterSubmit:false}, // add options 
            {reloadAfterSubmit:false}, // del options 
            {}); // search options 
    });

, а затем вызывается:

$j("#list2").jqGrid('navButtonAdd','#pager2', {
    caption:"",
    buttonicon:"ui-icon-check",
    position:"last",
    onClickButton:function(){ 
        var gsr = jQuery("#list2").jqGrid('getGridParam','selrow'); 
        if(gsr){
            $j.ajax({
                url: "url",
                type: 'GET',
                async: true,
                success: function() { alert('fine');  },
                error:function() { alert('Se ha producido un error'); } });
        }
        else 
            alert("Please select Row") ;
    } 
});

} Я не знаю, где должна быть эта часть, потому что если я поставлюдо этого ни одна кнопка не загружается.

С уважением.

[1]: http://a.imageshack.us/img46/7697/repeatf.jpg image

Answer 1

Спасибо за ваш совет. Я следовал вашим советам и добавил следующую строку и исчезло дублирование кнопок.

$j("#list").jqGrid('GridUnload');

Answer 2

Мне кажется, вам следует просто переупорядочить некоторые функции

$j(document).ready(function (){
    // create jqGrid with additional button
    $j("#list2").jqGrid({ 
        url: "<f:invokeUrl methodName='getInstances' var='sales'/>",
        datatype: "xml", 
        // .... other jqGrid parameters
    }).jqGrid('navButtonAdd','#pager2', {
        // all navButtonAdd parameters
    });

    $j("#search").button().click(function() {
        var loadingImg = "../img/bpm_scripts/common/images/images";
        $j("#list").jqGrid('setGridParam',
                   {postData:{ ejecutive: $j("#ejecutiveId").val()}, search:true });
        $j("#list2").trigger("reloadGrid");
    });
});

Более того, вы можете использовать postData как функцию непосредственно в определении $j("#list2").jqGrid (см. Как отфильтроватьДанные jqGrid НЕ используют встроенное поле поиска / фильтра ).Затем вы можете изменить код на следующий

$j(document).ready(function (){
    // create jqGrid with additional button
    $j("#list2").jqGrid({ 
        url: "<f:invokeUrl methodName='getInstances' var='sales'/>",
        postData: {
            ejecutive: function() { return $j("#ejecutiveId").val(); },
            search:true
        },
        datatype: "xml", 
        // .... other jqGrid parameters
    }).jqGrid('navButtonAdd','#pager2', {
        // all navButtonAdd parameters
    });

    $j("#search").button().click(function() {
        var loadingImg = "../img/bpm_scripts/common/images/images";
        $j("#list2").trigger("reloadGrid");
    });
});

Вы можете включить больше логики в функцию, которая при необходимости вычисляет параметр ejecutive.Важно понимать, что при каждом обновлении jqGrid функция будет вызываться непосредственно перед вызовом ajax.Таким образом, у вас всегда будет фактическое значение "#ejecutiveId".

Answer 3

Хотя это довольно старый вопрос, все же делюсь своим ответом на тот случай, если кто-то еще столкнется с той же проблемой.

Я обнаружил, что добавление явного вызова функции 'GridUnload' необязательно.

Если вы установите 'id' для кнопки, она не будет дублировать кнопку на навигационной панели, вот пример:

$j("#list2").jqGrid('navButtonAdd','#pager2', {
    id: "btnId",
    .
    .
    .
    . rest of the code
});

Answer 4

1. $("#grid").jqGrid('GridUnload');
2. $("#grid").jqGrid({ url: "");
3. jQuery("#grid").jqGrid('setGridParam', { postData: { id: function () { return balanzaConfig.formDataParam.id; }, strDate: function () { return balanzaConfig.formDataParam.strDate; } } }).trigger('reloadGrid');