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

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

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

Пример верхнего пейджера здесь:

$("#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

Proyecto 21.02.2019 источник

Ответы (1)

arrow_upward
0
arrow_downward

В вашей демонстрации используется старая версия 4.6 jqGrid. Проблема известна в версии. Вы можете использовать актуальную версию 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.

Oleg 22.02.2019

comment

Спасибо, это частично решает мою проблему (кнопки теперь переносятся), но создал новую, для меня верхний и нижний пейджер разные, на самом деле их кнопки создаются динамически в зависимости от привилегий пользователей и источника данных, но нижнему пейджеру нужны записи просмотра, текст и кнопки, но сверху это не нужно, а затем, если я использую viewrecords: false, pgbuttons: false, pginput: false, это помогает, но для обоих пейджеров, и я хочу скрыть только сверху, но оставить внизу. - Proyecto; 25.02.2019

comment

Я решил временную проблему с помощью небольшого уродливого хака на loadComplete, который я использовал: (#grid_toppager_center).hide(); и $(#grid_toppager_right).hide(); но у меня есть страницы с несколькими вложенными jqgrids (например, 20 или более), и я хочу знать: есть ли лучшие варианты, чем этот? Я использую 4.15.6-предварительную версию бесплатной jqGrid. - Proyecto; 25.02.2019