Question

在我的JSF应用程序的页面模板中，我使用ui:repeat迭代一些数据来构建HTML表。我想为此使用基本的HTML标签，而不是h:dataTable之类的东西，因为当我尝试将一些样式和JavaScript事件应用于它时，它们没有出现在正确的元素上。但是，在为此目的使用ui:repeat时，我发现它添加了无效的tr和td在不适当的地方打开结束标记。

页面模板的代码类似于：

<table border="1" style="width: 100%;">
    <ui:repeat var="row" value="#{bean.testData}">
        <tr>
            <ui:repeat var="column" value="#{bean.testData}">
                <td>#{row}, #{column}</td>
            </ui:repeat>
        </tr>
    </ui:repeat>
</table>

我实际上想做一些比这更复杂的事情，但这是问题的最简单的例子。

bean包含：

private final String[] testData = {"fu", "bar"};

public String[] getTestData() {
    return this.testData;
}

这个输出是：

<table border="1" style="width: 100%;"></td>
</tr>
<tr>
<td>
    <tr>
        <td>fu, fu</td>
        <td>fu, bar</td>
    </tr>
    <tr>
        <td>bar, fu</td>
        <td>bar, bar</td>
    </tr></td>
</tr>
<tr>
<td>
</table>

我对输出的期望是：

<table border="1" style="width: 100%;">
    <tr>
        <td>fu, fu</td>
        <td>fu, bar</td>
    </tr>
    <tr>
        <td>bar, fu</td>
        <td>bar, bar</td>
    </tr>
</table>

我无法弄清楚为什么JSF会在ui:repeat循环输出的开头和结尾添加它：

</td>
</tr>
<tr>
<td>

在Google Chrome和Firefox中，这会导致额外的行在表格的顶部和底部包含一个空单元格。

有关如何预防此问题的任何想法？

更新：我没想到我正在生成的这个表格会出现在h:panelGrid元素中。我不知道这是否会对这个问题产生影响。

Answer 1

根据更新，您需要将代码封装在JSF标记中，如下所示：

<h:panelGrid>
    <ui:fragment>
        <table border="1" style="width: 100%;">
            <ui:repeat var="row" value="#{bean.testData}">
                <tr>
                    <ui:repeat var="column" value="#{bean.testData}">
                        <td>#{row}, #{column}</td>
                    </ui:repeat>
                </tr>
            </ui:repeat>
        </table>
    </ui:fragment>
</h:panelGrid>

此外，h:panelGrid的呈现将无法在嵌套内容的单元格中正确分割。 h:panelGrid旨在仅处理JSF组件。

更多信息：

为什么JSF的ui：重复为我的HTML添加无效标签？

1 个答案: