如何将寻呼机放置在自由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宽度。

仍然出现空白区域：

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

Desired是紧凑的工具栏占用尽可能少的行（此示例中删除了最后两个按钮）：

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移动导航栏中的寻呼机表。结果如下图所示

如果您需要额外的自定义，则需要自己执行此操作。最后一个演示使用代码

$("#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", "");
});