jqgrid inlineNav cloneToTop? - PullRequest
Новая
       2

jqgrid inlineNav cloneToTop?

0 голосов
/ 14 декабря 2011

Я играю с jqGrid, и у меня есть комбинация и пейджера (с View и Refresh) и inlineNav (с Add, Edit, Save, Cancel).

У меня есть toppager: true и cloneToTop: true, который размещает элементы управления пейджером сверху и снизу. Однако я не могу сделать то же самое с моим inlineNav.

Полный код следует, но я попытался сделать следующее, но верхние кнопки не реагируют должным образом, и это немного беспорядок: 

$("#pager_left").clone().appendTo("#list_toppager_left");

Может кто-нибудь помочь? 

    $(document).ready(function() {

        var lastSel;

  $("#list").jqGrid({
    url:'db.php',
    datatype: 'json',
    mtype: 'GET',
    colNames:[
    /*...*/
    ],
    colModel :[ 
      /*...*/
    ],
    pager: '#pager',
    autowidth:true,
    height: "100%",
    rowNum:20,
    rowList:[20,50,100,1000],
    loadtext: 'Loading...',
    viewrecords: true,
    sortname:'BUSINESS',
    sortorder:"ASC",
    multiselect:false,
    sortable:true,
    toppager:true,
    ignorecase:true,
    gridview: true,
    editurl:"db_edit.php",
    caption: 'Bath BID',
    onSelectRow: function(id) {
        if(id && id!==lastSel){ 
            $('#list').saveRow(lastSel);
            lastSel=id; 
        }
        }
  }).navGrid('#pager', {
    edit:false,
    add:false,
    del:true,
    view:true,
    search:false,
    viewtext:"View", 
    closeOnEscape:true,
    edittext:"Edit", 
    refreshtext:"Refresh", 
    addtext:"Add", 
    deltext:"Delete", 
    searchtext:"Search",
    cloneToTop:true},{},{},{},{multipleSearch:true});

    $("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true});
    $("#list").jqGrid('inlineNav','#pager', { 
        edittext:"Edit", 
        addtext:"Add",
        savetext:"Save",
        canceltext:"Cancel",
        cloneToTop:true
    });

Заранее спасибо!

Ответы [ 2 ]

2 голосов
/ 15 декабря 2011

Я проанализировал вашу проблему.Прежде всего, опция cloneToTop: true поддерживается navGrid , но не inlineNav .Более того, идентификаторы кнопок будут созданы с использованием идентификатора сетки в качестве префикса.В результате каждый будет иметь 

list_iladd, list_iledit, list_ilsave, list_ilcancel

в качестве идентификаторов.С другой стороны, идентификаторы стандартных кнопок navGrid from будут иметь следующие идентификаторы после cloneToTop: true: 

view_list, del_list,
view_list_top, del_list_top

Так что нельзя просто дважды вызвать navGrid с обоими пейджерами: 

$("#list").jqGrid('inlineNav', '#list_toppager', {
    edittext: "Edit",
    addtext: "Add",
    savetext: "Save",
    canceltext: "Cancel"
});
$("#list").jqGrid('inlineNav', '#pager', {
    edittext: "Edit",
    addtext: "Add",
    savetext: "Save",
    canceltext: "Cancel"
});

В результате вы получите дубликаты идентификатора (см. демо ).

Внесение изменений идентификатора вручную перед вызовом inlineNav во второмвремя также не очень поможет (см. следующую демонстрацию ), потому что код, который будет выполняться после нажатия на встроенные кнопки, использует те же правила построения идентификатора.Так что только кнопки с оригинальными идентификаторами будут отключены или включены.

Я могу подвести итог: текущая реализация inlineNav не поддерживает верхний пейджер.Я бы порекомендовал вам использовать inlineNav только один раз.Если вам нужны значки во втором пейджере, вам следует лучше изучить исходный код inlineNav (см., Например, здесь ) и таким же образом добавить новые кнопки относительно navButtonAdd и использоватьдругие идентификаторы.

Я надеюсь, что в следующей версии код inlineNav будет расширен для поддержки двух пейджеров одновременно.

ОБНОВЛЕНО : я забылОтметим, что я исправил небольшую позицию текста относительно значков в панелях навигатора.Это не основная тема вашего вопроса, но, вероятно, вам это тоже будет интересно: 

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div {
    margin-top: 2px;
    padding-right: 5px;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
    margin-top: -2px;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div {
    margin-top: 2px;
    padding-right: 5px;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon {
    margin-top: -2px;
}
0 голосов
/ 15 декабря 2011

Это немного неуклюже, но для быстрого выигрыша я просто продублировал код в grid.inlinedit.js, чтобы воссоздать кнопки, которые делают одно и то же в верхней и нижней полосах ... это работает. 

            if(o.add) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.addtext,
                title : o.addtitle,
                buttonicon : o.addicon,
                id : $t.p.id+"_iladd",
                onClickButton : function ( e ) {
                    $($t).jqGrid('addRow', o.addParams);
                    if(!o.addParams.useFormatter) {
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                    }
                }
            });

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.addtext,
                title : o.addtitle,
                buttonicon : o.addicon,
                id : $t.p.id+"_top_iladd",
                onClickButton : function ( e ) {
                    $($t).jqGrid('addRow', o.addParams);
                    if(!o.addParams.useFormatter) {
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                    }
                }
            });

        }
        if(o.edit) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.edittext,
                title : o.edittitle,
                buttonicon : o.editicon,
                id : $t.p.id+"_iledit",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('editRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.edittext,
                title : o.edittitle,
                buttonicon : o.editicon,
                id : $t.p.id+"_top_iledit",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('editRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });


        }
        if(o.save) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.savetext || '',
                title : o.savetitle || 'Save row',
                buttonicon : o.saveicon,
                id : $t.p.id+"_ilsave",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        if($("#"+$.jgrid.jqID(sr), "#"+$.jgrid.jqID($t.p.id) ).hasClass("jqgrid-new-row")) {
                            var opers = $t.p.prmNames,
                            oper = opers.oper;
                            if(!o.editParams.extraparam) {
                                o.editParams.extraparam = {};
                            }
                            o.editParams.extraparam[oper] = opers.addoper;
                        }
                        $($t).jqGrid('saveRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.savetext || '',
                title : o.savetitle || 'Save row',
                buttonicon : o.saveicon,
                id : $t.p.id+"_top_ilsave",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        if($("#"+$.jgrid.jqID(sr), "#"+$.jgrid.jqID($t.p.id) ).hasClass("jqgrid-new-row")) {
                            var opers = $t.p.prmNames,
                            oper = opers.oper;
                            if(!o.editParams.extraparam) {
                                o.editParams.extraparam = {};
                            }
                            o.editParams.extraparam[oper] = opers.addoper;
                        }
                        $($t).jqGrid('saveRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
        }
        if(o.cancel) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.canceltext || '',
                title : o.canceltitle || 'Cancel row editing',
                buttonicon : o.cancelicon,
                id : $t.p.id+"_ilcancel",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('restoreRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.canceltext || '',
                title : o.canceltitle || 'Cancel row editing',
                buttonicon : o.cancelicon,
                id : $t.p.id+"_top_ilcancel",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('restoreRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...