Question

JSF-2.0，Mojarra 2.1.19，PrimeFaces 3.4.1

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

jQuery(document).ready(function() {
    var rowSize = '#{statusBean.size}';
    for (var i = 0; i &lt; 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 &lt; 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，此参数的值为true。

在页面的某个位置添加此内容，最好位于顶部：

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

支持从页面输入确切的客户端ID。您可以使用一些实用程序PrimeFaces函数，例如#{p:component('id')}来获取客户端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来添加此功能，也许很快就会添加它。

p：dataTable livescroll覆盖js函数

1 个答案: