" pager:true" vs"寻呼机:#someid"在jqGrid中,如何正确使用它们?

时间:2017-09-19 14:00:58

标签: javascript jquery jqgrid free-jqgrid

我正在玩jqGrid设置,有些事情对我来说并不清楚pager的正确用法。我们的想法是在topbottom栏中添加一些自定义按钮。

这是我一直在玩的代码:

$("#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

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

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

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

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

1 个答案:

答案 0 :(得分:1)

这很容易。哪个意义重复与jqGrid选项相同的值'#gridpager',作为navGridnavButtonAdd的参数?

jqGrid可以包含最多两个寻呼机:底部寻呼机和顶部寻呼机。可以使用选项toppager: true创建顶部寻呼机。您不使用选项toppager: true。然后 navGridnavButtonAdd的第一个参数的唯一合法值将是'#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: truetoppager: true选项并使用navGridnavButtonAdd 而不使用寻呼机参数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)。