PrimeFaces 数据表滚动条答案

【问题标题】：PrimeFaces datatable ScrollbarPrimeFaces 数据表滚动条
【发布时间】：2013-04-11 14:40:12
【问题描述】：

我有一个带有 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">

有什么问题？谢谢！

【问题讨论】：

没有滚动条可以正常工作吗？
设置了 scrollable="true" 时，它是如何看到的（粘贴屏幕截图）？
你设置：它会正常工作。
@Ravi 是的，当我设置 scrollable="false" 时它工作正常！
@RodmarConde 截图是在添加了 scrollable="true" 属性之后

标签： jsf jsf-2 primefaces css

【解决方案1】：

你可以这样设置列宽

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

或者你可以这样指定样式类

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

你可以像这样添加滚动宽度

<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>

【讨论】：

【解决方案2】：

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

CSS：

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

表格：

第 1 列：width="25"

第 2 列：width="55"

第 3 列：width="369"

第 4 列：width="469"

第 5 列：width="170"

【讨论】：

我不明白你的解决方案：你的意思是你在一列中设置了不同的宽度值，比如：<p: styleClass="idcol" width="25">。能否请您发布您的 xhtml 代码。