web-dev-qa-db-ja.com

列へのCSSクラスの追加

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

[〜＃〜]更新[〜＃〜]

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

jqgrid
13
Anatoliy

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

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

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

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

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

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

enter image description here

[〜＃〜]更新[〜＃〜]：編集フォームの入力フィールドにclassを追加する必要がある場合さらに、 editoptions のdataInitコールバックを使用できます。使い方はとても簡単です。たとえば、次のことができます。

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

その結果、次のような編集フォームが表示されます。

enter image description here

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

23
Oleg

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

クラス

ストリング

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

グリッドcssには、特定の行に省略記号をアタッチできる定義済みのクラスui-Ellipsisがあります。また、これはFireFoxでも機能します。

8
Justin Ethier