jsf - 带有 StickyHeader 的数据表在 Primefaces 8.0 的选项卡视图中显示重复的标题
问题描述
我刚刚从 Primefaces 7.0 升级到 Primefaces 8.0。使用较新版本时,我在 TabView 内看到带有带有 StickyHeader 的 dataTable 的重复标题。我在 7.0 中没有看到这种行为。我搜索了论坛,我确实看到了一些与此问题相关的帖子。mertsincan 在 github (issue #1218) 上发布了一个解决方案,但它不起作用。我下载了 Primefaces 展示示例并尝试了 mertincan 发布的解决方案,但它不起作用。下图显示了行为,我有一个示例文件。我还查看了github.com/primefaces/primefaces/... 上的所有链接
这与展示柜上的sticky 中的汽车示例相同。非常感谢任何解决此问题的方向/建议。谢谢 下面是视图文件
import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.view.ViewScoped;
import javax.inject.Inject;
import javax.inject.Named;
import com.example.model.Car;
import com.example.service.CarService;
@Named
@ViewScoped
public class ScrollView implements Serializable {
/**
*
*/
private static final long serialVersionUID = -1472033438497912037L;
private List<Car> cars;
@Inject
private CarService service;
@PostConstruct
public void init() {
cars = service.createCars(50);
}
public List<Car> getCars() {
return cars;
}
public void setService(CarService service) {
this.service = service;
}
}
下面是 xhtml 文件。您可以在代码中的第 10 行和第 11 行看到 mertsincan 建议的解决方案:“mytabView.ui-tabs {position:static}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<style type="text/css">
.myTabview.ui-tabs {
position: static;
}
.noborders tr, .noborders td {
background: none !important;
border: none !important;
}
.negativeColor {
color: red;
}
.ui-datagrid-no-border>.ui-datagrid-content {
border: none !important;
}
</style>
</h:head>
<body>
<p:tabView id="CarsTabView" dynamic="false" cache="true" styleClass="myTabview">
<p:tab id="CarsTab" title="Cars">
<p:dataTable var="car" value="#{scrollView.cars}" stickyHeader="true">
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
</body>
</html>
解决方案
由于这张票,这是在 PF 8.0 中引入的: https ://github.com/primefaces/primefaces/issues/5429
原来zoom:1
是旧的 IE8 hack,由于 PF 不再支持 IE8,我们不应该将其转换为transform: scale(1)
.
这将通过这张票在 PF Elite 8.0.2 中修复: https ://github.com/primefaces/primefaces/issues/5675
推荐阅读
- python - Python:使用管道作为分隔符分隔字符串
- arrays - Python:相应地循环每一列/行并减去两个csv文件之间的值
- angular - 角度无法设置值以形成控制
- node.js - 如何用 Jest 模拟所需的模块功能?
- php - CodeIgniter 使用 HTTPS 的内部服务器错误
- docker - 在 Dockerfile 中运行脚本时出错
- java - JTree 到带有散列和数组的字符串
- cassandra - 从没有墓碑和 ttl 的 Cassandra 中删除整个分区?
- angular - 如何设置默认值
底牌的标签 - python-3.6 - 无法获取 ldap 服务器详细信息 python3