9

このhttp://www.primefaces.org/showcase-labs/ui/selectManyCheckbox.jsf primefaces コンポーネントを使用して、動的な booleanCheckboxes 値を取得しています

<p:selectManyCheckbox value="#{bean.selectedMovies}"  
            layout="pageDirection">  
            <f:selectItems value="#{bean.movies}" />  
        </p:selectManyCheckbox>

下の画像に示すように、すべてのブール値チェックボックスに異なる色を適用する必要があります

id=1 の場合、色は赤になり、id=2 の場合、色はオレンジになります。

これらは映画の動的な値であることがわかっているため、backing Bean からこれらの動的なチェックボックスに background-color を設定するにはどうすればよいですか?

selectManyCheckbox にスタイルを適用しようとしましたが、selectManyCheckbox パネル全体に背景色として適用されます。

では、バッキング Bean から selectManyCheckbox 値に動的に色を設定するにはどうすればよいですか?

ここに画像の説明を入力

4

4 に答える 4

4

これは標準では不可能であり<p:selectManyCheckbox>、少なくともこの種のダイナミクスでは不可能です。静的な値の場合は、CSS3nth-child()セレクターを使用できます。に動的な値を使用すると<p:selectManyCheckbox>、基本的にレンダラーをオーバーライドするか (これは簡単な作業ではありません)、機能リクエストを投稿する必要があります (必要以上に時間がかかる場合があります)。

あなたの最善の策は、行ごとに単一をレンダリングする代わりに<ui:repeat>orを使用することです。これにより、チェックボックスごとに を指定できます。これには、プロパティの設定方法の技術的な変更のみが必要です。<h:dataTable><p:selectBooleanCheckbox>styleClassselectedMovies

これは具体的なキックオフの例です<h:dataTable>（注：<p:selectManyCheckbox>それ自体も を生成する<table>ため、レイアウト技術的にはそれほど違いはありません<ui:repeat>。テーブルが意味的に気になる場合はいつでも選択できます）：

<h:dataTable value="#{bean.movies}" var="movie" styleClass="ui-selectmanycheckbox ui-widget">
    <h:column>
        <p:selectBooleanCheckbox id="checkbox" converter="javax.faces.Boolean"
            value="#{bean.checkedMovieIds[movie.id]}" styleClass="#{movie.type}" />
    </h:column>
    <h:column>
        <p:outputLabel for="checkbox" value="#{movie.title}" />
    </h:column>
</h:dataTable>

<p:commandButton value="Submit" actionListener="#{bean.collectMovies}" action="#{bean.submit}" />

注:

  • は<h:dataTable styleClass>とまったく同じ CSS を使用する<p:selectManyCheckbox>ため、チェックボックス テーブルのルックアンドフィールはまったく同じです。
  • これは (実際にはconverter="javax.faces.Boolean"驚いたことに) 必須です。この問題は には存在しません。おそらく PF のバグですか?truefalseStringBoolean<h:selectBooleanCheckbox>
  • この特定のユース ケースで作成された は、通常は一意の自動割り当て DB 識別子を表す個々の「id」値ごとに個別のスタイル クラスを指定するのはばかげているように見えるため、styleClass="#{movie.type}"よりも理にかなっています。styleClass="#{movie.id}"必要に応じて、実際のコードでいつでも変更できます。
  • は、実際のメソッドactionListenerの前に を収集するジョブを実行します。もちろん、実際のメソッドでジョブを実行することもできますが、これはもはやそれほど明確に分離されていません。selectedMoviesactionaction

バッキング Bean は次のようになります (プロパティがあるcheckedMovieIdsと仮定します)。MovieLong id

private List<Movie> movies;
private Map<Long, Boolean> checkedMovieIds;
private List<Movie> selectedMovies;

@PostConstruct
public void init() {
    movies = populateItSomehow();
    checkedMovieIds = new HashMap<Long, Boolean>();
}

