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网格显示如下：

selection_002

在顶部或底部没有自定义按钮。

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

selection_001

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

当然我错过了一些东西，但我无法找到它。我一直在检查一些文档here，here和最后here，但我仍然不清楚如何以正确的方式处理此问题。

除此之外如果您注意到我正在尝试使用fontAwesome iconset但缺少图像，我应该在模板上添加CSS文件吗？

PS：我使用的是最新版本的jqGrid-free

Answer 1

这很容易。哪个意义重复与jqGrid选项相同的值'#gridpager'，作为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）。

＆＃34; pager：true＆＃34; vs＆＃34;寻呼机：#someid＆＃34;在jqGrid中，如何正确使用它们？

1 个答案: