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

Question

我正在尝试一下 jqGrid 设置，有些事情我不清楚，比如 pager 的正确用法。这个想法是向顶部和底部栏添加一些自定义按钮。

这是我一直在使用的代码:

$("#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网格显示如下:

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

使用寻呼器:#gridpager网格显示如下:

仅表示底部栏上的自定义按钮，而不是顶部栏上的自定义按钮。

当然我错过了一些东西，但我找不到那是什么。我一直在检查一些文档 here , here最后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 的可能性创建顶部寻呼机。在这种情况下，jqGrid 创建一个空 <div>对于顶部寻呼机，它生成并分配唯一的 id对于<div> 。最后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 将按钮放置在两个寻呼机上。如果您只需要在一台寻呼机上放置一些按钮，那么您可以使用如下代码。如果在两个寻呼机上放置一些按钮，然后在特定寻呼机上放置另一个按钮:

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"中间的，应该是网格的id。在你的情况下，它可能是 "order_logs"而不是"grid" ( jqgh_grid_cb 应替换为 jqgh_order_logs_cb )。