Jqgrid пейджер (вверху или внизу) слишком много пользовательских кнопок, то он переполняет изображения и тексты, как это исправить? - PullRequest
Новая
       40

Jqgrid пейджер (вверху или внизу) слишком много пользовательских кнопок, то он переполняет изображения и тексты, как это исправить?

0 голосов
/ 22 февраля 2019

Если в пейджер навигатора (вверху или внизу) добавлено слишком много значков, отображается переполнение изображения и текста.

Но поведение, которое я хочу, заключается в следующем: «кнопки будут автоматически перенесены на следующий ряд пейджера (вверху или внизу), если будет добавлено слишком много значков, а сетка будет не такой большой ширины».

Пример пейджера здесь: 

$("#grid").jqGrid(
                {
                    url : 'value_url',
                    datatype : 'json',
                    mtype : 'GET',
                    colNames : [
                            'Estudiante Id',
                            'Cedula',
                            'Nombres y Apellidos',
                            'Sexo',
                            'Número Expediente'
                            ],
                    prmNames : {
                        id : 'estudianteId'
                    },
                    colModel : [...],
                    postData : {},
                    rowNum : 15,
                    rowList : [ 10, 15, 20, 30 ],
                    height : '100%',
                    autowidth : true,
                    shrinkToFit : true,
                    rownumbers : true,
                    pager : '#pager',
                    toppager : true,
                    sortname : 'cedula',
                    viewrecords : true,
                    sortorder : "asc",
                    caption : "Listado Estudiantes",
                    emptyrecords : "No se encontraron estudiantes",
                    loadonce : false,
                    loadComplete: function () {
                        $("#pager_right").attr('width', 150);
                    },
                    jsonReader : {
                        root : "rows",
                        page : "page",
                        total : "total",
                        records : "records",
                        repeatitems : false,
                        cell : "cell",
                        id : "estudianteId"
                    },
            });


    $("#grid").jqGrid(
        'navGrid',
        '#pager',
        {
            edit : false,
            add : false,
            del : false,
            search : false
        },
        {},
        {},
        {},
        { // search
            sopt : [ 'cn', 'eq', 'ne', 'lt', 'gt',
                    'bw', 'ew' ],
            closeOnEscape : true,
            multipleSearch : true,
            closeAfterSearch : true
        });

$("#grid").jqGrid(
        'navGrid',
        '#grid_toppager',
        {
            edit : false,
            add : false,
            del : false,
            search : false
        },
        {},
        {},
        {},
        { // search
            sopt : [ 'cn', 'eq', 'ne', 'lt', 'gt',
                    'bw', 'ew' ],
            closeOnEscape : true,
            multipleSearch : true,
            closeAfterSearch : true
        });


function activar_top_pager()
{
    $("#grid_toppager_left").html('<table cellspacing="0" cellpadding="0" border="0" style="float: right; table-layout: auto;" class="ui-pg-table navtable"><tbody><tr></tr></tbody></table>');

    $("#grid_toppager_center").html('<table cellspacing="0" cellpadding="0" border="0" style="float: right; table-layout: auto;" class="ui-pg-table navtable"><tbody><tr></tr></tbody></table>');

    $("#grid_toppager_right").html('<table cellspacing="0" cellpadding="0" border="0" style="float: right; table-layout: auto;" class="ui-pg-table navtable"><tbody><tr></tr></tbody></table>');

    $("#grid_toppager_center").width('1px'); 

  $("#grid_toppager_right").width('1px');   
}

activar_top_pager();

$("#grid").jqGrid('bindKeys');
$("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
    caption: "Op. ", buttonicon: "ui-icon-locked", title: "Operaciones ",
    id: 'btnope',   
     onClickButton: function() {
    }
 }); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
    caption: "Boton1", buttonicon: "ui-icon-locked", title: "Boton1",
    id: 'b1',   
     onClickButton: function() {
    }
 });  $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
    caption: "Boton2", buttonicon: "ui-icon-locked", title: "Boton2",
    id: 'b2',   
     onClickButton: function() {
    }
 }); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
    caption: "Boton3", buttonicon: "ui-icon-locked", title: "Boton3",
    id: 'b3',   
     onClickButton: function() {
    }
 }); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
    caption: "Boton4", buttonicon: "ui-icon-locked", title: "Boton4",
    id: 'b4',   
     onClickButton: function() {
    }
 }); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
    caption: "Boton5", buttonicon: "ui-icon-locked", title: "Boton5",
    id: 'b5',   
     onClickButton: function() {
    }
 }); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
    caption: "Boton6", buttonicon: "ui-icon-locked", title: "Boton6",
    id: 'b6',   
     onClickButton: function() {
    }
 }); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
    caption: "Boton7", buttonicon: "ui-icon-locked", title: "Boton7",
    id: 'b7',   
     onClickButton: function() {
    }
 }); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
    caption: "Boton8", buttonicon: "ui-icon-locked", title: "Boton8",
    id: 'b8',   
     onClickButton: function() {
    }
 }); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
    caption: "Boton9", buttonicon: "ui-icon-locked", title: "Boton9",
    id: 'b9',   
     onClickButton: function() {
    }
 }); $("#grid").jqGrid ('navButtonAdd','#grid_toppager',{
    caption: "Boton10", buttonicon: "ui-icon-locked", title: "Boton10",
    id: 'b10',  
     onClickButton: function() {
    }
 });

jsfiddle

1 Ответ

0 голосов
/ 22 февраля 2019

В демоверсии используется старая версия jqGrid 4.6.Проблема известна в версии.Вы можете использовать версию 4.15.5 бесплатной вилки jqGrid jqGrid, которая совместима с jqGrid 4.6, но содержит много новых функций (см. здесь , README и вики ).Он поддерживает обтекание кнопок навигатора (см. статья вики ).

Кроме того, вы не должны использовать функцию activar_top_pager в своей демонстрации.Вместо того, чтобы скрывать центральный пейджер, вы должны прокомментировать опции rowNum : 15, rowList : [ 10, 15, 20, 30 ] и добавить опции pgbuttons: false и pginput: false.Чтобы скрыть правый пейджер, вам нужен комментарий viewrecords : true опция: 

//rowNum : 15,
//rowList : [ 10, 15, 20, 30 ],
//viewrecords : true,
pgbuttons: false,
pginput: false

Вы увидите результаты на измененном демо: http://jsfiddle.net/OlegKi/41qv5xsu/12/.

Кстати, если вы действительно хотите отобразитьВ какой-то части пейджера вы можете указать ширину части страницы, используя параметры pagerLeftWidth, pagerCenterWidth или pagerRightWidth.

...