Primefaces Datatable заморозил группу Header и scrollableHeader, несоответствие высоты заголовка

Я создаю таблицу данных с простыми лицами 5.2 и использую FrozenHaeader и scrollableHeader.

я прочитал это из

потерянная таблица данных заголовка использует замороженный столбец с начальным лицом

Проблема

Высота столбца заголовка не синхронизируется между FrozenHaeader и scrollableHeader.

Мой код

<p:dataTable var="result"  value="#{reportBRBean.listZone2}" id="dataTb" selectionMode="single" selection="#{reportBRBean.selectedZone}" 
 frozenColumns="3"      scrollable="true" scrollWidth="800"

 rowIndexVar="rowIndex" rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'even' : 'odd'}" rowKey="#{result.zoneCode}"  >

замороженныйЗаголовок:

<p:columnGroup type="frozenHeader"  >
<p:row>
<p:column  rowspan="4" width="20" style="background-color: #00CCCC !important;"/>
<p:column  rowspan="4" headerText="#{msg['br1.zone.lb.zone']}" width="140" style="background-color: #00CCCC !important;"/>
<p:column rowspan="4" headerText="#{msg['br2.lb.amount.birth.certificate']}" width="110" style="background-color: #00CCCC !important;"/>
</p:row></p:columnGroup>

прокручиваемый заголовок:

<p:columnGroup type="scrollableHeader"  >
<p:row>
<p:column colspan="10"  headerText="#{msg['br2.lb.amount.inform.birth']}" width="900" style="background-color: #00CCCC !important;"/>
<p:column rowspan="4" headerText="#{msg['br2.lb.percent.inform.birth.all']}" width="100" style="background-color: #ffcc66 !important;"/>
<p:column colspan="10" headerText="#{msg['br2.lb.amount.noinform.birth']}" width="900" style="background-color: #00CCCC !important;"/>
<p:column rowspan="4" headerText="#{msg['br2.lb.percent.noinform.birth.all']}" width="100" style="background-color: #ffcc66 !important;"/>
</p:row>
<p:row>
<p:column colspan="4"  headerText="#{msg['br2.lb.amount.inform.within15']}" style="background-color: #ff99ff !important;"/>
<p:column rowspan="3"  headerText="#{msg['br2.lb.percent.inform.within15']}" style="background-color: #ffff99 !important;"/>
<p:column colspan="4"  headerText="#{msg['br2.lb.amount.inform.over15']}" style="background-color: #ff99ff !important;"/>
<p:column rowspan="4"  headerText="#{msg['br2.lb.percent.inform.over15']}" style="background-color: #ffff99 !important;"/>
<p:column colspan="4"  headerText="#{msg['br2.lb.amount.noinform.within15']}" style="background-color: #ff99ff !important;"/>
<p:column rowspan="3"  headerText="#{msg['br2.lb.percent.noinform.within15']}" style="background-color: #ffff99 !important;"/>
<p:column colspan="4"  headerText="#{msg['br2.lb.amount.noinform.over15']}" style="background-color: #ff99ff !important;"/>
<p:column rowspan="4"  headerText="#{msg['br2.lb.percent.noinform.over15']}" style="background-color: #ffff99 !important;"/>
</p:row>

Thank you


person Believes    schedule 22.04.2016    source источник
comment
Пожалуйста, представьте и объясните свою проблему.   -  person Héctor Valverde Pareja    schedule 22.04.2016
comment
Рабочее решение для PF 6.2 и всех браузеров: stackoverflow.com/questions/25887963/   -  person Melloware    schedule 12.07.2018


Ответы (1)


Я исправил с помощью javascript.

Я вызываю javascript после создания таблицы данных (oncomplete).

<script type="text/javascript">
         /*<![CDATA[*/

        function synchronizeRowsHeight() {


            var $rows = $(document.getElementById('doctorForm:resultDoctorService_frozenThead')).find('tr');
                        $rows.each(function(index) {
                            var $row = $(this);
                            $row.innerHeight($(document.getElementById('doctorForm:resultDoctorService_scrollableThead')).outerHeight());
                        });
                    }
                    // ]]>
</script>

doctorForm:resultDoctorService_frozenThead

Идентификатор формы "doctorForm"

Идентификатор таблицы данных "resultDoctorService"

Тип группы столбцов "frozenThead"

person Believes    schedule 22.04.2016