2

CSS を使用してスタイルを設定する必要がある tr:table があります。テーブルの通常のスタイル機能はすべて機能していますが、行バンディングと行選択は機能していません。レンダリングされたソースを表示すると、取得する ID またはクラスの行に違いは見られません。また、公式ドキュメントには、いずれかのスタイル クラスを宣言するための属性がありません。これは可能ですか?もしそうなら、CSSを取得するために何をする必要がありますか?

<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
</tr:table>

編集

何が起こっているのかを明らかにしてみましょう。

まず、上記の宣言を使用して jsf にテーブルを生成するように指示し、属性 rowBandingInterval によって各行に交互の色を与えるように指示します (2 に設定されている場合、2 行で 1 つの色、2 行で別の色、2 行で元の色を実行します)。など）

ページが標準の html にレンダリングされると、トリニダード (および jsf) は独自のクラスと ID を html に適用します。私の通常の手順は、レンダリングされた html を見て、それが適用されているクラスを見つけ、それに CSS ルールを追加することです。ただし、この場合、追加のスタイルは追加されません (レンダリングされた html には、ある行が別の行と異なることを示すものは何もありません)。

問題は、トリニダードに交互の行とユーザーが選択した行の異なるクラス/ID を CSS で取得するように指示するにはどうすればよいかということです。

編集 2

注意を払っている人を投稿し続けるために、実際のtd要素にも変更はありません

編集 3

すべての属性を切り替えてから、すべてのコードを必要最低限​​の骨まで取り除いた後、行バンディング属性を見つけました。トリニダードのクラスはかなり複雑で、コードを再フォーマットしてすべてのノイズを取り除かない限り、それを見ることはできません。Trinidad は.af_column_cell-text-band、バンド付きの行にクラスを追加しますが、通常の行には.af_column_cell-text. これで問題の半分は解決しました。ユーザーが選択した行のセレクターを知る必要があります。そのため、答えを教えてくれる人なら誰でも喜んですべてのビー玉を渡します。

4

5 に答える 5

3

ここにある行の強調表示を行うための素敵でシンプルなjqueryコードがあります。

jQueryは次のとおりです

<script type="text/javascript">
  $(document).ready(function(){
    $(".stripeMe tr")
      .mouseover(function() { $(this).addClass("over");})
      .mouseout(function() { $(this).removeClass("over");
      });
    $(".stripeMe tr:even").addClass("alt");
  });
</script>

それから少しcss

tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }

ところで、デモを表示できる次のサイトからすべてのコードを取得しました。

于 2010-06-17T20:46:40.907 に答える
2

これはあなたの質問に直接答えているわけではありませんが、CSS3 疑似クラス nth-child を使用してこの効果を達成してみませんか? 例えば ​​：

tr:nth-child(2n)
{
background-color:red;
}
于 2010-06-12T21:08:52.490 に答える
1

登録プロセス中に何か問題があったため、これはコメントではなく新しい回答です。

trinidad-skinning トピックに対処するには、次のことを行う必要があります。

web.xml で、開発中にこのパラメーターを true に設定する必要があります。

<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>

あなたのFirefox用のfirebugを入手してください。そのアドオンを使用すると、コンポーネントで使用されている trinidad-selector を判別できます。

ユーザーが選択した行のセレクターはありません。私はこのようにしました: オブジェクトに「ハイライト プロパティ」のようなものを与えます。それが選択されている場合は変更します。

<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>

テーブルのすべての列に対してこれを行うと、完了です。

于 2010-10-06T07:33:01.847 に答える
0

トリニダードのドキュメントを参照します。 http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.html 彼らの例では、バンディングを行として宣言してbanding="row"います。何も得られない理由は、行であるかどうかを宣言していないためだと思いますまたは列バンディング。

于 2010-06-14T16:25:12.517 に答える
0

これらのセレクターを trinidadskin.css ファイル (私の場合は smSkin.css) に入れます。}

.AFTableCellDataBandedBackgroundColor:alias { 背景色: #FFFFFF; }

trinidad-skins.xml の構成 

<skin>
    <id>
        sm.desktop
    </id>
    <family>
        sm
    </family>
    <render-kit-id>
        org.apache.myfaces.trinidad.desktop
    </render-kit-id>
    <style-sheet-name>
        skins/sm/smSkin.css
    </style-sheet-name>
</skin>

于 2010-10-05T08:41:06.670 に答える