JSF dataTable 重新渲染失去 CSS 样式

Posted 2023-02-22

【中文标题】JSF dataTable 重新渲染失去 CSS 样式

【英文标题】：JSF dataTable rerender loses CSS style

【发布时间】：2011-06-18 19:01:34

【问题描述】：

我有一个数据表，当它通过正常（非 ajax）请求/响应周期呈现时，它可以按需要工作。

我定义了一种样式，即在表格的第一行应用背景颜色和填充：

.myTable tr:first-child td 
  padding-top: 25px;
  background-color: yellow;

正如我上面提到的，当通过典型的请求/响应加载时，填充和背景颜色会完美显示。但是，有一些操作可能会导致此表通过 AJAX 重新呈现。发生这种情况时，表格会正确重新加载（它是数据），但不会重新应用上述样式。

由于在使用 dataTable 组件时没有办法专门为第一行分配一个 CSS 类。所以，我使用上面的 CSS 选择器来获取第一行。以前有没有人处理过这样的问题？在 ALL 的 oncomplete 中尝试使用 jQuery 是我唯一的选择吗...可能有很多不同的地方...可以触发重新渲染表的操作？

我的问题是，为了速度，我试图避免使用richfaces 表格组件，我需要让表格可以滚动。因此，我使用浏览器特定的 CSS 解决方案来 srcoll 表格正文并保持标题静态。主要问题是我需要表格的第一行有一个顶部填充值，将其向下推到表格标题的固定位置下方。

【问题讨论】：

这听起来更像是浏览器特定的 CSS 问题。你用的是哪个浏览器？尝试至少在基于 MSIE、Gecko (Firefox) 和 Webkit (Chrome、Safari) 的浏览器上进行测试。

正在开发的应用程序是针对IE7的。

【参考方案1】：

由于您只重新呈现数据表，因此将应用表的默认样式。

您还必须与 dataTable 一起重新渲染样式代码，这可能会解决您的问题。

尝试下面的代码并重新渲染 outputPanel 而不是 dataTable：

<a4j:outputPanel>
    <h:dataTable>
            //Data
    </h:dataTable>
    <style>
       .myTable tr:first-child td 
          padding-top: 25px;
          background-color: yellow;
        
    </style>
</a4j:outputPanel>

【讨论】：

我之前遇到过类似的 javascript 问题，所以我不知道为什么我不考虑重新渲染样式。然而，当我拿出我已经准备好的技巧来尝试让它工作时，我又试了一次，然后再重新渲染样式，现在它正在工作。所以，我显然只是有一些微妙的错误并且无法发现它，但是在我将代码放回它的“原始”形式时，我修复了它。所以，谢谢你的建议。如果我再次遇到这个问题，我会记住这个建议。