【问题标题】:Primefaces datatable Frozen columns Row Heights Mismatch [duplicate]Primefaces数据表冻结列行高不匹配[重复]
【发布时间】:2015-07-18 12:25:02
【问题描述】:

我遇到了 Primefaces 数据表冻结列的行高不匹配问题。冻结列和未冻结列的行高不匹配,就像独立的数据表一样。行高在左右布局中独立调整。

任何解决方法都将不胜感激。

【问题讨论】:

  • PF 版本?如果较新的版本表现出相同的行为,有两种解决方法:确保正常单元格具有默认高度或编写一些 javascript 和 css 将正常行的高度复制到固定列的行。

标签: primefaces datatable frozen-columns


【解决方案1】:

对于 PrimeFaces 5.3 版,我编写了同步行高的解决方法,它是一个在 dom 就绪时调用的小 javascript 函数:

<h:outputScript target="body">
    $(function() {
        synchronizeRowsHeight();
    });

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

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

            if ($rightRow.innerHeight() > $leftRow.innerHeight()) {
                $leftRow.innerHeight($rightRow.outerHeight());
            } else {
                $rightRow.innerHeight($leftRow.outerHeight());
            }
        })
    }
</h:outputScript>

【讨论】:

  • 它在 Firefox 中运行良好,但 chrome 仍然有些不匹配
  • 如果你分页呢?筛选?排序?
  • 我只有静态表...但是可以在排序/过滤后调用此函数
  • 我找到了如何使 chrome 和 firefox 设置正确的宽度,需要将 $rightRow.innerHeight($leftRow.innerHeight()); 替换为 $rightRow.innerHeight($leftRow.outerHeight());,以及将 $leftRow.innerHeight($rightRow.innerHeight()); 替换为 $leftRow.innerHeight($rightRow.outerHeight());。我仍然无法解释这一点,但它的工作原理。
  • IE9 不支持
猜你喜欢
  • 2014-11-11
  • 2012-03-23
  • 2015-05-05
  • 2016-08-15
  • 2015-08-19
  • 1970-01-01
  • 1970-01-01
  • 2011-09-04
  • 1970-01-01
相关资源
最近更新 更多