Question

嘿，我刚刚开始Primefaces程序。我想在数据表中显示天文钟。我想使用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>

我想要的结果是一个数据表，其中最后两列显示的实时天文钟会减少和增加：

我的数据可用于javabean。 “经过的时间”列将获得一个Java日期，例如“ CET 2019年1月21日星期一15:26:40”。我不知道如何在该列的每个单元格中显示实时计时器。如何将我的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调用来更新所有天文钟，而不是在Δ列中为每个单元格都更新一次。最后，这取决于您要在这里完成什么。

Answer 2

@Kukeltje的解决方案，我使用了Primefaces扩展名，但是我不知道如何通过一个值来启动计数器。我可以使用date对象或毫秒类型的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>

表格如下：

<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

2 个答案: