free-jqGrid工具栏按钮换行问题：如何使按钮全部显示在同一行？

我之前也碰到过类似的情况——启用scroll: 1和viewrecords: true但关闭分页时，工具栏按钮明明还有足够空间却提前换行。这主要是因为free-jqGrid在滚动模式下的工具栏布局计算逻辑，或是默认CSS样式限制了元素的可用宽度。给你几个可行的解决方案：

方案一：通过CSS强制工具栏使用弹性布局 #

直接修改工具栏的CSS样式，用flex布局合理分配空间，避免不必要的换行：

/* 让工具栏容器占满网格宽度，使用flex横向排列 */
.ui-jqgrid-pager {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100% !important;
    box-sizing: border-box;
}

/* 让按钮容器占据剩余可用空间，禁止内部换行 */
.ui-jqgrid-pager .ui-pager-control {
    flex: 1;
    white-space: nowrap;
}

/* 把记录计数信息推到左侧，给右侧按钮留出更多空间 */
.ui-jqgrid-pager .ui-paging-info {
    margin-right: auto;
    padding-right: 10px;
}

这段CSS会强制工具栏容器占满整个网格宽度，用flex布局让记录信息居左，按钮组在右侧充分利用剩余空间，同时禁止按钮组内部换行。

方案二：在加载完成后手动同步工具栏宽度 #

如果CSS调整没生效，可以尝试在网格的loadComplete事件里，手动将工具栏宽度设置为和网格主体一致：

$("#yourGridId").jqGrid({
    // 你的其他网格配置
    scroll: 1,
    viewrecords: true,
    pager: "#yourPagerId",
    loadComplete: function() {
        // 获取网格主体宽度，同步给工具栏
        var gridWidth = $(this).width();
        $(this).closest(".ui-jqgrid").find(".ui-jqgrid-pager").width(gridWidth);
    }
});

这样每次网格加载完成后，都会确保工具栏和网格主体宽度一致，避免因宽度计算偏差导致的按钮换行。

方案三：调整工具栏元素的布局参数 #

你还可以尝试修改free-jqGrid的工具栏布局参数，比如通过pagerpos控制记录信息的位置，给按钮留出更多空间：

$("#yourGridId").jqGrid({
    // 其他配置
    pager: "#yourPagerId",
    pagerpos: "left", // 将记录计数放在左侧
    toppager: false, // 如果没用到顶部工具栏可以关闭
});

结合这个设置再配合CSS调整，往往能解决布局拥挤的问题。

试试上面的方法，应该能让所有按钮保持在同一行显示。

内容的提问来源于stack exchange，提问作者Romualdo Caruso