PrimeFaces数据表滚动条

Posted 2021-03-30

我有一个带有primefaces数据表的表单，我在css中为它设置了列宽：

.idcol{width: 5%}
.prioritycol{width: 5%}
.titlecol{width: 30%}
.descriptioncol{width: 40%}
.actionscol{width: 10px}

一切都还可以，但是当我添加scrollable="true"属性以便拥有可滚动的数据表时，结果最糟糕：

这是数据表的声明：

<p:dataTable  id="dtable" var="todos" value="#{todo.todoList}" scrollable="true" 
                             resizableColumns="false" scrollHeight="300" lazy="true"
                             styleClass="idcol,prioritycol,titlecol,descriptioncol,actionscol">

问题是什么？谢谢！

答案

您可以通过这种方式设置列宽

<p:column headerText="Type"  width="70%"> 

或者您可以通过这种方式指定样式类

<p:column headerText="Type"  styleClass="idcol"  >

你可以添加scrollWidth这样的东西

<p:dataTable var="data"  rowKey="#{data.key}" style="width:70%" 
sortOrder="ascending"
selection=""
value=""
selectionMode="single"
scrollable="true" 
scrollWidth="71%" 
scrollHeight="3%"
>

<p:ajax event="rowSelect" listener=""
update="" />

<p:column headerText="Type"  styleClass=""  sortBy="" width="70%">
<h:outputText id="dataTYpe" value="" />
</p:column>

<p:column headerText="Category"  sortBy="" width="30%">
<h:outputText value="" />
</p:column>

</p:dataTable>

另一答案

我找到了解决方案，你必须同时编辑你的css和你的JSF代码并查看你的结果，对于我的问题我一步一步编辑了我的css和jsf代码，这里是适用于我的代码：

CSS：

.idcol{width: 5%}
.prioritycol{width: 5%}
.titlecol{width: 30%}
.descriptioncol{width: 40%}
.actionscol{width: 20%}

表格 ：

1. 第1列：宽度=“25”
2. 第2列：width =“55”
3. 第3栏：width =“369”
4. 第4栏：width =“469”
5. 第5列：width =“170”