jqGrid 是一个流行的 jQuery 插件，用于构建数据表格。其中，分页器是 jqGrid 的一个重要组成部分，它允许用户浏览和操作长列表的不同部分。默认情况下，分页器包括选择页面的下拉列表框和导航按钮。然而，在某些情况下，您可能想要去除页面选择框但仍保留导航按钮。本文将介绍如何实现这一目标。
第一步：配置分页器
要去除页面选择框，我们需要使用 jqGrid 的 pager 选项进行配置。以下是一个简单的示例：
$("#myGrid").jqGrid({
// ... 其他选项 ...
pager: "#myPager",
pgbuttons: true,
pginput: false,
});在上面的代码中，我们为 jqGrid 指定了一个 pager 选择器，以便 jqGrid 生成一个分页器。pgbuttons 选项控制是否显示导航按钮，而 pginput 选项控制是否显示页面选择框。默认情况下，两个选项都设置为 true。
第二步：自定义按钮样式
当 pginput 设置为 false 时，jqGrid 将隐藏页面选择框，同时在分页器的右侧添加一个空间来放置自定义的按钮。为了使这些按钮更加美观和易于使用，我们可以通过 CSS 样式对其进行自定义。
以下是一个示例样式表：
.ui-pg-button {
padding: 0.3em 0.5em !important;
margin-right: 0.2em;
}
.ui-pg-input {
display: none;
}在上面的代码中，我们使用 padding 和 margin 属性调整按钮的大小和位置，并使用 display 属性将页面选择框隐藏起来。
完整示例代码
下面是一个完整的示例代码，它演示了如何去除页面选择框并添加自定义按钮：
-- -------------------- ---- -------
---------------------
---- ------------
--------- -------
--------- -
- ----- ----- ------ ----- ------ -- --
- ----- ------- ------ ------- ------ --- --
- ----- -------------- ------ -------------- ------ --- -
--
------ -----------
---------- -----
-------- ------
------- ---
-------- ---- --- ----
------------ -----
------- -------
---------- -----
---
---------------------------------
----- ------
------ -
-------- --------------
-
------------------- -
-- -----------
---
--------------------------------
----- ------
------ -
-------- ---------------
-
------------------- -
-- -----------
---结论
在本文中，我们介绍了如何使用 jqGrid 的 pager 选项去除页面选择框，并添加自定义按钮。您可以根据需要修改样式和按钮的行为来满足您特定的需求。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31606