Богатая Расширенная ширина столбцов DataTable

Для справки, это базовая структура вывода , предполагающая три элемента с шириной 100 пикселей и две записи:

<div id="form_id:edt_id" class="extdt-maindiv rich-extdt-maindiv">
    <div id="form_id:edt_id:od" class="extdt-outerdiv">
        <div id="form_id:edt_id:innerd" class="extdt-innerdiv">
            <table id="form_id:edt_id:tu" class="extdt-table-layout">
                <colgroup id="form_id:edt_id:colgroup:header">
                    <col width="100" />
                    <col width="100" />
                    <col width="100" />
                </colgroup>
                <thead id="form_id:edt_id:header" class="extdt-thead">
                    <tr class="extdt-subheader rich-extdt-subheader">
                        <th id="form_id:edt_id:column_1_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 1</th>
                        <th id="form_id:edt_id:column_2_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 2</th>
                        <th id="form_id:edt_id:column_3_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 3</th>
                    </tr>
                    <tr class="extdt-table-filterrow rich-extdt-subheader"> <!-- only if filtering is enabled -->
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="3">
                            <div id="form_id:edt_id:sd" class="extdt-content">
                                <table id="form_id:edt_id:n" class="extdt-table-layout">
                                    <colgroup id="form_id:edt_id:colgroup:body">
                                        <col width="100" />
                                        <col width="100" />
                                        <col width="100" />
                                    </colgroup>
                                    <tbody id="form_id:edt_id:tb">
                                        <tr id="form_id:edt_id:n:0" class="extdt-firstrow rich-extdt-firstrow">
                                            <td id="form_id:edt_id:0:column_1_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 1, Row 1</div>
                                            </td>
                                            <td id="form_id:edt_id:0:column_2_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 2, Row 1</div>
                                            </td>
                                            <td id="form_id:edt_id:0:column_3_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 3, Row 1</div>
                                            </td>
                                        </tr>
                                        <tr id="form_id:edt_id:n:1" class="extdt-firstrow rich-extdt-firstrow">
                                            <td id="form_id:edt_id:1:column_1_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 1, Row 2</div>
                                            </td>
                                            <td id="form_id:edt_id:1:column_2_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 2, Row 2</div>
                                            </td>
                                            <td id="form_id:edt_id:1:column_3_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 3, Row 2</div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </tbody>
                <tfoot id="form_id:edt_id:footer">
                    <tr class="extdt-footer rich-extdt-footer">
                        <td class="extdt-footercell rich-extdt-footercell" scope="colgroup" colspan="3">
                            <!-- table footer goes here if defined -->
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div id="form_id:edt_id:column_1_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
    <div id="form_id:edt_id:column_2_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
    <div id="form_id:edt_id:column_3_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
</div>

Вы можете добавить горизонтальную прокрутку к div.extdt-innerdiv , но функцию автоматического изменения размера столбца ] ( ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios () ) по существу сбивается с толку, изменяя размеры всех столбцов, которые начинаются после maxWidth компонента (полученного из начальной ширины div.extdt-maindiv ) до 20 пикселей в ширину.

Я пробовал ...

• Обертывание элементом
  и установка следующего: {{1 }}

  • position: relative;
  • width: 100%;
  • overflow-x: auto;
  • желаемая высота, иначе вы просто увидите полосы прокрутки из-за следующего пункта маркера.
• Создание div.extdt-maindiv с абсолютным позиционированием
• Получение как div.extdt-outerdiv , и div.extdt-innerdiv статическое позиционирование и автоматическая ширина

... но, похоже, это не имеет никакого эффекта.

Я думаю, это может быть связано с тем, что я вношу большинство этих изменений в Firebug и mainDiv.getWidth () (из calculateWidthsFromRatios () ) извлекает кешированное значение mainDiv.element.boxWidth . Это значение устанавливается в ClientUI.common.box.Box.setWidth () (common-scrollable-data-table.js) и вызывается только один раз; он не вызывается снова, если я изменяю размер окна браузера ( в моем случае имеет ширину 100%).

Я попробую внести эти изменения в свой файл CSS, чтобы посмотреть, все ли работает волшебным образом. Однако JavaScript для довольно сложен и не задокументирован, поэтому я мог что-то упустить. Я буду следить за своими результатами.

РЕДАКТИРОВАТЬ : После внесения изменений в мой CSS я все еще испытывал проблему с сокращением столбцов.

Итак, чтобы избежать создания обертки div, я добавил горизонтальную прокрутку к div.extdt-innerdiv :

.extdt-innerdiv { overflow-y: hidden; overflow-x: auto !important; }

Затем в нижнем колонтитуле , я отключил функцию calculateWidthsFromRatios () :

<rich:extendedDataTable id="edtId">
    <!-- rest of extended data table -->
    <f:facet name="footer">
        <script type="text/javascript">
            jQuery(function() {
                // Disable ratio-based column resizing.
                ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios = function() {};
            });
        </script>
    </f:facet>
</rich:extendedDataTable>

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

Даже с этим решением, пользователь не сможет вручную расширить ширину столбцов, потому что JavaScript в таблице расширенных данных.js предотвращает изменение размеров столбцов шире, чем mainDiv.element.boxWidth . Чтобы разрешить подобное изменение размера, можно просто отправить патч в JBoss для исправления , поскольку в настоящее время нет планов по изменению его поведения в RichFaces 3.X (согласно # RF-4871 в сообществе JBoss Community JIRA).

Удачи.