2

jQuery UI をダウンロードすると、選択したテーマのスタイルシートと、アイコンを含むいくつかの画像ファイルが得られます。単一の<button>要素にアイコンを追加する方法を理解しましたが、グリッド (jqGrid) でボタンを動的に生成していて、これらのアイコンを使用したい状況があります。たとえば、CSS ファイルからこのアイコンを使用するとします。

.ui-icon-trash { background-position: -176px -96px; }

次に、gridCompleteイベントを処理してボタンをグリッドに追加します。

gridComplete: function () {
    var ids = $("#myGrid").jqGrid('getDataIDs');
    for (var i = 0; i < ids.length; i++) {
        var deleteButton = "<button type='button' style='height: 22px;width: 20px;' title='Delete' onclick=deleteRow(" + ids[i] + ")></button>";
        $("#myGrid").jqGrid('setRowData', ids[i], { DeleteButton: deleteButton });
    }
}

たとえば、ボタンタグでクラスを使用してから、次のdeleteRowButtonようにjQueryを使用してみました：

$(".deleteRowButton").button({
    icons: {
        primary: 'ui-icon-trash'
    },
    text: false
});

しかし、これはうまくいきません。ボタンにこのアイコンを表示するにはどうすればよいですか?

4

2 に答える 2

4

間違った場所に配置したため、コードが機能し$(".deleteRowButton").button({icons: {primary: 'ui-icon-trash'}, text: false});なかったと思います。<button class='deleteRowButton' ...>内部を作成する場合は、投稿したコードの直後の内部でもgridComplete呼び出しを行う必要があります。$(".deleteRowButton").button(...)gridComplete

gridComplete: function () {
    var $this = $(this), ids = $this.jqGrid('getDataIDs'), l = ids.length,
        i, deleteButton;
    for (i = 0; i < l; i++) {
        deleteButton = "<button type='button' style='height:22px;width:20px;'" +
            " class='deleteRowButton' title='Delete' onclick=deleteRow(" +
            ids[i] + ")></button>";
        $this.jqGrid('setRowData', ids[i], { DeleteButton: deleteButton });
    }
    $(".deleteRowButton").button({
        icons: {
            primary: 'ui-icon-trash'
        },
        text: false
    });
}

最初のデモを参照してください。

上記のアプローチのパフォーマンスには小さな問題があります。あなたを使用setRowDataして、ページに変更を加えます。ページ上のすべての変更は、ページ上に存在する他のすべての要素の位置の再計算に従います。したがって、パフォーマンスを向上させるには、グリッド上の変更の数を減らすことをお勧めします。したがって、より良い方法は、カスタム formattrerを使用することです。コードの新しいバージョンは、以前のものと実質的にまったく同じように簡単になります。関数として定義するだけですformatter：

{ name: 'DeleteButton', width: 20,
    formatter: function (cellvalue, options) {
        return "<button type='button' class='deleteRowButton' " +
            "style='height: 22px;width: 20px;' title='Delete'></button>";
    }},

gridCompleteまたはのコードをloadComplete減らす

gridComplete: function () {
    $(".deleteRowButton").button({
        icons: {
            primary: 'ui-icon-trash'
        },
        text: false
    }).click(function (e) {
        var $tr = $(e.target).closest("tr.jqgrow");
        alert("the row with id=" + $tr.attr("id") + " need be deleted");
    });
}

元のコードでは、メソッドはグローバルdeleteRowでなければなりません(最上位で定義する必要があります)。新しいコードは、イベント ハンドラーのみを使用できます。次のデモをご覧ください。click

ちなみに、every<button>をclickイベント ハンドラにバインドする必要はありません。clickよく知られているように、ボタンにイベント ハンドラーがない場合、イベント バブリングが発生します。clickそのため、グリッドの読み込みと再読み込みのたびにイベント ハンドラーをバインドする代わりに、グリッド本体全体で対応するイベント ハンドラーを1 回定義するだけで済みます。つまり、onCellSelectコールバックを使用できます。rowidクリックしたセルの列の と インデックスが計算済みなので、使い勝手はとても快適です。eさらに、コールバックの4 番目のパラメーターごとに、 clicked の DOM 要素であるonCellSelectイベント ハンドラーにアクセスできます。したがって、上記のコードを置き換えることができますe.tagret<button>gridComplete次のコードに:

onCellSelect: function (rowid, iCol, cellcontent, e) {
    if ($(e.target).closest("button.deleteRowButton").length > 0) {
        alert("the row with id=" + rowid + " need be deleted");
    }
},
gridComplete: function () {
    $(".deleteRowButton").button({
        icons: {
            primary: 'ui-icon-trash'
        },
        text: false
    });
}

このようにして、パフォーマンスをさらに向上させ、ページに使用されるメモリを少し減らすことができます。デモでは、最後のコードがライブで表示されます。ほとんどの場合、 のような構造を使用する必要はありません$(e.target).closest("button.deleteRowButton").length > 0。その代わりに、列のインデックスを確認するだけですiCol。必要に応じて、代わりに列名をテストできます。使用できます

$(this).jqGrid("getGridParam", "colModel")[iCol].name

iColを対応する列名に変換します。

于 2012-10-19T16:03:08.540 に答える
1

'button' から 'input type="button"' に切り替えることをお勧めします。CSS で背景画像を使用してアイコンを設定できるはずです。グリッドの完全な関数は次のようになります。

gridComplete: function () {    
var ids = $("#myGrid").jqGrid('getDataIDs');    
for (var i = 0; i < ids.length; i++) {    
    var deleteButton = "<input type='button' class='HasIcon' style='height: 22px;width: 20px;' title='Delete' onclick=deleteRow(" + ids[i] + ")/>";    
    $("#myGrid").jqGrid('setRowData', ids[i], { DeleteButton: deleteButton });    
}

}

CSS は次のようになります。

#myGrid input[type=button].HasIcon
{
    background-image: url(/* icon location */);
    background-repeat: no-repeat;
    text-align: center;
    padding-left: 20px; /* slightly longer than your icon */
}

アイコンを適用するために jquery を使用する必要はありません。CSS がそれを行うからです。CSS の魔法が再び勝利を収めました。:-)

于 2012-10-19T14:50:39.070 に答える