Jqgrid寻呼机（顶部或底部）太多自定义按钮然后溢出图片和文本，如何解决？

Posted 2021-04-19

当向导航器寻呼机（顶部或底部）添加太多图标时，将显示图片和文本溢出。

但是，我想要的行为是：“如果添加太多图标并且网格没有那么大的宽度，”按钮将自动包裹在下一行寻呼机（顶部或底部）上。

这里的热门寻呼机示例：

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

答案

您演示使用jqGrid的旧版本4.6。问题在版本中已知。你可以实际4.15.5版本的jqGrid的free jqGrid fork，它与jqGrid 4.6兼容，但包含很多新功能（参见here，READMEs和the wiki）。它支持包装导航按钮（请参阅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参数指定页面部分的宽度。