Блог

Главная - Вопросы по программированию - В rich:DataTable цвет фона строки с данными исчезает

В rich:DataTable цвет фона строки с данными исчезает

#jquery #css #jsf #richfaces

#jquery #css #jsf #richfaces

Вопрос:

Я использовал jsf richfaces в своем проекте. Я должен выделить строку в richfaces datatable после того, как пользователь нажмет на конкретную строку.Я использовал jquery для выделения строки. Но цвет фона строки исчезает после того, как мы щелкаем по строке.Если я задал jQuery.noConflict(); цвет фона сохраняется, но страница не отображается, и тег действия не работает.Может ли кто-нибудь помочь мне решить эту проблему..

Значение столбца Datatable:

 <rich:dataTable value="#{myBean.list}" var="bean" >
<rich:column>
<a4j:commandLink value="#{bean.id}" render="info,tablepanel" action="#
{myBean.save(bean.id)}" onclick="changeBackground(this)" />
</rich:column>  
</rich:dataTable>

Jquery:

 <script>
function changeBackground(element){
/* jQuery.noConflict(); */
jQuery(element).parents('tr:first').addClass('backgroundRed');
 }
</script>

CSS:

 <style>
.backgroundRed {
color: #555658;
background-color: yellow;
cursor : pointer;
}
</style>

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

Комментарии:

1. Предоставить plunker?

2. что-то не так в jquery или datatable link? Заранее спасибо..

3. Если вы визуализируете пространство, в котором находится таблица ( tablepanel не так ли?) при вызове ajax неудивительно, что фон отсутствует.

Ответ №1:

Вы можете сделать это с помощью следующего кода:

 <rich:dataTable value="#{myBean.list}" var="bean" >
     <rich:column>
         <a4j:commandLink value="#{bean.id}" render="info,tablepanel" action="#/>
     </rich:column>  
     <a4j:support event="onRowClick" oncomplete="highlightSingleRow(this)"/>
</rich:dataTable>

Javascript:

 jQuery.noConflict();
function highlightSingleRow(col) {
    jQuery(col).parent().parent().find('tr').removeClass('highlight-row');
    jQuery(col).parent().addClass('highlight-row');
}

CSS:

 .highlight-row {
    background-color: yellow;
    cursor : pointer;
}