jqGrid中的“pager：true”vs“pager：#someid”，如何正确使用它们？

我正在玩一些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的使用pager: #gridpager网格显示如下：

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

当然我错过了一些东西，但我找不到那是什么。 我一直在这里检查一些文档， 这里和最后一个在这里，但仍然不清楚如何以正确的方式处理这个问题。

除此之外如果您注意到我正在尝试使用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的可能性toppager: true来创建顶级寻呼机。 在jqGrid为顶部寻呼机创建一个空

的情况下，它会生成，它为

分配唯一的id 。 最后，jqGrid将toppager参数的值从true更改为toppager之类的值，其中id（ order_logs ）的第一部分是网格的id。 free jqGrid允许使用true作为pager参数的值。 在这种情况下，可以简化HTML并删除不需要的空div

如果同时使用pager: true和toppager: true选项并使用navGrid或navButtonAdd 而不使用 pager参数，则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 ）。