我正在玩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
网格显示如下:
仅表示底栏上的自定义按钮,而不是顶部栏上的自定义按钮。
当然我错过了一些东西,但我无法找到它。我一直在检查一些文档here,here和最后here,但我仍然不清楚如何以正确的方式处理此问题。
除此之外如果您注意到我正在尝试使用fontAwesome iconset但缺少图像,我应该在模板上添加CSS文件吗?
PS:我使用的是最新版本的jqGrid-free
答案 0 :(得分: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
)。