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

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

#grid_toppager_center {宽度:0；}

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

我尝试使用

删除空白空间

#grid_toppager_center, #grid_toppager_right {宽度:0；}

和

 pagerpos: 'left',

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

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

jqgrid 设置:

$.extend($.jgrid.defaults, {图标集:fontAwesome"，自动调整大小:{紧凑:true，widthOfVisiblePartOfSortIcon:13}，toppager:是的，查看记录:假，pagerpos: '左',行列表:[50, 500, 1000],行数:50，

风格:

#grid_toppager_center, #grid_toppager_right {宽度:0；}.ui-pg-button-text {边距:4px！重要；}.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div >跨度 {边距:0 5px；字体大小:20px；}.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active {边距:1px；字体粗细:正常；}

更新

我尝试了来自

的演示

上看到结果:

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

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

例如.请参阅:

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

例如下一个演示移动寻呼表在导航栏内.结果如下图所示

如果您需要额外的自定义，您需要自己进行.上个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", "");});

free jqgrid top toolbar contains lot of buttons, select element and pager without last page button. Buttons are wrapped to multiple lines. Central part is removed using

#grid_toppager_center {
    width: 0;
}

Since pager is in right area, there is lot of unused empty space below and after pager:

I tried to remove empty space using

#grid_toppager_center, #grid_toppager_right {
    width: 0;
}

and

    pagerpos: 'left',

In this case pager appears in top of toolbar buttons:

How to place pager to other place, for example to end of top toolbar ?

jqgrid settings:

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

style:

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

Update

I tried demo from

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

and decreased jqgrid width.

Empty space still appears:

How to put buttons to this area so that they use whole grid width and wrap as many lines as nessecary ? After buttons where should be pager.

Desired is compact toolbar occupying as few rows as possible (two last buttons removed in this sample):

解决方案

The simplest way to implement your requirements seems me the following:

First of all you remove creating unneeded elements of the pager by usage pgbuttons: false, pginput: false, rowList: [], viewrecords: false (the last two options rowList: [], viewrecords: false are already defaults).

The pager of free jqGrid 4.8 still consists from the table with one row and three cells: left, center and right. So to make the left part over the whole pager one can use the following:

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

The results you can see on the demo:

In general one can use still the pager, and to hide only the right part of the pager. In the case one can use

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

for example. See the next demo which displays:

One can of cause reduce the pager by removing unneeded elements like do the demo:

UPDATED: The solution of your problem depends on exact requirements which you have. I wanted to show you the main problem which one have in the pager and navigator bar. All other adjustments can be easy made depend on what you need.

For example the next demo moves the pager table inside of navigator bar. The results looks like on the picture below

If you need additional customization, you need to do this yourself. The last demo uses the code

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