Как сделать кликабельную строку в rich: datatable? - PullRequest
Новая
       8

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

1 голос
/ 08 декабря 2011

У меня есть страница JSF с rich:dataTable, где в каждой строке я помещаю h:commandLink s, чтобы привести к страницам с подробной информацией о выбранной строке.

Я хотел сделать всю строку кликабельной, вызывая метод действия, когда пользователь щелкает мышью в любом месте строки.

Это возможно без JavaScript? И если JavaScript является единственным выходом, что будет лучшим способом сделать это? Ищите коммандлинк и «кликаете» на него?

Заранее спасибо!

Ответы [ 5 ]

2 голосов
/ 08 декабря 2011

Я получил целые строки кликабельными с небольшим стилем. Я заставил ссылки внутри ячеек занимать всю ячейку с 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 s или старого доброго <a> HTML ссылки - довольно приемлемый компромисс, я бы сказал. :)

1 голос
/ 12 февраля 2013

Основная проблема заключается в том, что JSF (ядро) привязано к элементу 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 и других компонентов, чтобы выполнить рендеринг, как описано выше, но это, вероятно, ответ ultimate .Я не являюсь поклонником JSF после борьбы с ним в нескольких проектах сейчас (по сравнению с облегченными комбинациями концепций из базового HTML / CSS, небольшим количеством JavaScript, чистыми Java / Servlets и т. Д.).

0 голосов
/ 17 августа 2016

Для новой версии RichFaces 4.x вы можете использовать a4j:commandLink this вместо этого и сделать полную строку выбираемой в 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;
}
0 голосов
/ 09 декабря 2011

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

-проверок:)

0 голосов
/ 08 декабря 2011

в ваших данных используйте это: 

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

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

ссылка: Richfaces Forum

...