Jqgrid pager (top or bottom) 自定义按钮太多导致图文溢出，如何解决？

Question

当向导航器分页器（顶部或底部）添加过多图标时，会显示图片和文本溢出。

但是，我想要的行为是："buttons will be wrapped on the next row of pager (top or bottom) automatically if too many icons are added and the grid have not so large width"。

此处为热门寻呼机示例：

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

Answer 1

您的演示使用旧版本 4.6 的 jqGrid。该问题在版本中已知。实际4.15.5版本free jqGrid fork of jqGrid, which is compatible to jqGrid 4.6, but contains a lot of new features (see here, READMEs and the wiki). It supports wrapping of navigator buttons (see the wiki article).

此外，您不应使用演示的 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 参数指定页面部分的宽度。

Jqgrid pager (top or bottom) 自定义按钮太多导致图文溢出，如何解决？

Jqgrid pager (top or bottom) too many custom buttons then it overflows pictures and texts, how to fix it?

javascript

jquery

jqgrid

pager