P : 데이터 테이블 livescroll 재 JS 기능

Question

JSF-2.0 인 Mojarra 2.1.19, PrimeFaces 내 이전에서 볼 수 있듯이 3.4.1

. 질문 p:dataTable을 사용하여 종류의 상태/의견 모듈을 표시 할 수 있습니다. 그리고 dataTable 행의 CSS를 편집하는 JS/jQuery 함수가 있습니다.

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과 정기적으로 하나이며, 그것을 하나 위의 함수에 의해 수정 된 CSS가있는 경우에만 p:inputText을 가지고 가정합니다.

p:dataTable에 행이 많은 경우에 문제가 발생합니다. 사용자가 아래로 스크롤하면 테이블의 live scroll 이벤트가 발생하고 (아약스 요청) 테이블이 더 많은 행을로드하지만 일반 CSS로 p:inputText 개의 구성 요소를로드합니다. 함수는 recnlty로드 된 행에 CSS를 적용 할 수 없습니다.

그래서 p:dataTable

Answer 1

가의 각 업데이트에서 일하고 JS 함수에 그 liveScroll 이벤트 또는 영장을 잡을 필요가있다없이 내장 된 자신에 당신이 그것을 수행해야합니다 있도록이 상황을 처리 할 수있는 AJAX 이벤트 . 나는 너에게 몇 가지 제안을하려고 노력할 것이다.

먼저 이것에 대한 기능을 만드는 자바 스크립트를 재구성 및로드 페이지에서 해당 함수를 호출

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> 

하는 페이지에서 정확한 클라이언트 ID를 넣어 해안합니다. 이를 위해 일부 유틸리티 PrimeFaces 함수를 사용할 수 있습니다 (예 : #{p:component('id')}). 클라이언트 ID를 얻을 수 있습니다. 이 이벤트는 뷰 렌더링 전에 모든 요청 (AJAX 또는 AJAX가 아닌)에 대해 onPageLoad() 함수를 호출합니다. 그 함수에서 당신은 당신의 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을 만들었으며 곧 추가 될 것입니다.