Primefaces数据表冻结列错位

Posted 2023-02-23

【中文标题】Primefaces数据表冻结列错位

【英文标题】：Primefaces datatable frozen columns misallignment

【发布时间】：2014-11-11 08:03:39

【问题描述】：

我们有一个如图所示的数据表。有 3 个冻结列，其余可滚动。如图所示，冻结的列未对齐。如果删除了冻结列属性，则表格看起来正确。任何解决问题的建议。

【参考方案1】：

我们在类似的用例中遇到了同样的问题。 据我所知，没有很好的解决方案。

我们解决的最简单的方法是在每次重绘数据表时调整较小的 tr 和 th 的高度（包括排序等 ajax 事件）

另一种可能的方法是防止不同的高度，例如防止线条断裂。

【参考方案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();");

【参考方案3】：

过去我在冻结数据表和在不同帖子中使用许多不同的脚本时遇到过类似的问题，我发现以下脚本适用于所有浏览器，并且不需要您设置它会计算它的高度。作为一个额外的好处，它还会触发一个浏览器事件来强制表格正确调整大小。

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');

【讨论】：

为什么不在 PrimeFaces 扩展中'fork' p:dataTable 并使其成为新功能的“游乐场”？我很乐意贡献一些额外的东西（新功能）。

我已经考虑过了。问题是 Datatable 是如此的野兽，而 JS 非常庞大，我不确定我是否想解决维护问题。即使我有数据表问题，我通常也会将它报告给 PF 让 Mert 修复，因为他现在似乎是唯一一个对其进行更改的人。甚至 tandraschko 通常都会单独处理数据表错误！

您能说明您的问题是什么吗？所以我可以更好地尝试将其合并到 PF 中（或修复数据表 js 和/或渲染器中的潜在问题

@Kukeltje 我认为它与此问题相同：github.com/primefaces/primefaces/issues/2388