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

发布于 2024-12-18 12:03:16 字数 958 浏览 1 评论 0原文

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

复选框标题对于工具栏来说太宽。如何将复选框更改为具有两种状态的工具栏按钮，这两种状态反映 autoedit true/false 值（选中和未选中状态）。类似的按钮应该显示为按下或选中状态，而不是复选标记，如果再次单击，则应显示为常规/未选中状态。不能使用没有标题的纯复选标记，因为如果 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");
    }
});

原文

Code below from other stackoverflow answer is used in jqGrid to implement checkbox using jquery UI in jqGrid top toolbar. This is used to toggle autoedit variable true - false states.

Checkbox caption is too wide for toolbar. How to change checkbox to toolbar button with two states which reflect autoedit true/false values (checked and unchecked states). Instead of check mark similar button should appear in pressed or checked state and in regular/unchecked state if clicked again.
Pure checkmark without caption cannot used since there should be some visual glue instead of checkbox rectangle if tolbar contains more than one such checkbox to distinguish them visually.

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");
    }
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

⒈起吃苦の倖褔 2024-12-25 12:03:16

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

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

在此处输入图像描述和在“选中”状态下，

输入图像描述这里和在此处输入图像描述在“选中”状态下，

在此处输入图像描述和处于“选中”状态，

或者只是图标只喜欢在此处输入图像描述和

因为我使用了顶部工具栏，所以对于实现，我应用了我描述的一些 jqGrid CSS 的路径此处：

.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选项code>.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 的 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;
}

您将得到的结果（请参阅以下演示< /a>):

标准状态按钮
按钮
标准状态“选中”按钮
“选中”按钮的悬停状态

I find your question very interesting. So I made some demos which shows how to implement "toggle" buttons in the navigator bar of jqGrid. In all demos I used top toolbar.

I decide to use jQuery UI Button widget. It allows different kind of buttons one from there, the "toggle" button we need. The buttons can be just a text, just an icon or be combination of the text and up to two icons (one icon before the text and another after the text). As the result one can create toolbars like the following:

enter image description here and in the "checked" state,

or just icons only like enter image description here and for the "checked" state.

Because I used the top toolbar I For the implementation I applied the path of some jqGrid CSS which I described 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;
}

The code which add the custom button which you posted I would modified to

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");
    }
});

in case of pure text button with the text "Autoedit". The corresponding additional CSS settings can be

/* 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;
}

In case of usage the icon with the text the code will be

$("#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}});
});

To make the button with icon only without the text one need just add text: false option in the list of .button({...}) parameters

$("#AutoEdit").button({
    text: false,
    icons: {primary: "ui-icon-mail-closed"}
}).click(function () {
...

In both cases the following CSS can be used

/* 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;
}

For different demos you can find here:

To have the border over the button only on hovering you can change the CSS for the .my-nav-checkbox > label to

.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;
}

As the result you will have (see the following demo):