带有 StickyHeader 的数据表在 Primefaces 8.0 的选项卡视图中显示重复 header

Question

我刚刚从 Primefaces 7.0 升级到 Primefaces 8.0。使用较新版本时，我在 TabView 中看到一个重复的 header 和一个带有 StickyHeader 的数据表。我在 7.0 中没有看到这种行为。我搜索了论坛，确实看到了很多与此问题相关的帖子。 mertsincan 在 github（issue #1218）上发布了一个解决方案，但它不起作用。我下载了 Primefaces 展示示例并尝试了 mertincan 发布的解决方案，但它不起作用。下图显示了行为，我有一个示例文件。我还检查了 github 处的所有 link。com/primefaces/primefaces/… Melloware 在问题 Duplicate headers in primefaces data table

上发布

这与展示柜中的粘性汽车示例相同。非常感谢任何解决此问题的 direction/suggestions。谢谢下面是视图文件

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>

Answer 1

这是因为这张票而在 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

带有 StickyHeader 的数据表在 Primefaces 8.0 的选项卡视图中显示重复 header

Datatable with StickyHeader shows duplicate header in a tabview in Primefaces 8.0

datatable

jsf

primefaces

tableheader