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

Question

我刚开始使用 Primefaces 程序。我想在 Datatable 中显示计时器。我想使用 setInterval 来显示 "real time chronometer"。我在属性 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 获得。 "Elapsed Time" 列得到一个 java 日期，如 "Mon Jan 21 15:26:40 CET 2019"。我不知道如何在列的每个单元格中显示实时计时器。如何将我的 java 日期设置为 setInterval 方法并在我不知道 html 的 ID 的单元格中显示 "result"？

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 调用来更新所有计时器，而不是对 Δ 列中的每个单元格进行一个调用。最后就看你想在这里完成什么了。

Answer 2

@Kukeltje 的解决方案，我使用了 Primefaces 扩展，但我不知道如何通过值启动我的计数器。我可以有一个日期对象或一个毫秒作为 long 类型，但我不知道如何使用这两个值之一可以作为我的计数器的起始值。

我将以下包含添加到我的 JSF 页面中：

xmlns:pe="http://primefaces.org/ui/extensions"

和我的 pom.xml 文件：

<dependency>
    <groupId>org.primefaces.extensions</groupId>
    <artifactId>primefaces-extensions</artifactId>
    <version>6.0.0</version>
</dependency>

所以 table :

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

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

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

    <p:column headerText="Δ">
        <pe:timer 
            style="color:grey;"
            forward="true" 
            format="HH:mm:ss"/>
    </p:column>

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

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

Display a chronometer, setInterval, in a primefaces datatable

javascript

primefaces

xhtml

setinterval