3

我对 primefaces 数据表有疑问。如您所见，列边框和标题存在对齐问题。这是一个 primefaces 错误还是我的数据表有问题？顺便说一句，数据表有动态列。数据表

<p:dataTable     scrollable="true" scrollWidth="100%" editable="true" editMode="cell"   
var="invoiceLine" value="#{myController.invoiceLines}"                          
                         selection="#{myController.selectedInvoiceLine}" selectionMode="single" rowKey="#{invoiceLine.uuid}"
                         >
<p:columns value="#{myController.columns}" var="column"
                           styleClass="ui-editable-column" width="50"
                           columnIndexVar="colIndex">

//some stuff
</p:columns>         

            </p:dataTable>
4

5 回答 5

13

做一招，

Remove scrollable = true

并创建新的样式类，例如，

.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper{
     overflow: auto;
     width: 100%;
     padding-bottom: 5px;}

适用styleClass于p:datatable喜欢styleClass="ui-datatable-hor-scroll"

于 2013-05-16T09:30:53.097 回答
5

该问题在 6.2 中仍然存在。在样式属性中设置宽度的另一种解决方案是替换

<p:column style="width:100px">

和

<p:column style="width:calc(100px)">

MDN-calc() 描述

于 2018-03-27T14:05:59.953 回答
1

这个问题在primefaces 最新版本 ( 7.0 )中得到解决

https://github.com/primefaces/primefaces

于 2019-03-21T13:39:57.513 回答
1

对于遇到此问题的其他任何人 - Primfaces 可滚动仍然存在问题。我在5.1，它不工作。

只需使用一个普通的数据表，然后使用 CSS3 来让滚动工作：

https://jsfiddle.net/xuvsncr2/170/

当然不要使用 table、thead、tr 等来定位元素。而是使用 css 类，以便获得正确的数据表。

棘手的部分是，为了设置滚动窗格的大小，您需要直接定位表格周围的 div。你可以在下面看到我是如何做到的

这里有更多关于 css3 的 flexbox 的信息：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

这是我用于 primefaces 的 css 示例。我只是用一个包裹我的数据表<div class="myCompanyScrollable thirtyEM"> 

.thirtyEM .ui-datatable-tablewrapper{
height: 30em;
}
.myCompanyScrollable table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
.myCompanyScrollable table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 1.05em);
    display: table;
    table-layout: fixed;
}
.myCompanyScrollable table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
.myCompanyScrollable table tbody tr {
    width: 100%;
}
.myCompanyScrollable table tbody tr {
    display: table;
     width: 100%;
    table-layout: fixed;
}
/* decorations */
.myCompanyScrollable {
    border: 1px solid black;
    padding: 0.3em;
}
.myCompanyScrollable table {
    border: 1px solid lightgrey;
}
.myCompanyScrollable table td, .myCompanyScrollable table th {
    padding: 0.3em;
    border: 1px solid lightgrey;
}
.myCompanyScrollable table th {
    border: 1px solid grey;
}
于 2015-11-13T20:52:42.917 回答
-1

Try below jquery code

$('.datatableclassname').find(('div.ui-datatable-scrollable-header ')+'div.ui-dt-c').each(function(index) {
            var cur_obj = $(this);
            var column_num = parseInt(index+1);
            $('.datatableclassname div.ui-datatable-scrollable-body tr > td:nth-child('+column_num+') > div.ui-dt-c').css('width',cur_obj.width()+'px');
        });
于 2013-05-15T09:21:22.617 回答