1

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

仍然出现空白：

空的

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

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

想要的2

4

1 回答 1

2

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

首先，您通过使用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");

例如。请参阅下一个演示，其中显示：

在此处输入图像描述

通过删除不需要的元素（如演示）来减少寻呼机的原因之一是：

在此处输入图像描述

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

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

在此处输入图像描述

如果您需要额外的自定义，您需要自己执行此操作。最后一个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", "");
});
于 2015-03-14T10:55:14.353 回答