如何根据条件更改特定行的样式?我可以在rich:column 样式类属性中使用JSF EL,但我必须为每一列编写。我想改变整行。
谢谢
专门针对每一列:
<rich:column styleClass="#{someBean.isSomething ? 'styleIfTrue' : 'styleIfFalse' }">
我按照您已经提到的那样做,并将样式放在列上。
但是,您始终可以尝试将所有列包装在 a<rich:columnGroup>
中,该列应该输出 a<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>
这是我的代码,每行都有一个复选框,如果选中了一个复选框,则该行突出显示:
<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
}
使用rowClasses ...例如,您可以设置一个漂亮的斑马样式,并在您的值设置为您想要的值时设置特定的颜色:
这是我的值是布尔值的示例。(rowkey 是每一行的索引,你必须在 rich:datatable 中设置它:
rowKeyVar="行键"
rowClasses="#{myBean.is_validValue == false ? (rowkey mod 2 == 0 ? 'order-table-even-row' : 'order-table-odd-row') : 'found'}"
当 ma value == true 时,我设置了 Found 类样式。
CSS:
.found
{
background-color: #FACC2E;
}
.order-table-even-row
{
background-color: #FCFFFE;
}
.order-table-odd-row
{
background-color: #ECF3FE;
}
您可以使用 dataTables columnClasses 和 rowClasses 属性。
这样你就可以产生这里显示的结果
我用 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 中包含的 Prototype)
<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 上循环,$$('td.expired')
并将相同的 css 类添加到上层节点 tr 和el.up()
.
Event.observe(window, 'load', function() {});
这只是在 DOM 完全加载时运行该函数。
使用 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}"