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

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

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

Answer 2

此代码产生的标记无效，因为<TR>元素不在表格中。如果您将关闭<TABLE>标签移动到重复控制之后，表格列将会正确对齐。只要确保重复中的<TD>的数量与标题中的数量完全相同即可。