Primefaces数据表冻结列未对齐

时间:2014-09-17 10:18:09

标签: jsf-2 primefaces datatable

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

frozen columns misallignemnt

3 个答案:

答案 0 :(得分: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');
}

答案 1 :(得分:0)

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

当我们解决它时,最简单的方法是每次重绘数据表时重新调整较小tr的高度(包括排序等ajax事件)。

另一种可能的方法是通过例如防止不同的高度。阻止线路破裂。

答案 2 :(得分:0)

Primefaces数据表冻结:

Frozen datatable有两部分(固定)和右(动态/可滚动)

<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();");