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

免费jqgrid顶部工具栏包含许多按钮，选择元素和寻呼机没有最后一页按钮。 按钮被包装成多行。使用以下工具移除中心部分：

#grid_toppager_center {
    width: 0;
}

由于寻呼机位于正确的区域，寻呼机下方和后面有大量未使用的空白空间：

我尝试使用

#grid_toppager_center, #grid_toppager_right {
    width: 0;
}

及

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

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

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;
}

更新

我试着从

减小了jqgrid的宽度

仍会出现空白：

如何将按钮放置在该区域，以便它们使用整个网格宽度，并尽可能多地缠绕线条？按钮后面应该是寻呼机

理想的是紧凑的工具栏占据尽可能少的行。在本示例中，删除了最后两个按钮：

---

实现您的需求的最简单方法如下所示：

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

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

$grid\u toppager\u center.hide； $grid\u toppager\u right.hide； $grid\u toppager\u left.attrcolspan，3； 您可以在以下网站上看到结果：

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

$grid\u toppager\u right.hide； $grid\u toppager\u left.attrcolspan，2； 比如说。查看显示的内容：

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

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

例如，在导航栏内移动寻呼机表。结果如下图所示

如果您需要额外的定制，您需要自己完成。最后一个演示使用该代码

$grid\u toppager\u left.hide； $grid\u toppager\u right.hide； $grid_toppager_center.attrcolspan，2； $grid_toppager_center.css{宽度：，文本对齐：左，空白：}； $grid\u toppager\u center.find>.navtable.append $grid\u toppager\u center.find>table.ui-pg-table ; $grid\u toppager\u center.find>.navtable.children.eachfunction{ $this.cssfloat，左； }; $grid.bindjqGridAfterGridComplete，函数{ var p=$this.jqGridgetGridParam，$toppager=$p.toppager； $toppager.find.navtable.csswidth； };

---

我试着回答演示，但仍然出现空白。我更新了问题。@Andrus：你试了什么？哪个演示？在哪个浏览器中，使用哪个缩放？你的代码中我的演示有问题吗@安德鲁斯：见我答案的更新部分。谢谢。我试过了，但如果按钮下有文字，就会引起地狱之舞。由于未知原因，最后一个按钮换行到另一行。关于这一点的视频在@Andrus：我已经写信给你了：如果你需要额外的定制，你需要自己做。我不想做你所有的工作。可能使用浮动：在上一个演示中留下的不是最好的选择，应该找到更好的CSS设置。类似于$grid\u toppager\u center.find>.navtable>table.ui pg table.css{display:inline block}；将比$grid\u toppager\u center更好。find>.navtable.children.eachfunction{$this.cssfloat，left；}；

#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;
}