public void collectMovies(ActionEvent event) {
    selectedMovies = new ArrayList<Movie>();
    for (Movie movie : movies) {
        if (checkedMovieIds.get(movie.getId())) {
            selectedMovies.add(movie);
        }
    }
}

public void submit() {
    System.out.println(selectedMovies);
    // ...
}

// +getters (note: no setters necessary for all those three properties)

#{movie.type}が値action、comedy、fantasyおよびhorror(ちなみにこれは完全な型の候補です) を持つことができると仮定するとenum、次のように個々のチェックボックスをスタイルできます。

.action .ui-chkbox-box {
    background-color: red;
}

.comedy .ui-chkbox-box {
    background-color: orange;
}

.fantasy .ui-chkbox-box {
    background-color: green;
}

.horror .ui-chkbox-box {
    background-color: blue;
}
于 2012-09-17T13:36:42.183 に答える
4

純粋なCSS3で実行可能かもしれません

実際の要件に応じて。リンク先の例のように、最後のチェックボックスの同じhtml構造がデフォルトの構造であると仮定すると、以下はそれを達成するための純粋なcss3の方法である必要があります。

このメソッドは、色を特定のムービー/ID に具体的に結び付けないことに注意してください。常に最初のムービーを赤に、2 番目のムービーをオレンジに設定するなどです。また、実際的な制限もあります。それぞれが固有の色を持つ100 本の映画をリストする予定の場合、この方法は適していません。

しかし、小さなセット(最大 10 個?) をリストしている場合、または特定の小さなサンプリング後に色が繰り返されても構わない場合は、これが最良の選択になる可能性があります。

これは、次の両方を示すフィドルです

スモールセット

.ui-selectmanycheckbox tr:nth-of-type(1) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(2) .ui-state-default {
    background-color: orange;
}

.ui-selectmanycheckbox tr:nth-of-type(3) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(4) .ui-state-default {
    background-color: orange;
}

4色の繰り返し

.ui-selectmanycheckbox tr:nth-of-type(4n+1) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+2) .ui-state-default {
    background-color: orange;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+3) .ui-state-default {
    background-color: green;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+4) .ui-state-default {
    background-color: blue;
}
于 2012-09-23T18:04:53.183 に答える
0

私はこの解決策が少しハックであることを知っていますが、うまくいきます:)

Xhtml ファイル:

<p:selectManyCheckbox binding="#{requestScope.movieSelect}" layout="pageDirection">
    <f:selectItems value="#{bean.movies}" />
</p:selectManyCheckbox>

<script>
(function() {
    var selectName = '#{requestScope.movieSelect.clientId}';
    var kids = jQuery("input[id*="+selectName+"]");
    var index = 0;

    <ui:repeat value="#{bean.movies}" var="movie">
        jQuery(kids[index++]).parent().next().css('background-color', '#{movie.description}');
    </ui:repeat>
}());
</script>

バッキングビーン：

public class Bean {

    private List<SelectItem> movies = Arrays.asList(
            new SelectItem("Scarface", "Scarface", "green"),
            new SelectItem("Goodfellas", "Goodfellas", "red"),
            new SelectItem("Godfather", "Godfather", "blue"),
            new SelectItem("Carlito's Way", "Carlito's Way", "yellow"));

    public List<SelectItem> getMovies() {
        return movies;
    }
}

CSS ファイル:

.ui-chkbox-box {
    background-image : none;
}

ps : css ファイルは必要ないかもしれません。

于 2012-09-17T20:06:34.570 に答える
0

ブラウザのターゲットが何かわかりませんが、属性セレクターを使用しないのはなぜですか?

ui-selectmanycheckbox input[value=1] {
    color: red;
}

それは単なる一般的な考え方です...私はこれらのコントロールに精通していませんが、ドキュメントでは、これを機能させることができるはずだと思われます...

于 2012-09-17T20:29:00.737 に答える