如何在富文件中有條件地設置樣式：dataTable

Question

如何根據條件更改特定行的樣式？我可以在rich：column style class屬性中使用JSF EL，但是我必須爲每列寫入。我想改變整個行。

謝謝

Answer 1

我一樣，你已經提到，把款式上欄的結果。

但是，您總是可以嘗試將所有列包含在應該輸出<tr>的<rich:columnGroup>中，並將條件樣式放在該列上。

編輯：（回覆評論）：如果您的列中的標題facets被破壞，那麼您可以將它們分成列組。應該工作 - 你甚至可能甚至不需要標題中的列組？

例如，

<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> 

Answer 2

您可以使用dataTables的columnClasses和rowClasses屬性。

這樣，你就可以生產其顯示here

Answer 3

我已經用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我循環每個td與css類過期$$('td.expired')並添加與上層節點tr相同的css類與el.up()。

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

這只是在DOM完全加載時運行該函數。

Answer 4

具體地爲每列：

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

Answer 5

當使用H：數據表，創建一個bean方法並調用它來確定的樣式。也許這也可以爲一個豐富的：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}"

Answer 6

這是我的代碼，對各行的複選框，如果選擇一個複選框，該行突出顯示：

<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> 

在我的支持bean：

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 
    } 

Answer 7

使用rowClasses ... 例如，您可以設置一個很好的斑馬風格，並設置一個特定的公司當你的價值被設置爲你想要的值時：l

這裏是一個例子，其中我的值是一個布爾值。 （rowkey是各行的索引，你必須把它設置爲這個豐富：數據表：

rowKeyVar = 「rowkey」

rowClasses =「＃{myBean.is_validValue ==假（rowkey模2 == 0 「訂單表偶數行」：「爲了表奇數行」）：「發現」}」

我集中找到類樣式上條當麻值==真。

CSS：

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

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