р: DataTable livescroll переопределяет Js функция

Question

JSF-2,0, Mojarra 2.1.19, PrimeFaces 3.4.1

Как видно из моего пред. вопросы Я использую p:dataTable, чтобы иметь возможность отображать вид модуля статуса/комментария. И есть функция JS/jQuery, которая редактирует CSS строк dataTable;

jQuery(document).ready(function() { 
    var rowSize = '#{statusBean.size}'; 
    for (var i = 0; i < rowSize; i++) { 
     var rowIndex = i; 
     var inputTextStr = 'dataTableForm' + ':dataTable:' + rowIndex + ':commentInput'; 
     var inputText = $(document.getElementById(inputTextStr)); 
     inputText.css({'box-shadow':'0 0 5px #EB2F28'}); 
    } 
}); 

И p:dataTable регулярно один с liveScrolling=true и предположим, что имеет один и только p:inputText, который имеет измененную CSS с помощью функции выше.

Неисправность возникает, когда p:dataTable имеет количество рядов. Предполагая, что пользователь прокручивает вниз, live scroll событие таблицы запускается (ajax-запрос), а таблица загружает больше строк, но загружает компоненты p:inputText с обычным CSS. Функция не может применять css в перезаписываемые строки.

Поэтому есть нужно поймать, что liveScroll события или ордер функции JS для работы при каждом обновлении p:dataTable

Answer 1

Существует нет встроенного AJAX события, которое может справиться с этой ситуацией, так что вы должны сделать это самостоятельно , Я постараюсь дать вам несколько советов.

Первый реорганизовать JavaScript с функцией создания для этого и вызвать эту функцию при загрузке страницы:

function applyMyCSS() { 
    var rowSize = '#{statusBean.size}'; 
    for (var i = 0; i < rowSize; i++) { 
     var rowIndex = i; 
     var inputTextStr = 'dataTableForm' + ':dataTable:' + rowIndex + ':commentInput'; 
     var inputText = $(document.getElementById(inputTextStr)); 
     inputText.css({'box-shadow':'0 0 5px #EB2F28'}); 
    } 
} 

jQuery(document).ready(function() { 
    applyMyCSS(); 
}); 

Теперь, вы должны как-то справиться с этим запрос AJAX в вашем бэк-боба. Я немного расследовал и выяснил, что при прокрутке происходит передача определенного параметра, имя которого равно yourDataTableId_scrolling, например myForm:myTable_scrolling, а значение этого параметра - true.

Добавить это где-то на странице, лучше всего где-то на вершине:

<f:metadata> 
    <f:event type="preRenderView" listener="#{myBean.onPageLoad('clientIdOfComponent')}"/> 
</f:metadata> 

Be берег поставить точный идентификатор клиента со страницы. Вы можете использовать некоторые функции PrimeFaces для этого, например #{p:component('id')}, чтобы получить идентификатор клиента. Это событие вызовет вашу функцию onPageLoad() перед визуализацией рендеринга и для каждого запроса (AJAX или не AJAX). В этой функции вы будете фильтровать liveScroll события и обработать его:

public void onPageLoad(String datatableId) { 
    FacesContext fc = FacesContext.getCurrentInstance(); 
    if (RequestContext.getCurrentInstance().isAjaxRequest() && 
      "true".equals(fc.getExternalContext().getRequestParameterMap().get(datatableId + "_scrolling")) { 

    RequestContext.getCurrentInstance().execute("applyMyCSS()"); 
    } 
} 

Обратите внимание, что это не задокументированное поведение и может быть изменено в будущих версиях (но я не ожидал). Я также создал an issue для добавления этой функции, и, возможно, она будет добавлена ​​в ближайшее время.