"pager: true" 与 jqGrid 中的 "pager: #someid"，如何正确使用它们？

Question

我正在尝试使用 jqGrid 设置，有些事情我不太清楚，比如 pager 的正确用法。我们的想法是向 top 和 bottom 栏添加一些自定义按钮。

这是我一直在玩的代码：

$("#order_logs").jqGrid({
    url: 'api_order_logs',
    datatype: "json",
    colModel: $('#colmodel').data('values'),
    width: 980,
    height: 300,
    pager: true,
    toppager: true,
    hoverrows: true,
    shrinkToFit: true,
    autowidth: true,
    rownumbers: true,
    viewrecords: true,
    rowList: [25, 50, 100],
    data: [],
    rownumWidth: 100,
    iconSet: "fontAwesome",
    gridview: true,
    sortable: {
        options: {
            items: ">th:not(:has(#jqgh_grid_cb,#jqgh_grid_rn,#jqgh_grid_actions),:hidden)"
        }
    },
    jsonReader: {
        root: 'rows',
        page: 'page',
        total: 'total',
        records: 'records',
        cell: '',
        repeatitems: false
    },
    cmTemplate: {autoResizable: true, editable: true},
    autoResizing: {compact: true, resetWidthOrg: true},
    autoresizeOnLoad: true,
    forceClientSorting: true
}).jqGrid('navGrid', '#gridpager', {
    edit: false,
    add: false,
    del: false,
    search: false,
    refresh: true,
    refreshstate: "current",
    cloneToTop: true
}).jqGrid('navButtonAdd', '#gridpager', {
    caption: 'Export',
    title: 'Export',
    buttonicon: 'fa fa-download',
    onClickButton: function () {
        // @todo
    }
}).jqGrid('navButtonAdd', '#gridpager', {
    caption: 'Email',
    title: 'Email',
    buttonicon: 'fa fa-envelope-o',
    onClickButton: function () {
        // @todo
    }
}).jqGrid('navButtonAdd', '#gridpager', {
    caption: 'Print',
    title: 'Print',
    buttonicon: 'fa fa-print',
    onClickButton: function () {
        // @todo
    }
});

使用pager: true网格显示如下：

意味着顶部和底部都没有自定义按钮。

使用pager: #gridpager网格显示如下：

意味着底部栏上只有自定义按钮，顶部栏上没有。

当然我遗漏了一些东西，但我找不到那是什么。我一直在查看一些文档 here, here and last here 但我仍然不清楚如何以正确的方式处理这个问题。

除此之外，如果您注意到我正在尝试使用 fontAwesome 图标集但缺少图像，我是否应该在我的模板中添加 CSS 文件？

PS: 我正在使用最新版本的 jqGrid-free

Answer 1

这很容易。哪个意义重复相同的值 '#gridpager' 作为 jqGrid 选项，作为 navGrid 和 navButtonAdd 的参数？

jqGrid 最多可以包含两个寻呼机：底部寻呼机和顶部寻呼机。可以使用选项 toppager: true 创建顶部寻呼机。您不使用选项 toppager: true。那么navGrid和navButtonAdd的第一个参数的唯一合法值为'#gridpager'。正确吗？

现在，可以在创建网格后使用 getGridParam 方法获取 jqGrid 的任何选项。例如，可以使用

获取 pager 参数的值

var pagerIdSelector = $("#order_logs").jqGrid("getGridParam", "pager");

免费的 jqGrid 允许使用

}).jqGrid('navGrid',  { ... });

而不是

}).jqGrid('navGrid', '#gridpager', { ... });

它测试第一个参数的类型。如果第一个参数的类型不是 "string" 则它使用 $(this).jqGrid("getGridParam", "pager") 来获取值。

现在我们可以提醒一下使用toppager: true创建top pager的可能性。在 jqGrid 为顶部寻呼机创建 一个空 <div> 的情况下，它生成并为 <div> 分配唯一的 id。最后，jqGrid 将 toppager 参数的值从 true 更改为类似 #order_logs_toppager 的值，id 的第一部分 (order_logs) 是网格的 id。免费的 jqGrid 允许使用 true 作为 pager 参数的值。在这种情况下，可以简化 HTML 并删除不需要的空 div

<div id="gridpager"><div>

如果同时使用pager: true和toppager: true选项并且使用navGrid或navButtonAdd没有寻呼机参数然后 jqGrid 将按钮放在 both 寻呼机上。如果您只需要在一个寻呼机上放置一些按钮，那么您可以使用如下代码。如果在两个寻呼机上放置一些按钮，然后在特定的寻呼机上放置另一个按钮：

var $grid = $("#order_logs");

$grid.jqGrid({
    ...
    pager: true,
    toppager: true,
    ...
});

// create nav bar and place Refresh button on both pagers
$grid.jqGrid('navGrid', {
    edit: false,
    add: false,
    del: false,
    search: false,
    refreshstate: "current",
});

var bottomPagerIdSelector = $grid.jqGrid("getGridParam", "pager"),
    topPagerIdSelector = $grid.jqGrid("getGridParam", "toppager");
// place Export button only on bottom pager
// and Email button only on top pager
$grid.jqGrid('navButtonAdd', bottomPagerIdSelector, {
    caption: 'Export',
    title: 'Export',
    buttonicon: 'fa fa-download',
    onClickButton: function () {
        // @todo
    }
}).jqGrid('navButtonAdd', topPagerIdSelector, {
    caption: 'Email',
    title: 'Email',
    buttonicon: 'fa fa-envelope-o',
    onClickButton: function () {
        // @todo
    }
});

最后的评论。您使用 forceClientSorting: true 选项，它只能与 loadonce: true 结合使用。 jqGrid 可以对所有数据进行排序，只有它拥有所有数据。

sortable参数值错误。 jqgh_grid_cb这样的选择器中间包含了"grid"，应该是grid的id。在您的情况下，它可能是 "order_logs" 而不是 "grid"（jqgh_grid_cb 应该替换为 jqgh_order_logs_cb）。

"pager: true" 与 jqGrid 中的 "pager: #someid"，如何正确使用它们？

"pager: true" vs "pager: #someid" in jqGrid, how to use them properly?

javascript

jquery

jqgrid

free-jqgrid