Question

在jqGrid中使用来自其他stackoverflow应答的代码，以使用jqGrid顶部工具栏中的jquery UI实现复选框。这用于切换autoedit变量true - false状态。

复选框标题对于工具栏来说太宽了。如何将复选框更改为工具栏按钮，其中两个状态反映autoedit个真/假值（已检查和未检查状态）。而不是复选标记类似按钮应出现在按下或检查状态，如果再次单击，则处于常规/未检查状态。没有标题的纯复选标记不能使用，因为如果tolbar包含多个这样的复选框以便在视觉上区分它们，那么应该有一些可视胶水而不是复选框矩形。

var autoedit=false;       
$("#grid_toppager_left table.navtable tbody tr").append(
    '<td><div><label><input class="ui-pg-div" tabindex="-1" type="checkbox" ' +
        (autoedit ? 'checked ' : '') +
        'id="AutoEdit" />Checbox caption which should appear as top toolbar button tooltip' +
        '</label></div></td>');
$("#AutoEdit").change(function () {
    if ($(this).is(':checked')) {
        autoedit = true;
        $("#AutoEdit").attr("checked", "checked");
    } else {
        autoedit = false;
        $("#AutoEdit").removeAttr("checked");
    }
});

Answer 1

我觉得你的问题非常有趣。所以我做了一些演示，演示了如何在jqGrid的导航栏中实现“切换”按钮。在所有演示中，我使用了顶部工具栏。

我决定使用jQuery UI Button小部件。它允许不同类型的按钮，我们需要的“切换”按钮。按钮可以只是一个文本，只是一个图标，或者是文本和最多两个图标的组合（文本前面有一个图标，文本后面是另一个图标）。结果，可以创建如下工具栏：

enter image description here 和处于“已检查”状态，

对于“已检查”状态，

或仅像 enter image description here 和这样的图标。

因为我使用了顶部工具栏我为了实现我应用了一些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");
    }
});

如果是纯文本按钮，文本为“Autoedit”。相应的其他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}});
});

要制作仅带图标的按钮而不需要文字，只需在text: false参数列表中添加.button({...})选项

$("#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）：

标准状态按钮
按钮
标准状态“已选中”按钮
“已检查”按钮

如何在jqGrid中使用jquery UI来使用切换按钮而不是复选框

1 个答案: