web-dev-qa-db-ja.com

rich：dataTableの行に条件付きでスタイルを設定する方法

条件に基づいて特定の行のスタイルを変更するにはどうすればよいですか？ JSF ELをrich：columnスタイルのクラス属性で使用できますが、列ごとに記述する必要があります。行全体を変更したい。

ありがとう

jsfseamrichfaces
21
Luca Molteni

私はあなたがすでに述べたようにして、スタイルをコラムに載せます。

ただし、常にすべての列を<rich:columnGroup>でラップして<tr>を出力し、それに条件付きスタイルを配置することもできます。

編集：（コメントへの応答として）：列のヘッダーファセットが壊れている場合は、それらを列グループに分離することもできます。うまくいくはずです-ヘッダーに列グループさえ必要ないかもしれませんか？

例えば。

<rich:dataTable>
  <f:facet name="header">
    <rich:columnGroup>
      <rich:column>Header 1</rich:column>
      <rich:column>Header 1</rich:column>
    </rich:columnGroup>
  </f:facet>
  <rich:columnGroup>
    <rich:column>Data</rich:column>
    <rich:column>Data</rich:column>
  </rich:columnGroup>
</rich:dataTable>
5
Damo

具体的には、各列について：

<rich:column styleClass="#{someBean.isSomething ? 'styleIfTrue' : 'styleIfFalse' }">
30
Gene

これは私のコードです、各行にチェックボックスがあり、チェックボックスが選択されている場合、行が強調表示されます：

<rich:dataTable value="#{manageOutstandingApprovals.approvalsResults}" var="approvals" styleClass="wp100 mtb20"  sortMode="single" id="approvalsTable"  
            enableContextMenu="false" selectionMode="none" reRender="actions" rows="10">

        <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.documentType}" sortOrder="#{manageOutstandingApprovals.documentTypeSort}">
          <f:facet name="header">
            <h:outputText value="#{messages['outstandingApprovals.documentType']}"/>
          </f:facet>
          <h:outputText  value="#{messages[approvals.documentType]}" id="col1"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.documentID}" sortOrder="#{manageOutstandingApprovals.documentIDSort}">
          <f:facet name="header">
            <h:outputText value="#{messages['outstandingApprovals.documentID']}"/>
          </f:facet>
          <h:outputText value="#{approvals.documentID}" id="col2"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="10%" sortBy="#{approvals.dateSubmitted}" sortOrder="#{manageOutstandingApprovals.dateSubmittedSort}">
          <f:facet name="header">
            <h:outputText value="#{messages['outstandingApprovals.dateSubmitted']}"/>
          </f:facet>
          <h:outputText value="#{approvals.dateSubmitted}" id="col3"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="15%" sortBy="#{approvals.submittedBy}" sortOrder="#{manageOutstandingApprovals.submittedBySort}">
          <f:facet name="header">
            <h:outputText value="#{messages['outstandingApprovals.submittedBy']}"/>
          </f:facet>
          <h:outputText value="#{approvals.submittedBy}"  id="col4"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="20%" sortBy="#{approvals.orgName}" sortOrder="#{manageOutstandingApprovals.organizationSort}">
          <f:facet name="header">
            <h:outputText value="#{messages['outstandingApprovals.userOrg']}"/>
          </f:facet>
          <h:outputText value="#{approvals.orgName}"  id="col5"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.value}" sortOrder="#{manageOutstandingApprovals.valueSort}">
          <f:facet name="header">
            <h:outputText value="#{messages['outstandingApprovals.value']}"/>
          </f:facet>
          <h:outputText value="#{approvals.value}"  id="col6"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="20%" sortBy="#{approvals.approverUserName}" sortOrder="#{manageOutstandingApprovals.approverSort}">
          <f:facet name="header">
            <h:outputText value="#{messages['outstandingApprovals.approver']}"/>
          </f:facet>
          <h:outputText value="#{approvals.approverUserName}" id="col7"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="15%" sortBy="#{approvals.dateAssigned}" sortOrder="#{manageOutstandingApprovals.assignedSort}">
          <f:facet name="header">
            <h:outputText value="#{messages['outstandingApprovals.assigned']}"/>
          </f:facet>
          <h:outputText value="#{approvals.dateAssigned}"  id="col8"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}" width="5%" sortBy="#{approvals.dateOutstanding}"  sortOrder="#{manageOutstandingApprovals.numOutstandingSort}">
          <f:facet name="header">
            <h:outputText value="#{messages['outstandingApprovals.daysOutstanding']}"/>
          </f:facet>
          <h:outputText value="#{approvals.dateOutstanding}"  id="col9"/>
        </rich:column>

        <rich:column styleClass="#{approvals.rowcolor}">
          <f:facet name="header">
            <h:outputText value="#{messages['outstandingApprovals.selectButton']}" title="#{messages['outstandingApprovals.selectButtonTitle']}"/>
          </f:facet>
          <h:selectBooleanCheckbox class="chkbx" value="#{approvals.selected}" id="selectBox" title="#{messages['outstandingApprovals.selectButtonTitle']}">
            <a:support event="onclick" ajaxSingle="true" reRender="approvalsTable" /> 
          </h:selectBooleanCheckbox>
        </rich:column>
      </rich:dataTable>

私のバッキングビーンでは：

public String getRowcolor() {
    if (selected) // selected is a variable whose value is from the checkBox  
        return "row-highlight-color"; // css id
    else
        return "row-white-color"; // css id
    }
3
Hong Lily Ju

使用rowClasses ...たとえば、ニースゼブラスタイルを設定し、値が希望どおりに設定されている場合は特定の色を設定できます。

ここに私の値がブール値である例を示します。 （rowkeyは各行のインデックスです。rich：datatableで次のように設定する必要があります：

rowKeyVar = "rowkey"

rowClasses = "＃{myBean.is_validValue == false？（rowkey mod 2 == 0？ 'order-table-even-row'： 'order-table-odd-row'）： 'found'}"

Ma value == trueの場合、Found classスタイルを設定しました。

CSS：

.found
{
background-color: #FACC2E;
}   
.order-table-even-row
{
background-color: #FCFFFE;
}

.order-table-odd-row
{
background-color: #ECF3FE;
}
2
ZheFrench

DataTables columnClassesおよびrowClassesプロパティを使用できます。

そうすれば、表示される結果を生成できます here

0
Chris Dale

H：datatableを使用する場合、Beanメソッドを作成し、これを呼び出してスタイルを決定します。おそらくこれは、rich：datatableに対しても実行できますか？


    public String getStyleSelectedOrderRows() {
        StringBuilder sb = new StringBuilder();
        String[] oddEven = new String[]{"oddRow,", "evenRow,"};
        int i = 0;
        for (MyObject object: myObjectList) {
            sb.append(object.isSelected() ? "selected," : oddEven[i++ % 2]);
        }
        return sb.toString();
    }

そして.xhtml：


<h:dataTable rowClasses="#{bean.styleSelectedOrderRows}"
0
Rose

Javascriptを使用してハイブリッドソリューションを実行しました。

_<rich:column styleClass="expired" rendered="#{documento.expired}">
<f:facet name="header">
Da evadere entro
</f:facet>                  
<h:outputText value="#{documento.timeAgoInWords}" />
</rich:column>
_

そしてJavascriptで（Richfacesに含まれているプロトタイプで）

_<script type="text/javascript">   
  function colorize() {    
    $$('td.expired').each(function(el) {
      el.up().addClassName('expired');      
    });
  }

  Event.observe(window, 'load', function() {
    colorize();
  });
</script>
_

編集：

これはレンダリングされた条件付きCSSクラスを追加します：

_<rich:column styleClass="expired" rendered="#{documento.expired}">
_

javascriptを使用して、cssクラスが期限切れの$$('td.expired')を使用してすべてのtdでループし、el.up()を使用して同じcssクラスを上位ノードtrに追加します。

_Event.observe(window, 'load', function() {});
_

これは、DOMが完全に読み込まれたときに関数を実行するだけです。

0
Luke