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

Question

免费的 jqgrid 顶部工具栏包含很多按钮，select 元素和没有最后一页按钮的分页器。按钮被换行到多行。使用

删除了中心部分

#grid_toppager_center {
    width: 0;
}

由于寻呼机在正确的区域，寻呼机下方和之后有很多未使用的空白space:

我尝试使用

删除空的 space

#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 宽度。

空space仍然出现：

如何将按钮放置到该区域，以便它们使用整个网格宽度并根据需要换行？在应该是寻呼机的按钮之后。

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

Answer 1

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

首先，您通过使用 pgbuttons: false、pginput: false、rowList: []、viewrecords: false（最后两个选项 rowList: [], viewrecords: false 已经是默认值).

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

$("#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 将寻呼机 table 移动到 导航栏内。结果如下图所示

如果您需要额外的定制，您需要自己完成。最后一个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", "");
});

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

how to place pager to end of top of toolbar in free jqgrid

jquery

html

css

jqgrid

free-jqgrid