jsf - 丰富的扩展数据表列宽

我有 RichFaces 扩展数据表的问题

如果列更多，比如 20，而不是提供水平滚动条，列被压缩。

我尝试以 %, px 给出列宽。但没有用。

有熟悉这个的吗？

<rich:column label="Select" sortable="false" width="10%">
  <f:facet name="header">
    <h:selectBooleanCheckbox id="chk" align="center"
      value="#{bean.selectAll}" onclick="selectAll();"/>
  </f:facet>
  <input id="part_#{rowKey}" type="checkbox"
    name="selectedParts" value="#{listVar.id}" />
</rich:column>

最佳答案

<rich:extendedDataTable> 确实不能很好地处理水平滚动。事实上，开发人员似乎开始着手使水平滚动几乎不可能。

您可以在启用水平滚动的情况下将 <rich:extendedDataTable> 放入 <div> 中，但如果您将其留在那里，它将无法工作。 <div> ( <rich:extendedDataTable> ) 中嵌套的 div.extdt-innerdiv 之一是绝对定位的，将其从文档流中删除。

作为引用，这是 <rich:extendedDataTable> 的基本输出结构，假设三个 <rich:column> 元素，宽度为 100px 和两条记录:

<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，但<rich:extendedDataTable>的列自动调整大小功能(ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios())主要获取此迷惑，调整即开始过去组件的maxWidth(从div.extdt-maindiv初始宽度导出)，以20像素宽的所有列。

我试过了...

用 <rich:extendedDataTable> 元素包装 <div> 并设置以下内容:

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) 中，并且只被调用一次；如果我调整浏览器窗口的大小(在我的例子中 <rich:extendedDataTable> 的宽度为 100%)，它不会再次被调用。

我将尝试在我的 CSS 文件中进行这些更改，以查看是否一切正常。不过，<rich:extendedDataTable> 的 JavaScript 非常复杂，而且没有记录，所以我可能在某处遗漏了一些东西。我会跟进我的结果。

EDIT :在我的 CSS 中进行更改后，我仍然遇到列缩短问题。

因此，为了避免创建包装 div，我将水平滚动添加到 div.extdt-innerdiv :

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

然后，在 <rich:extendedDataTable> 的页脚中，我禁用了 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。

即使使用此解决方案，用户也无法手动扩展列的宽度，因为 extended-data-table.js 中的 JavaScript 会阻止将列调整为大于 mainDiv.element.boxWidth 的宽度。为了能够像这样调整大小，最好向 JBoss 提交一个补丁来修复 <rich:extendedDataTable> ，因为目前没有计划在 RichFaces 3.X 中修改其行为(根据 JBoss 社区 JIRA 中的 #RF-4871)。

祝你好运。

关于jsf - 丰富的扩展数据表列宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1696747/