如何将寻呼机放置在自由jqgrid中工具栏顶部的末尾

免费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的宽度。

空的空间仍然出现：

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

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

Answer 1

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

首先，通过用法pgbuttons: false删除创建寻呼机的不需要的元素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"); 

您可以在演示中看到的结果：

通常，人们仍然可以使用寻呼机，并且只隐藏寻呼机的右侧部分。 在可以使用的情况下

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

例如。 查看显示的下一个演示 ：

可以通过删除不需要的元素来减少寻呼机，例如演示 ：

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

例如，下一个演示将分页器表移动到导航栏内。 结果如下图所示

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

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