带有的不同 div 标签 id

Question

我试图根据支持 bean 的“deviceSel”中包含的项目数量动态生成 div 标签。对于每个 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 属性循环计数器，并用它作为 ID 值的后缀。

<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>

如果您仍在使用 Facelets 1.x，那么最好的选择是 JSTL ，它也以相同的方式支持 varStatus 属性，唯一的区别是它在视图构建时运行，而不是在视图渲染时运行，因此您将无法在另一个 UIData 组件中使用它。