free-jqgrid 工具栏按钮换行在第二行

Question

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

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

在我在 jsFiddle 上设置的示例中，您可以看到删除和刷新按钮换行在第二行，尽管在第一行中有很多 space 可以设置它们。

在 jgGrid 中未观察到此行为。

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

JSFiddle 代码片段（从 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
}

free-jqgrid 工具栏按钮换行在第二行

free-jqgrid tool bar buttons wrapping in a second row

jquery

jqgrid

free-jqgrid