Как сделать интерактивную строку в rich: datatable?

Ответ 1

Я получил целые строки, которые можно было бы щелкнуть с помощью немного стилизации. Я сделал ссылки внутри ячеек, занимая всю ячейку с display: block; для ссылок и padding:0 для ячейки.

Итак, вот что вам нужно сделать. На странице JSF настройте rowClasses и ссылки в каждой ячейке:

<rich:dataTable value="#{myMB.listaElems}" var="elem" rowClasses="clickable">
    <rich:column>
        <h:commandLink action="#{myMB.preUpdate(elem)}" value="#{elem.item1}" />
    </rich:column>
    <rich:column>
        <h:commandLink action="#{myMB.preUpdate(elem)}" value="#{elem.item2}" />
    </rich:column>
</rich:datatable>

И в листе CSS:

tr.clickable td {
    padding: 0;
}
tr.clickable td a {
    display: block;
    padding: 4px;
}

И что это!

Единственным недостатком является то, что вам нужно повторить ссылку в каждой ячейке, но поток HTTP остается простым, вам не нужно менять какой-либо компонент, и он будет работать для h:link или старого старого <a> html ссылки - довольно приемлемый компромисс, я бы сказал.:)

Ответ 2

Основная проблема заключается в том, что JSF (core) привязан к элементу HTML table для рендеринга результата запроса через компонент dataTable. Поскольку JSF dataTable отображается как HTML table, результат ограничивается тем, что можно управлять в столбцах (без контроля строки, который я видел). Способ HTML/CSS для этого довольно изящный, но для этого в JSF я считаю, что рендеринг UIComponent для dataTable должен быть переопределен для вывода этого:

<div class="table">
    <a href="#" class="row">
        <span class="cell">Column-1-Value</span>
        <span class="cell">Column-2-Value</span>
    </a>
    ...
</div>

С стилями CSS table row и cell, представляющими display:table, display:table-row и display:table-cell; соответственно. Это делает строку полностью кликабельной, но она ведет себя как правильная таблица. Я не приступил к повторной записи JSF-рендеринга и решению JSF commandLink и других проблем с компонентами для выполнения рендеринга, как указано выше, но это, вероятно, окончательный ответ. Я не являюсь поклонником JSF после борьбы с ним по нескольким проектам сейчас (по сравнению с более легкими комбинациями веса концепций из базового HTML/CSS, разбрызгиванием JavaScript, чистой Java/Servlets и т.д.).

Ответ 3

в вашем используемом datatable используйте это:

<a4j:jsFunction name="selectRow" action="#{userBean.myListener" ...>
  <a4j:param name="currentRow" assignTo="#{userBean.selectedRowId}"/>
</a4j:jsFunction>

его вызывается при выборе строки, и вы можете делать все, что хотите, и передавать выбранную строку с помощью <a4j:param... в качестве опции вы также можете вызвать yourLink.click() или что-то подобное, но это не проблема, чтобы узнать...

ссылка: Форум Richfaces

Ответ 4

Вы можете попробовать rich:scrollableDataTable. он имеет атрибут onRowClick, который вы можете указать как атрибут event в a4j:support / a4j:ajax, вложенный внутри вашей таблицы. Это сделает вашу строку доступной.

-cheers:)

Ответ 5

Для нового RichFaces 4.x вместо этого вы можете использовать a4j:commandLink и сделать полную строку, выбираемую в CSS. Обратите внимание, что 'rowClasses="clickable"' относится к классу CSS для выбора всей строки:

<rich:column id="fileName" sortable="false" width="618px">
  <a4j:commandLink action="#{controller.setSelectedFile(file)}"
    oncomplete="window.open('#{menuBar.PrintPage}?outputType=pdf', '_blank');"
    rendered="#{not controller.getButtonDisabled(file)}"
    execute="@this" limitRender="true">
  <h:outputText value="${file}" 
    style="text-align:left;width:100%;min-width:400px;"
    title="${file.name} is viewable.">
      <f:converter converterId="MVC.View.Converter_FilePath" />
  </h:outputText>
 </a4j:commandLink>
</rich:column>

Используйте этот класс CSS для выбора всей строки:

tr.clickable td {
    padding: 0;
}

tr.clickable td a {
    display: block;
    padding: 4px;
}