Question

使用寻呼机向free-jgGrid工具栏添加添加，编辑，删除和其他按钮时，它们以近50％的网格宽度换行到第二行。

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

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

在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。默认情况下，在自由jqGrid中启用选项gridview: true，可以将其删除。在您的情况下，您可以使用pgbuttons: false, pginput: false选项删除分页按钮。请参阅https://jsfiddle.net/bft286tz/8/，其中使用以下选项

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

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

1 个答案: