如何使用 ui:repeat 标签在 dataTable 中动态生成 id答案

【问题标题】：How to dynamically generate id in dataTable using ui:repeat tag如何使用 ui:repeat 标签在 dataTable 中动态生成 id
【发布时间】：2012-05-29 16:14:48
【问题描述】：

我正在使用渲染图像的 ui:repeat 标记。我有五张图像，我希望在每次迭代中我的图像都得到像 image1、image2、image3.... imagen 这样的 id。我试过了，但它不起作用。

<div id="imageGallery">
    <ui:repeat value="#{countryPages_Setup.images}" var="image" varStatus="status">
        <tr>
            <td>
                <a href="javascript:void()" class="launchLink">
                    <p:graphicImage id="image#{status.index}"         //problem
                                    value="/resources/images/#{image}"
                                    width="100"
                                    height="100"
                                    rendered="#{countryPages_Setup.renderImages}"/>
                </a>
            </td>
        </tr>
    </ui:repeat>
</div>

我也试过 {staus.index + 1}。我也试过 id= image#{1++} 但它也不起作用。我该怎么做？

谢谢

【问题讨论】：

标签： jsf-2 el

【解决方案1】：

您可以在id 属性中使用EL，但它必须在视图构建期间可用。 <ui:repeat> 但是在视图渲染期间运行，它将重用相同的 <p:graphicImage> 来生成多个 HTML <img> 元素。它不会在视图构建期间运行，因此id 仍然是image。

如果您将<ui:repeat> 替换为<c:forEach>，那么它将按您的意图工作。 <c:forEach> 在视图构建期间运行，它会生成多个 <p:graphicImage> 组件，然后每个组件只会渲染一次。

<div id="imageGallery">
    <c:forEach items="#{countryPages_Setup.images}" var="image" varStatus="status">
        <tr>
            <td>
                <a href="javascript:void()" class="launchLink">
                    <p:graphicImage id="image#{status.index}"
                                    name="images/#{image}"
                                    width="100"
                                    height="100"
                                    rendered="#{countryPages_Setup.renderImages}"/>
                </a>
            </td>
        </tr>
    </c:forEach>
</div>

【讨论】：

【解决方案2】：

您不能在 id 属性中使用 el 表达式。它必须是静态的。 ui:repeat 本身会为您的 id 生成前缀。你不需要关心唯一性。

所以，例如，如果你有一个id="image"，那么生成的 id 是

somePrefix:0:image, somePrefix:1:image, ...

【讨论】：

是的，我在萤火虫中看到了它。我可以在图像中附加 id 0,1 吗？喜欢它成为image0，image1吗？以任何方式。如果 jsf 不可能，那么使用 jQuery ......实际上我希望当我的一个图像被点击时，我得到表单 image1、image2 的 id 属性。这里索引从 0 开始。但我想要从 1 开始的索引星。就像单击图像 somePrefix:0:image 然后我得到 id image1，实际上我正在使用图像库，其中我需要 image1、image2 形式的键。谢谢
当然你可以写一个 jQuery onclick 处理程序来构建所需的字符串。
嗯，好吧，我只是想确保在 JSF 方面是不可能的，比如使用 el。谢谢:)

【解决方案3】：

但是你可以在Javascript中使用变量，例如：

<h:graphicImage ... onclick="top.location.href='http://blabla.com/imageclicked?id=#{status.index}'"/>

您还可以将变量与事件处理程序一起使用（自 JSF 2.0 起）：

<h:commandLink ... action="#{myBean.imageClicked(status.index)"/>

但是您使用c:forEach 的循环可能会导致问题。请注意，JSTL 标记（以c: 开头的所有标记）与 JSF 不完全兼容。如果你有运气，那么它们会按预期工作。但无论如何都会减慢渲染引擎，因为页面会被 JSF 和 JSP 渲染引擎多次处理。

最好使用ui:repeat。

【讨论】：

【解决方案4】：

只需将<ui:repeat> 更改为<c:forEach>

【讨论】：