javascript - p :dataTable livescroll overrides js function

Question

JSF-2.0、Mojarra 2.1.19、PrimeFaces 3.4.1

从我的prev可以看出。问题 我正在使用 p:dataTable 来显示某种状态/评论模块。并且有一个 JS/jQuery 函数可以编辑 dataTable 行的 CSS；

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 请求)并且表加载了更多行，但它加载了带有常规 CSS 的 p:inputText 组件。函数不能将 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();
});

现在，您应该以某种方式在您的支持 bean 中处理这个 AJAX 请求。我调查了一下，发现当发生滚动时，会发送名称为 yourDataTableId_scrolling 的特定参数，例如 myForm:myTable_scrolling，此参数的值为 是的。

将此添加到您页面的某处，最好放在顶部:

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

支持从页面中输入准确的客户 ID。您可以为此使用一些实用的 PrimeFaces 函数，例如 #{p:component('id')} 来获取客户端 ID。此事件将在 View 呈现之前针对每个请求(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添加此功能，也许很快就会添加。