Question

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

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

<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

布莱恩您需要将表头代码放入标题构面。基本上你现在正在做两张桌子而不是一张桌子。这应该可以解决你的问题。

Answer 2

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

在Xpages中对齐标题和数据列重复控制

2 个答案: