Primefaces数据表格冻结列错位问题

Question

我们有一个数据表格，如图所示。其中有3列是冻结的，其余可以滚动。如图所示，冻结列的对齐有误。如果移除冻结列属性，表格看起来就正常了。有什么建议来解决这个问题吗？

- user3516088

Answer 1

我曾经遇到过类似的问题，数据表格冻结并且在不同的帖子中使用许多不同的脚本。通过使用下面的脚本，所有浏览器都能正常工作，并且不需要设置高度，它会自动计算。另外，它还会触发浏览器事件，以便正确地调整表格大小。

synchronizeRowsHeight : function() {
   var $leftRows = $('.ui-datatable-frozenlayout-left').find('tr');
   var $rightRows = $('.ui-datatable-frozenlayout-right').find('tr');

   $leftRows.each(function(index) {
         var $leftRow = $(this);
         var $leftHeight = $leftRow.innerHeight();
         var $rightRow = $rightRows.eq(index);
         var $rightHeight = $rightRow.innerHeight();

         if ($rightHeight > $leftHeight) {
                $leftRow.innerHeight($rightHeight);
                var diff = $rightHeight - $leftRow.innerHeight();
                if (diff != 0)
                       $leftRow.innerHeight($rightHeight + diff);
         } else if ($rightHeight < $leftHeight) {
                $rightRow.innerHeight($leftHeight);
                var diff = $leftHeight - $rightRow.innerHeight();
                if (diff != 0)
                       $rightRow.innerHeight($leftHeight + diff);
         }
   })

   // fire a resize event to tell the table to repaint
   $(window).trigger('resize');
}

- Melloware

---

为什么不在PrimeFaces扩展中“fork” p:dataTable，将其变成一个新功能的“游乐场”呢？我很乐意贡献一些额外的新功能。 - Kukeltje

我已经考虑过了。问题在于Datatable非常庞大，JS代码也很庞大，我不确定是否想要处理它们的维护。即使我遇到Datatable的问题，我通常会向PF报告，让Mert来修复，因为他似乎是现在唯一一个对其进行更改的人。即使tandraschko通常也不会碰Datatable的错误！ - Melloware

你能说明一下你的问题是什么吗？这样我就可以更好地尝试将其纳入PF中（或修复datatable js和/或renderer中的潜在问题）。 - Kukeltje

@Kukeltje 我认为这是与此问题相同：https://github.com/primefaces/primefaces/issues/2388 - Melloware

这个也适用于Angular的primeng吗？ - Kid

不，这仅适用于PrimeFaces JSF。 - Melloware

Answer 2

Primefaces数据表格冻结:

冻结的数据表格有两个部分，左侧（固定）和右侧（动态/可滚动）。

<script type='text/javascript'>
function synchronizeRowsHeight() {
  //aligning table header row
  var $leftHeaderRow = $('.ui-datatable-frozenlayout-left .ui-datatable-scrollable-header-box tr');
  var $rightHeaderRow = $('.ui-datatable-frozenlayout-right .ui-datatable-scrollable-header-box tr');
  $leftHeaderRow.outerHeight(35);//height(px) in int    
  $rightHeaderRow.outerHeight(35);//height(px) in int   

  //aligning table data rows
   var $leftRows = $('.ui-datatable-frozenlayout-left .ui-datatable-scrollable-body tr');
   var $rightRows = $('.ui-datatable-frozenlayout-right .ui-datatable-scrollable-body tr');
   $leftRows.each(function (index) {
     var $leftRow = $leftRows.eq(index); 
     var $rightRow = $rightRows.eq(index);
     $rightRow.innerHeight($leftRow.innerHeight());
     $leftRow.innerHeight($rightRow.innerHeight());       
  });   
}
</script>

从您的bean中调用上述JavaScript函数，如下所示：

RequestContext.getCurrentInstance().execute("synchronizeRowsHeight();");

- Sanketik Gote

Answer 3

我们在类似的使用情况下遇到了同样的问题。 据我所知，目前没有很好的解决方案。

最简单的方法是，在每次datatable重绘时（包括排序等ajax事件），调整较小的tr和th的高度。

另一种可能的方法是通过防止行断裂来避免不同的高度。

- Abaddon666