Как условно оформить строку в rich: dataTable - PullRequest
Новая
       15

Как условно оформить строку в rich: dataTable

21 голосов
/ 08 июня 2009

Как я могу изменить стиль определенной строки на основе условия? Я могу использовать JSF EL в атрибуте класса rich: column, но я должен написать для каждого столбца. Я хочу изменить всю строку.

Спасибо

Ответы [ 7 ]

30 голосов
/ 09 сентября 2009

Специально для каждого столбца: 

<rich:column styleClass="#{someBean.isSomething ? 'styleIfTrue' : 'styleIfFalse' }">
5 голосов
/ 09 июня 2009

Я делаю, как вы уже упоминали, и добавляю стиль в колонку.

Однако вы всегда можете попробовать обернуть все свои столбцы в <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>
3 голосов
/ 08 августа 2012

Это мой код, в каждой строке есть флажок, если флажок установлен, строка подсвечивается: 

<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
    }
2 голосов
/ 15 января 2014

Использовать rowClasses ... Вы можете установить хороший стиль зебры, например, и установить определенный цвет, когда ваше значение установлено на то, что вы хотите:

Вот пример, где мое значение является логическим. (rowkey - это индекс каждой строки, вы должны установить его следующим образом: rich: datatable:

rowKeyVar = "RowKey"

rowClasses = "# {myBean.is_validValue == false? (Мод rowkey 2 == 0? 'order-table-even-row': 'order-table-odd-row'): 'found'} "

Я установил стиль найденного класса, когда значение ma == true.

CSS: 

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

.order-table-odd-row
{
background-color: #ECF3FE;
}
0 голосов
/ 20 ноября 2010

При использовании 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 голосов
/ 15 июня 2009

Я сделал гибридное решение с 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 (с Prototype, который включен в 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') и добавляю тот же класс css к верхнему узлу tr с помощью el.up(). 

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

это просто запускает функцию, когда DOM полностью загружен.

0 голосов
/ 08 июня 2009

Вы можете использовать dataTables columnClasses и rowClasses свойства.

Таким образом, вы можете получить результат, который показан здесь

...