如何在免费 jqgrid 中将寻呼机放置到工具栏顶部的末尾

Question

免费的 jqgrid 顶部工具栏包含许多按钮、选择元素和分页器，没有最后一页按钮。 按钮被包装成多行。使用删除中心部分

#grid_toppager_center {
    width: 0;
}

由于寻呼机位于右侧区域，因此寻呼机下方和之后有很多未使用的空白空间：

我尝试使用

删除空白空间

#grid_toppager_center, #grid_toppager_right {
    width: 0;
}

和

    pagerpos: 'left',

在这种情况下，寻呼机出现在工具栏按钮的顶部：

如何将寻呼机放置到其他位置，例如顶部工具栏的末尾？

jqgrid 设置：

$.extend($.jgrid.defaults, {
    iconSet: "fontAwesome" ,
    autoResizing: { compact: true,widthOfVisiblePartOfSortIcon: 13 },
    toppager: true,
    viewrecords: false,
    pagerpos: 'left',
    rowList: [50, 500, 1000],
    rowNum: 50,

风格：

#grid_toppager_center, #grid_toppager_right {
    width: 0;
}

.ui-pg-button-text {
    margin: 4px !important;
}

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span {
    margin: 0 5px;
    font-size: 20px;
}

.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active {
    margin: 1px;
    font-weight: normal;
}

更新

我尝试了来自

的演示

http://www.ok-soft-gmbh.com/jqGrid/OK/tougleButton1_iconOver2.htm

并减小 jqgrid 宽度。

仍然出现空白：

如何将按钮放置到该区域，以便它们使用整个网格宽度并包裹尽可能多的行 nessecary ？在按钮之后应该是寻呼机。

希望工具栏占据尽可能少的行数（本示例中删除了最后两个按钮）：

Answer 1

实现您的要求的最简单方法如下：

首先，您通过使用 pgbuttons: false、pginput: false、rowList: []、viewrecords: false（最后两个选项 rowList: []、viewrecords: false 已经是默认值）删除创建不需要的寻呼机元素。

免费的 jqGrid 4.8 的寻呼机仍然由具有一行和三个单元格的表格组成：左、中和右。因此，要使整个寻呼机的左侧部分可以使用以下内容：

$("#grid_toppager_center").hide();
$("#grid_toppager_right").hide();
$("#grid_toppager_left").attr("colspan", "3");

您可以在the demo 上看到的结果：

一般来说，仍然可以使用寻呼机，并且只隐藏寻呼机的右侧部分。在可以使用的情况下

$("#grid_toppager_right").hide();
$("#grid_toppager_left").attr("colspan", "2");

例如。请参阅the next demo，其中显示：

可以通过删除不需要的元素（如 do the demo）来减少寻呼机：

已更新：您的问题的解决方案取决于您的确切要求。我想向您展示寻呼机和导航栏中的主要问题。根据您的需要，可以轻松进行所有其他调整。

例如the next demo 移动分页表在导航栏内。结果如下图所示

如果您需要额外的自定义，您需要自己进行。上个demo使用的代码

$("#grid_toppager_left").hide();
$("#grid_toppager_right").hide();
$("#grid_toppager_center").attr("colspan", "2");
$("#grid_toppager_center").css({width: "", "text-align": "left", "white-space": ""});
$("#grid_toppager_center").find(">.navtable").append(
    $("#grid_toppager_center").find(">table.ui-pg-table")
);
$("#grid_toppager_center").find(">.navtable").children().each(function() {
    $(this).css("float", "left");
});
$grid.bind("jqGridAfterGridComplete", function () {
    var p = $(this).jqGrid("getGridParam"), $toppager = $(p.toppager);
    $toppager.find(".navtable").css("width", "");
});