在 Xpages 重复控件中对齐 header 和数据列

Question

我创建了一个非常好的 Xpages 重复控件，但似乎无法使 header 列和数据列正确对齐。这可能不是重复的问题，因为我一直在让列的宽度正常工作方面遇到问题。

理想情况下，我希望每一列（最后一列除外）都有一个集合，并且最后一列增长到容器的宽度。如果这不可能，我只想知道最佳做法是什么。

<xp:panel>
            <xp:table style="width:99.00%"
                styleClass="lotusFirst lotusSort">
                <xp:tr>
                    <xp:td style="width:150.0px">
                        <xp:label value="Employee" id="label1"></xp:label>
                    </xp:td>
                    <xp:td style="width:200.0px">
                        <xp:label value="Computer Number" id="label2"></xp:label>
                    </xp:td>
                    <xp:td>
                        <xp:label value="Create Date" id="label3"></xp:label>
                    </xp:td>
                    <xp:td>
                        <xp:label value="Create User" id="label4"></xp:label>
                    </xp:td>
                    <xp:td>
                        <xp:label value="ID" id="label5"></xp:label>
                    </xp:td>
                </xp:tr>
            </xp:table>

            <xp:repeat id="repeat1"
                rows="#{javascript:compositeData.rows}" var="rowData"
                indexVar="repeatIndex" value="#{view1}">

                <xp:this.facets>
                    <xp:text disableTheme="true" xp:key="header"
                        escape="false">
                        <xp:this.value><![CDATA[<table class='xspDataTable repeatRowColors' border='0' cellspacing='0' cellpadding='0' width='800px'>]]></xp:this.value>
                    </xp:text>
                    <xp:text disableTheme="true" xp:key="footer"
                        escape="false">
                        <xp:this.value><![CDATA[</table>]]></xp:this.value>
                    </xp:text>
                </xp:this.facets>

                <xp:tr id="rowDataContainer">

                    <xp:td style="width:150px">
                        <xp:link escape="true" id="link1"
                            value="/xpFormPCBuild.xsp">
                            <xp:this.text><![CDATA[#{javascript:rowData.getColumnValue("employeeName")}]]></xp:this.text>
                        </xp:link>
                    </xp:td>
                    <xp:td style="width:200px">
                        <xp:text escape="true" id="computedField2">
                            <xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("computerName");}]]>
                            </xp:this.value>
                        </xp:text>
                    </xp:td>
                    <xp:td style="width:200px">
                        <xp:text escape="true" id="computedField3">
                            <xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("CrtDte");}]]>
                            </xp:this.value>
                        </xp:text>
                    </xp:td>
                    <xp:td style="width:200px">
                        <xp:text escape="true" id="computedField4">
                            <xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("crtUsr");}]]>
                            </xp:this.value>
                        </xp:text>
                    </xp:td>
                    <xp:td style="width:250px">
                        <xp:text escape="true" id="computedField5">
                            <xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("ID");}]]>
                            </xp:this.value>
                        </xp:text>
                    </xp:td>

                </xp:tr>

            </xp:repeat>
        </xp:panel>

Answer 1

布莱恩，您需要将 table header 代码放入 header 方面。基本上你现在正在做 2 tables 而不是一个。那应该可以解决您的问题。

Answer 2

此代码生成的标记无效，因为 <TR> 元素在 table 之外。如果将结束 <TABLE> 标记移动到重复控件之后，table 列将正确对齐。只需确保重复中 <TD> 的数量与 header.

中的数量完全相同

在 Xpages 重复控件中对齐 header 和数据列

Aligning header and data columns in Xpages Repeat Control

xpages