Question

我正在尝试动态生成div标签，具体取决于支持bean中'deviceSel'中包含的项目数。对于每个div标签，我通过调用JS文件中存在的'generateSparkLine'函数来填充它 - 'Reports_Cap'。我需要传递iv标签的id，以便在相应的'div'标签中填充数据。

在我当前的代码中，div使用相同的id创建，因此，相同的部分将被填充。有人可以帮助我从JSF文件动态分配id到div标签吗？另外，div标签不允许我使用“onload”事件，这就是我使用“onclick”的原因。我怎么能去修改它以便在页面打开时填充div标签？

<div>
    <ui:repeat var="deviceSel" value="#{reportViewproto.selectedDevices}">
        <h:outputText value="#{deviceSel}" />
        <div id="chartDiv" style="width:600px; height:400px;" onclick="Reports_Cap.generateSparkLine('chartDiv', 'generateSparkLine')"></div>
        <br />
   </ui:repeat>
</div>

Answer 1

有几种方式。

如果JS generateSparkLine()函数在您的控制之下并且您实际使用id通过ID从文档中获取元素，那么只需要删除id属性并通过

替换onclick

onclick="Reports_Cap.generateSparkLine(this, 'generateSparkLine')"

这样您就不需要ID了。您已将该元素作为函数中的第一个参数。

或如果它不在您的控制之下和/或您没有使用它来获取ID 和的元素，那么您正在使用Facelets 2.x，然后通过varStatus的{{1}}属性引入一个循环计数器，并用它后缀ID值。

<ui:repeat>

如果您仍然使用Facelets 1.x，最好的选择是JSTL <div> <ui:repeat var="deviceSel" value="#{reportViewproto.selectedDevices}" varStatus="loop"> <h:outputText value="#{deviceSel}" /> <div id="chartDiv_#{loop.index}" style="width:600px; height:400px;" onclick="Reports_Cap.generateSparkLine('chartDiv_#{loop.index}', 'generateSparkLine')"></div> <br /> </ui:repeat> </div>，它同样支持<c:forEach>属性，唯一的区别在于它在视图构建期间运行，而不是在视图渲染时间内，因此您将无法在另一个varStatus组件中使用它。

使用<ui：repeat> </ui：repeat>的不同div标签ID

1 个答案: