13

jqgrid 内の列に独自のクラスを追加するにはどうすればよいですか。ご覧のとおり、html 入力要素はクラス「FormElement」を取得しています。特定の列にクラスを追加する必要があります。http://www.trirand.com/blog/?page_id=393/help/cell-tooltip-1/#p21526を見つけましたが、これが最も便利な方法であるかどうかはわかりません。すべての行とセルを調べてから、クラス プロパティを手動で変更することを意味します。このような「単純な」タスクのオーバーヘッドのようです。

アップデート

この複数選択ウィジェットhttp://quasipartikel.at/multiselect/の機能を使用したいので、クラスを追加したいと思います。このウィジェットは、定義されたクラスを通じて機能します。それが理由です。

4

2 に答える 2

23

おそらく、対応する列にclassesプロパティを使用する必要があります。

formFormElementに存在するクラスについて書いたので、それが必要なものかどうかわかりません。たとえば、編集フォームの対応するフィールドの入力フィールドにクラスを追加するために、フォーム編集のbeforeShowFormコールバックを使用する必要がある場合。フォーム内のフィールドの ID は、 の対応する列のプロパティと同じです。namecolModel

本当に 1 つの列のセルにクラス属性を追加する必要がある場合は、もう 1 つの可能性があります:cellattrの列のコールバックを定義しますcolModel。列のすべてのセルではなくクラスを追加する必要がある場合、この方法は実用的です。行の内容に基づいていくつかの条件をテストし、条件が発生した場合にのみクラスを設定できます。たとえば、 を使用すると、列のすべてのセルにclasses:'ui-state-error-text ui-state-error'対応する 2 つのクラス (ui-state-error-textおよびui-state-error)が設定されます。反対側のコールバック関数

cellattr: function(rowId, val, rawObject) {
    if (parseFloat(val) > 200) {
        return " class='ui-state-error-text ui-state-error'";
    }
}

セルの値が 200 よりも大きい場合にのみ、クラスを設定できますrawObject。上記のコールバックでは使用していないため、オプションのパラメーターを削除できます。パラメータを使用して行の別の列の値にアクセスできることを思い出させるために、コールバックに追加しました。そのため、さらに複雑なシナリオを で実装できますcellattr。

結果として、次の図のようなグリッドを取得できます。

ここに画像の説明を入力

更新class:編集フォームの入力フィールドに追加する必要がある場合は、さらにeditoptionsdataInitのコールバックを使用できます。その場合、使い方は非常に簡単です。たとえば、次のことができます。

editoptions: {
    dataInit: function (domElem) {
        $(domElem).addClass("ui-state-highlight");
    }
}

結果として、次のような編集フォームが得られます

ここに画像の説明を入力

ここで見つけることができるデモ。

于 2012-08-29T14:56:39.893 に答える
8

必要なことだけを行うclassescolmodel オプションがあります。jqGridのドキュメントから：

クラス

ストリング

このオプションを使用すると、列にクラスを追加できます。複数のクラスを使用する場合は、スペースを設定する必要があります。例classes:'class1 class2'では、その列のすべてのセルに class1 と class2 を設定します。

グリッド css には、特定の行に省略記号を付けることができる事前定義されたクラス ui-ellipsis があります。また、これは FireFox でも機能します。

于 2012-08-29T14:56:13.543 に答える