“传呼机:真"与“传呼机:#someid"在jqGrid中，如何正确使用它们? [英] "pager: true" vs "pager: #someid" in jqGrid, how to use them properly?

问题描述

我正在使用jqGrid设置进行一些操作，有些事情对我来说还不清楚，例如pager的正确用法.想法是在top和bottom栏中添加一些自定义按钮.

I am playing a little bit with the jqGrid setup and some things aren't clear to me like the proper usage of pager. The idea is to add some custom buttons to the top and bottom bars.

这是我一直在玩的代码:

This is the code I have been playing with:

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

With the usage of pager: true the grid display as follow:

顶部和底部都没有自定义按钮.

Meaning no custom buttons at top nor bottom.

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

With the usage of pager: #gridpager the grid display as follow:

仅意味着底部栏中的自定义按钮，而不意味着顶部栏中的自定义按钮.

Meaning only custom buttons on the bottom bar but not on the top one.

当然，我缺少了一些东西，但我找不到那是什么.我一直在此处，此处，但我仍然不清楚如何以正确的方式处理此问题.

Certainly I am missing something but I can't find what that is. I've been checking some docs here, here and last here but still not clear to me how to deal with this in the right way.

此外，如果您发现我正在尝试使用fontAwesome图标集，但是图像丢失，是否应该在模板上添加CSS文件?

In addition to this if you notice I am trying to use the fontAwesome iconset but images are missing, should I add the CSS file on my templates?

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

PS: I am using the latest version of jqGrid-free

推荐答案

非常简单.

jqGrid最多可以包含两个寻呼机:底部寻呼机和顶部寻呼机.可以使用选项toppager: true创建首页呼叫器.您不使用选项toppager: true.然后，navGrid和navButtonAdd的第一个参数的唯一合法值将是'#gridpager'.正确吗?

jqGrid can contain maximal two pagers: bottom pager and top pager. The top pager can be created by usage of the option toppager: true. You don't use the option toppager: true. Then the only legal value of the first parameter of navGrid and navButtonAdd will be '#gridpager'. Correct?

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

Now, one can use getGridParam method to get any option of jqGrid after the grid is created. For example one can get the value of pager parameter using

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

免费的jqGrid允许使用

Free jqGrid allows to use

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

代替

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

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

It tests the type of the first parameter. If the type of the first parameter isn't "string" then it uses $(this).jqGrid("getGridParam", "pager") to get the value.

现在，我们可以提醒您使用toppager: true创建首页传呼机的可能性.如果 jqGrid为首页的传呼器创建了一个空的<div>，则它会为<div>分配唯一的id.最后，jqGrid将toppager参数的值从true更改为#order_logs_toppager之类的值，其中id的第一部分(order_logs)是网格的ID.免费的jqGrid允许使用true作为pager参数的值.在这种情况下，可以简化HTML并删除不需要的空div

Now we can remind about the possibility to use toppager: true to create top pager. In the case jqGrid creates an empty <div> for the top pager, it generates, it assigns unique id for the <div>. Finally jqGrid changes the value of toppager parameter from true to the value like #order_logs_toppager, there the first part of the id (order_logs) is the id of the grid. Free jqGrid allows to use true as the value of pager parameter. In the case one can simplify the HTML and remove unneeded empty div

<div id="gridpager"><div>

如果一个人同时使用 和pager: true选项，并且使用了navGrid或navButtonAdd ，而没有寻呼机参数，则jqGrid会将按钮放在两者寻呼机.如果您只需要在一个寻呼机上放置一些按钮，则可以使用下面的代码.如果在两个传呼器上都放一些按钮，然后在特定的传呼器上放另一个按钮:

If one uses both pager: true and toppager: true options and uses navGrid or navButtonAdd without pager parameters then jqGrid places the buttons on both pagers. If you need to place some buttons only on one pager then you can use the code like below. If place some buttons on both pagers and then place another buttons on specific pagers:

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可以对所有数据进行排序，除非它具有所有数据.

The final remarks. You use forceClientSorting: true option, which works only in combination with loadonce: true. jqGrid can sort all the data only it it has all data.

sortable参数的值错误.像jqgh_grid_cb这样的选择器在中间包含"grid"，这应该是网格的ID.在您的情况下，它可能是"order_logs"而不是"grid"(应将jqgh_grid_cb替换为jqgh_order_logs_cb).

The value of sortable parameter is wrong. The selectors like jqgh_grid_cb contains "grid" in the middle, which should be the id of the grid. In your case it could be "order_logs" instead of "grid" (jqgh_grid_cb shoule be replaced to jqgh_order_logs_cb).

这篇关于“传呼机:真"与“传呼机:#someid"在jqGrid中，如何正确使用它们?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！