Таблица данных Primefaces Замороженные столбцы Несоответствие высоты строк

У меня проблема с несоответствием высоты строк с замороженными столбцами таблицы данных Primefaces. Высоты строк закрепленных и незакрепленных столбцов не совпадают, действуя как независимые таблицы данных. Высота строк регулируется независимо в левом и правом макетах.

Любые обходные пути будут оценены.


person Fatih Akdoğan    schedule 07.05.2015    source источник
comment
Версия ПФ? Если более новая версия демонстрирует такое же поведение, есть два обходных пути: убедитесь, что обычные ячейки имеют высоту по умолчанию, или напишите какой-нибудь javascript и css, которые копируют высоту обычных строк в строки фиксированных столбцов.   -  person Kukeltje    schedule 07.05.2015


Ответы (1)


Для PrimeFaces версии 5.3 я написал обходной путь для синхронизации высоты строк, это небольшая функция javascript, вызываемая на dom ready:

<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>
person antonu17    schedule 04.11.2015
comment
В файрфоксе работает нормально, а в хроме все равно есть несоответствия. - person antonu17; 04.11.2015
comment
А если разбить на страницы? Фильтр? Сортировать? - person Kukeltje; 04.11.2015
comment
у меня есть только статическая таблица... но эту функцию можно вызвать после сортировки/фильтрации - person antonu17; 04.11.2015
comment
Я нашел, как заставить Chrome и Firefox установить правильную ширину, нужно заменить $rightRow.innerHeight($leftRow.innerHeight()); на $rightRow.innerHeight($leftRow.outerHeight());, а также $leftRow.innerHeight($rightRow.innerHeight()); на $leftRow.innerHeight($rightRow.outerHeight());. Я до сих пор не могу это объяснить, но это работает. - person antonu17; 04.11.2015
comment
Не работает на IE9 - person Walllzzz; 05.01.2016
comment
У меня нет IE9, чтобы проверить, но он работает на IE11 и Edge 25. - person antonu17; 06.01.2016
comment
Теперь он работает в IE9, просто примените $rightRow.innerHeight($leftRow.innerHeight()); в $rightRow.innerHeight($leftRow.outerHeight()); а также $leftRow.innerHeight($rightRow.innerHeight()); в $leftRow.innerHeight($rightRow.outerHeight());. - person Walllzzz; 11.01.2016
comment
Рабочее решение для PF 6.2 и всех браузеров: stackoverflow.com/questions/25887963/ - person Melloware; 12.07.2018