包装在第二行的 free-jqgrid 工具栏按钮

Question

当使用分页器向 free-jgGrid 工具栏添加添加、编辑、删除和其他按钮时，它们会以接近 50% 的网格宽度换行到第二行。

我没有使用分页，但我确实使用了记录数（网格属性 scroll: 1, viewrecords: true）。

在我在 jsFiddle 上设置的示例中，您可以看到删除和刷新按钮环绕在第二行，尽管在第一行有足够的空间来设置它们。

在 jgGrid 中没有观察到这种行为。

我想知道如果网格宽度足够大，是否可以将所有按钮放在一行中？

JSFiddle 代码 sn-p（来自 OlegKi's example）：JSFiddle example

$(function () {
    "use strict";
    $("#grid").jqGrid({
        colModel: [
            { name: "firstName", width: 200 },
            { name: "lastName", width: 200 }
        ],
        data: [
            { id: 10, firstName: "Angela", lastName: "Merkel" },
            { id: 20, firstName: "Vladimir", lastName: "Putin" },
            { id: 30, firstName: "David", lastName: "Cameron" },
            { id: 40, firstName: "Barack", lastName: "Obama" },
            { id: 50, firstName: "François", lastName: "Hollande" }
        ],
        pager: "#pager",
        viewrecords: true,
        gridview: true,
        scroll: 1,
    })
.jqGrid('navGrid',
      '#pager',
      {edit: true, edittext: 'Edit',
       add: true, addtext: 'Add',
       del: true, deltext: 'Del',
       search:false,
       view: true, viewtext: 'View',
       refresh: true, refreshtext: 'Refresh'}       
      );
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>

<table id="grid"></table>
<div id="pager"></div>

Answer 1

如果我正确理解，你需要什么，那么价值足够小的选项pagerRightWidth（见the documentation）就是你需要的。

另外，不推荐使用scroll: 1。 gridview: true 选项在免费 jqGrid 中默认启用，可以将其删除。在您的情况下，您可以使用 pgbuttons: false, pginput: false 选项来删除分页按钮。请参阅https://jsfiddle.net/bft286tz/8/，它使用以下选项

    ...
    pager: true,
    pgbuttons: false,
    pginput: false,
    viewrecords: true,
    pagerRightWidth: 90
}