Rich Extended DataTable列宽

Question

我有RichFaces扩展dataTable的问题

如果列更多地说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>

Answer 1

<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)到20px宽的所有列.

我试过了...

• <rich:extendedDataTable>使用<div>元素包装并设置以下内容:
  • position: relative;
  • width: 100%;
  • overflow-x: auto;
  • 所需的高度,否则你只会看到下一个项目符号点的滚动条.
• 制作div.extdt-maindiv绝对定位
• 给予这两个div.extdt-outerdiv和div.extdt-innerdiv静态定位和经销商的宽度

......但这似乎没有任何影响.

我想这可能是因为我在Firebug中进行了大部分这些更改,并且mainDiv.getWidth()(from calculateWidthsFromRatios())正在检索缓存值,mainDiv.element.boxWidth.该值在ClientUI.common.box.Box.setWidth()(common-scrollable-data-table.js)中设置,并且只调用一次; 如果我调整浏览器窗口大小(<rich:extendedDataTable>在我的情况下有100%的宽度),它不会被再次调用.

我将尝试在我的CSS文件中进行这些更改,看看是否所有内容都神奇地起作用.但是,JavaScript <rich:extendedDataTable>非常复杂,而且没有记录,因此我可能会遗漏某些地方.我会跟进我的结果.

编辑:在我的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).

祝好运.

Answer 2

您应该指定宽度而不是"px"或"%",例如

<rich:column label="Select" sortable="false" width="100">

扩展数据表存在水平滚动问题,但您可以指定固定的表格宽度(以像素为单位),并将表格放在div中,其中overflow-x设置为滚动.