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

Question

下面来自其他 stackoverflow 答案的代码在 jqGrid 中用于在 jqGrid 顶部工具栏中使用 jquery UI 实现复选框。这用于切换自动编辑变量真 - 假状态。

复选框标题对于工具栏来说太宽了。如何将复选框更改为具有反射(reflect) 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小部件。它允许使用不同类型的按钮，即我们需要的“切换”按钮。按钮可以只是一个文本、一个图标或者是文本和最多两个图标的组合(一个图标在文本之前，另一个在文本之后)。因此，可以创建如下所示的工具栏:

和 在“已检查”状态下，

和 在“已检查”状态下，

和 在“已检查”状态下，

或者只是像 这样的图标和 对于“已检查”状态。

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

要使按钮只带图标而不带文本，只需添加 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;
}

对于不同的演示，您可以在这里找到:

icon only "toggle" button

text only "toggle" button

"toggle" button with the icon and the text

"toggle" button with the text and two icons

要仅在悬停时在按钮上设置边框，您可以更改 .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 ):

标准状态按钮

按钮的悬停状态

标准状态“选中”按钮

“选中”按钮的悬停状态