如何在富文件中有条件地设置样式：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; 
}