Question

Код ниже от другого ответа stackoverflow используется в jqGrid для реализации флажка с использованием пользовательского интерфейса jquery на верхней панели инструментов jqGrid. Используется для переключения переменной авторедактирования в состояние 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");
    }
});

Oleg · Answer 1 · 27 ноября 2011

Я нахожу ваш вопрос очень интересным.Поэтому я сделал несколько демонстраций, которые показывают, как реализовать кнопки «переключения» в панели навигатора jqGrid.Во всех демонстрациях я использовал верхнюю панель инструментов.

Я решил использовать виджет jQuery UI Button .Он позволяет использовать различные виды кнопок, одну из них, «кнопку переключения», которая нам нужна.Кнопки могут быть просто текстом, просто значком или комбинацией текста и до двух значков (один значок перед текстом, а другой после текста).В результате можно создать панели инструментов, такие как:

enter image description here и в состоянии «проверено»,

или только значки, такие как enter image description here и для состояния «проверено».

Поскольку я использовал верхнюю панель инструментов I Для реализации я применил путь к некоторому 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");
    }
});

в случае чисто текстовой кнопки с текстом "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;
}

Для различных демонстраций вы можете найти здесь:

Чтобы граница над кнопкой была толькоПри наведении курсора вы можете изменить CSS для .my-nav-checkbox > label на

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

В результате вы получите (см. следующую демонстрационную версию ):