javascript - 在 primefaces 数据表中显示计时器 setInterval

Question

我刚开始使用 Primefaces 程序。我想在 Datatable 中显示计时器。我想使用 setInterval 来显示“实时计时器”。我在属性 synopticBean.enteredTime 中得到了一个 Date 对象，我用它来开始计数。

但我不知道如何调用 JavaScript 函数来显示计时器。

<p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}">
    <p:column headerText="Family">
        <h:outputText value="#{synopticBean.family}" />
    </p:column>

    <p:column headerText="id">
        <h:outputText value="#{synopticBean.brNumber}" />
    </p:column>

    <p:column headerText="Target Time">
        <h:outputText value="#{synopticBean.referenceTime}" />
    </p:column>

    <p:column headerText="Δ">
        <h:outputText value="setInterval(function(){ alert("Hello"); }, 3000);" />
    </p:column>

    <p:column headerText="Elapsed Time">
        <h:outputText value="#{synopticBean.enteredTime}" />
    </p:column>
</p:dataTable>

我想要的结果是一个数据表，其中最后两列显示减少和增加的实时计时器:

我的数据可以通过 java bean 获得。 “已用时间”列获得一个 java 日期，例如“2019 年 1 月 21 日星期一 15:26:40 CET”。我不知道如何在列的每个单元格中显示实时计时器。如何将我的 java 日期设置为 setInterval 方法并在我不知道 html 的 id 的单元格中显示“结果”？

Answer 1

要将您上面的代码转换成一个工作示例，您可以这样做，

<p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}">
    <p:column headerText="Famille">
        <h:outputText value="#{synopticBean.family}" />
    </p:column>

    <p:column headerText="BT">
        <h:outputText value="#{synopticBean.brNumber}" />
    </p:column>

    <p:column headerText="Temps cible">
        <h:outputText value="#{synopticBean.referenceTime}" />
    </p:column>

    <p:column headerText="Δ">
        <script type="text/javascript">
        //<![CDATA[
            setInterval(function(){ console.log("Hello"); }, 3000);
        //]]>
        </script>
        <!-- You can add any HTML code needed to display the chronometer here -->
    </p:column>

    <p:column headerText="Temps Accumulé">
        <h:outputText value="#{synopticBean.enteredTime}" />
    </p:column>
</p:dataTable>

如评论中所述，您不为此使用 h:outputText value - 这是为了获取支持 bean 值。

另请注意，这将为 Δ 列中的每个单元格调用 setInterval - 我想这就是您想要的。只需将 console.log 调用替换为更新您的计时器的调用，它就应该可以工作。

如旁注 - 可能更喜欢只用一个 setInterval 调用来更新所有计时表，而不是为 Δ 列中的每个单元格调用一个。最后取决于你想在这里完成什么。