Как я могу изменить стиль определенной строки на основе условия? Я могу использовать JSF EL в атрибуте класса rich: column style, но я должен писать для каждого столбца. Я хочу изменить всю строку.
Спасибо
Как я могу изменить стиль определенной строки на основе условия? Я могу использовать JSF EL в атрибуте класса rich: column style, но я должен писать для каждого столбца. Я хочу изменить всю строку.
Спасибо
Я делаю, как вы уже упоминали, и поместите стиль в столбец.
Однако вы всегда можете попробовать обернуть все ваши столбцы в <rich:columnGroup>
, который должен вывести <tr>
, и поместить на него свой условный стиль.
EDIT: (в ответ на комментарий): если графы заголовка в ваших столбцах разбиваются, вы также можете разделить их на группу столбцов. Должен работать - вам может даже не понадобиться группа столбцов в заголовке
Eg.
<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:column styleClass="#{someBean.isSomething ? 'styleIfTrue' : 'styleIfFalse' }">
Это мой код, есть флажок для каждой строки, если установлен флажок, строка подсвечивается:
<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 - это индекс каждой строки, вы должны установить ее как богатую: datatable:
rowKeyVar = "RowKey"
rowClasses = "# {myBean.is_validValue == false? (rowkey mod 2 == 0? 'order-table-even-row': 'order-table-odd-row'): 'found'}"
Я устанавливаю стиль класса Found, когда ma value == true.
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)
<script type="text/javascript">
function colorize() {
$$('td.expired').each(function(el) {
el.up().addClassName('expired');
});
}
Event.observe(window, 'load', function() {
colorize();
});
</script>
изменить:
это добавляет условный класс css с rendered:
<rich:column styleClass="expired" rendered="#{documento.expired}">
с циклом javascript я на каждом td с классом css expired $$('td.expired')
и добавьте тот же класс css в верхний node tr с el.up()
.
Event.observe(window, 'load', function() {});
это просто запускает функцию, когда DOM полностью загружена.
При использовании h: datatable создайте метод 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}"