Primefaces 数据表冻结列未对齐 [英] Primefaces datatable frozen columns misallignment

问题描述

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

We have a data table as shown in the image. There are 3 frozen columns and rest scrollable. The frozen columns are misalligned as shown. If frozen columns attribute is removed, the table looks properly. Any suggestions to solve the problem.

推荐答案

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

I have had similar issues in the past with frozen datatable and using many different scripts across different posts I have found the below script works in ALL browsers and does not require you to set a height it will calculate it. As an added bonus it also triggers a browser event to force the table to resize properly.

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 数据表冻结列未对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！