我觉得你的问题很有趣。所以我做了一些演示，展示了如何在 jqGrid 的导航栏中实现“切换”按钮。在所有演示中，我都使用了顶部工具栏。
我决定使用jQuery UI Button 小部件。它允许从那里使用不同类型的按钮，即我们需要的“切换”按钮。按钮可以只是一个文本，只是一个图标，或者是文本和最多两个图标的组合（一个图标在文本之前，另一个图标在文本之后）。因此可以创建如下工具栏：
和 处于“已检查”状态，
和 处于“已检查”状态，
和 处于“已检查”状态，
或者只是图标，例如 和 用于“已检查”状态。
因为我使用了顶部工具栏我为了实现我应用了一些我描述的 jqGrid CSS 的路径 here:
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div {
padding: 1px 0;
float: left;
position: relative;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-button {
height: 18px !important;
cursor: pointer;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
float: left;
margin: 0 2px;
}
添加您发布的自定义按钮的代码我将修改为
var autoedit=false;
...
$("#grid_toppager_left table.navtable tbody tr").append(
'<td class="ui-pg-button ui-corner-all">' +
'<div class="ui-pg-div my-nav-checkbox">' +
'<input tabindex="-1" type="checkbox" id="AutoEdit" />' +
'<label title="Checkx caption which should appear as button tooltip"' +
' for="AutoEdit">Autoedit</label></div></td>'
);
$("#AutoEdit").button().click(function () {
if ($(this).is(':checked')) {
autoedit = true;
alert("Autoedit mode is ON");
} else {
autoedit = false;
alert("Autoedit mode is OFF");
}
});
如果是带有文本“自动编辑”的纯文本按钮。对应的附加CSS设置可以是
/* some settings to place Button in jqGrid */
.ui-jqgrid .ui-pg-table .my-nav-checkbox {
margin: 0px;
padding: 0px;
float: left;
height: 18px
}
/* fixing CSS of jQuery UI Buttons */
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text {
margin: 0px;
padding: 1px 2px 1px 2px;
}
如果使用带有文本的图标，代码将是
$("#AutoEdit").button({
icons: {primary: "ui-icon-mail-closed"}
}).click(function () {
var iconClass;
if ($(this).is(':checked')) {
autoedit = true;
iconClass = "ui-icon-mail-open";
} else {
autoedit = false;
iconClass = "ui-icon-mail-closed";
}
$(this).button("option", {icons: {primary: iconClass}});
});
要使按钮只有图标而没有文本，只需在.button({...}) 参数列表中添加text: false 选项
$("#AutoEdit").button({
text: false,
icons: {primary: "ui-icon-mail-closed"}
}).click(function () {
...
在这两种情况下都可以使用以下 CSS
/* some settings to place Button in jqGrid */
.ui-jqgrid .ui-pg-table .my-nav-checkbox {
margin: 0px;
padding: 0px;
float: left;
height: 18px
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > input {
padding: 1px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > label {
margin: 0px;
}
/* fixing CSS of jQuery UI Buttons */
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text {
margin: 0px;
padding: 1px 2px 1px 16px;
}
.ui-button-icon-only {
width: 16px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-icon-primary {
margin: -8px 0px 0px -8px;
}
您可以在这里找到不同的演示：
要使边框仅在悬停时位于按钮上方，您可以将 .my-nav-checkbox > label 的 CSS 更改为
.ui-jqgrid .ui-pg-table .my-nav-checkbox > label {
margin: 0px;
border-width: 0px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox:hover > label {
margin: 0px;
border-width: 1px;
}
结果你会得到（见the following demo）：
- 标准状态按钮
- 按钮的悬停状态
- 标准状态“选中”按钮
- “选中”按钮的悬停状态