<rich:datatable> 和 <rich:datascroller> 问题答案

【问题标题】：<rich:datatable> and <rich:datascroller> problem<rich:datatable> 和 <rich:datascroller> 问题
【发布时间】：2011-02-24 13:19:32
【问题描述】：

我正在开发一个 Seam-Jsfv1.2-EJB3 网络应用程序。我在每一行都有一个数据表和复选框。此外，我的表格底部还有一个数据滚动条。

我的问题是，当我从滚动条单击下一页编号时，数据表第一页上的选中复选框消失了。我的意思是，即使它们被选中，单击下一页也会使它们被取消选中。我通过单击滚动条再次返回第一页来查看它。

您对这个问题有任何想法吗？为了澄清我的情况，我在下面附上了我的代码：

<rich:dataTable
            id="apiV2ProductList" rows="10" var="_apiV2Product"
            value="#{apiV2ProductList.resultList}"
            rendered="#{not empty apiV2ProductList.resultList}" reRender="ds">
            <rich:column>
                <f:facet name="header"> 
                    <h:selectBooleanCheckbox id="selectionCheckAll" onclick="selectAll()" /> 
                </f:facet>
                <h:selectBooleanCheckbox id="selectionCheck" onclick="increase(this)" value="#{_apiV2Product.selectValue}" >  
                </h:selectBooleanCheckbox>
            </rich:column>

...

<f:facet name="footer">
                <rich:datascroller id="ds" renderIfSinglePage="false">
                </rich:datascroller>
            </f:facet>

提前非常感谢。巴里斯

【问题讨论】：

标签： jsf datatable richfaces datascroller

【解决方案1】：

在滚动条之间添加 a4j 支持标签解决了我的问题：

<f:facet name="footer">
  <rich:datascroller id="ds" renderIfSinglePage="false">
   <a4j:support event="onpagechange"/> 
  </rich:datascroller>
</f:facet>

但另一件事是，我正在使用 JQuery 来设置表格的样式（例如鼠标悬停），而这一次，当我单击表格的下一页时，样式消失了。

任何帮助都会很棒，非常感谢。

** PS：顺便说一句，在我看来，最奇怪的是我自己无法为这类问题找到解决方案。您的创作可能并不总是足以解决（至少在我的示例中，添加 a4j:support 的东西）我在问专家，我们如何自己处理这种事情...... **

【讨论】：

谢谢，你的回答为我节省了很多时间

【解决方案2】：

您在删除样式时看到的问题是由于 AJAX 的性质以及重新渲染表格的方式造成的。

假设您是根据某种形式的页面 onLoad 触发初始样式调用，那么第一次呈现页面时，您的样式将被应用。但是，当您使用分页器单击“下一步”按钮时，您将拉下许多新的 HTML，并用更新的更新信息替换表中的旧 HTML。您看到的问题是您看到了样式，因为 jQuery 将样式应用于 old 节点，在重新渲染时，这些节点连同它们的样式一起被完全丢弃。您只需要找出调用“样式”方法的钩子，并在重新渲染表格后重新执行该调用。

一般情况下，我使用 a4j:status 标签，并设置 onstart 或 onstop 来重新解析表格。

【讨论】：

【解决方案3】：

您可以扩展org.richfaces.renderkit.html.DatascrollerTemplate 通过在 faces-config.xml 中添加具有以下配置的组件，为自己的样式编写自己的 DataScroller

<component>
    <component-type>exCustHtmlDatascroller</component-type>
    <component-lass>org.jsf.common.ui.EXCustHtmlDatascroller</component-class>
</component>
<render-kit>
  <renderer>
      <component-family>org.richfaces.Datascroller</component-family>
      <renderer-type>exCustDataScrollerTemplate</renderer-type>
      <renderer- class>org.jsf.common.ui.EXCustDataScrollerTemplate</renderer-class>
  </renderer>
</render-kit>

【讨论】：

【解决方案4】：

你不需要 jQuery 来设置数据表的样式

<rich:dataTable id="dataTable" var="x"  
onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"

【讨论】：

是的，它也是正确的。感谢您提供另一种样式。