0

素晴らしいフォント アイコン セットが使用されている場合、選択要素とトグル ボタンを配置して、jqgrid のトップ ツールバーを解放する方法を探しています。4.6で動作するコードを試しました：

    var i,
        selectElem= '<select tabindex="-1" id="_layout">';

    for (i=0; i<10; i++) {
        selectElem += '<option value="'+i+'" ';
        if (i==layout)
            selectElem += ' selected';
        selectElem += '>Form ' + i + '</option>'
    }

    $("#grid_toppager_left table.navtable tbody tr").append(
           '<td class="ui-pg-button ui-corner-all">' +
           '<div class="ui-pg-div my-nav-checkbox">' +
           selectElem +
           '</select>' +
           '</div></td>'
           );

しかし、選択要素は表示されません。

私が試したトグルボタンについて

    $("#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" ' + (autoedit ? 'checked ' : '')+'/>' +
               '<label ' +' for="AutoEdit">Toggle</label></div></td>'
                      );
    $("#AutoEdit").button({
        text: false,
        icons: {primary: "fa-star"}
    }).click(function () {
            autoedit = !autoedit;
        }
    });

トグルボタンもツールバーに表示されません。これらの要素を強制的に表示する方法は?

4

1 に答える 1

1

は table.navtableではないため、変更する必要があります。詳細については、ウィキの記事を参照してください。したがって、コードは次のようになります。

$("#grid_toppager_left .navtable").append(
 '<div class="ui-pg-button ui-corner-all">' +
     '<div class="ui-pg-div my-nav-checkbox">' +
     '<input tabindex="-1" type="checkbox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
     '<label ' +' for="AutoEdit">Toggle</label></div></div>'
            );
$("#AutoEdit").button({
    text: false,
    icons: {primary: "fa fa-lg fa-fw fa-star"}
}).click(function () {
        autoedit = !autoedit;
    }
);
var $label = $("#AutoEdit").next("label");
$label.children(".ui-button-icon-primary").removeClass("ui-icon");
$label.find(".ui-button-text").hide();

さらに、小さな CSS 修正を追加しました

.my-nav-checkbox > .ui-button-icon-only { margin-top: 5px; }
.my-nav-checkbox > .ui-button-icon-only > .ui-button-icon-primary.fa { margin-left: 6px; }
.my-nav-checkbox:hover  { margin: 1px;  }

デモは結果を示しています。

ここに画像の説明を入力

更新:私はあなたの質問について詳しく調べ、同じ問題のより良い解決策を提案できます。jQuery UI Button をまったく使用しない方が簡単だと思います。ui-state-activeその代わりに、クラスを切り替えるだけでボタンを「チェック済み」としてマークできます。CSSルールを追加することをお勧めします

.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active { margin: 1px; }

初めに。メソッドを使用して作成できるチェック済みボタンの実装navButtonAdd:

var autoedit = false;
$grid.jqGrid("navButtonAdd", "#grid_toppager", {
    buttonicon: "fa-star",
    caption: "",
    id: "AutoEdit",
    title: "Toggle autoedit",
    onClickButton: function (options, e) {
        autoedit = !autoedit;
        //$("#"+options.id)[autoedit ? "addClass" : "removeClass"]("ui-state-active");
        $(e.currentTarget)[autoedit ? "addClass" : "removeClass"]("ui-state-active");
    }
});

対応するデモは、副作用がなく、非常に単純に動作するようです。「チェック済み」ボタンの表示結果は、次の図のようになります。

ここに画像の説明を入力

于 2015-03-10T23:35:51.280 に答える