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

我刚开始一个Primefaces项目。我想在

数据表中显示计时器

。我想使用

setInterval

显示“实时计时器”。我在属性

synopticBean.enteredTime

中得到了一个日期对象，用于开始计数

但是我不知道如何调用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日期，如“Mon Jan 21 15:26:40 CET 2019”。我不知道如何在柱的每个单元中显示实时计时器。如何将java日期设置为

setInterval

方法，并在我不知道html id的单元格中显示“结果”？

要将上述代码转换为工作示例，请执行以下操作

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

——这是为了获取支持bean值

还要注意，这将为

Δ

列中的每个单元格调用

setInterval

——我想这就是您想要的。只需将

控制台.log

调用替换为更新计时器的调用，它就会工作

---

作为旁注-最好只使用一个

setInterval

调用来更新所有计时器，而不是在

Δ

列中为每个单元格调用一个。最后，这取决于你想在这里完成什么。

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

我将以下内容添加到我的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>

org.primefaces.extensions
素数面扩展
6.0.0

因此，表格：

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

我认为您需要退回到jsf开发，或者至少从一个没有数据表的更简单的测试开始，因为

已经不正确了。不能将javascript放入值属性中，它们用于固定字符串或EL。我不确定你想在那里显示什么，因为

setInterval

返回一个id，而不是interval和afaik，你无法在下一个激发之前获得“剩余”时间。有效地，在普通jsf

h:datatable

或单个

h:outputText

中，你也会遇到同样的问题，所以问题不存在（或xhtml）相关…是的，setInterval返回Id。我只想在数据表的一个单元格中显示一个计时器。我希望计时器每秒钟更新一次。下一次触发之前是什么意思？setInterval使javascript函数以特定的间隔执行。“下一次触发之前的剩余时间”是rem在下一次执行函数之前等待一段时间（timers'fire'，一个常用的表达式，很抱歉没有说清楚）。这段时间是初始的完整间隔时间，但会减少到0。如果这是您想要显示的时间，您不能（至少不太容易，Javascript限制，与JSF或PrimeFaces无关）。但你可以在启动计时器时启动一个额外的javascript倒计时计时器。只需谷歌搜索…未解决。我不知道如何显示计数器。我的问题之一是我没有每个单元格的“id”，因此我不知道如何为列的每个单元格设置计数器。我得到的印象是，OP实际上想取消显示计时器In每个

Δ

单元格。通常是一个真正的javascript计时器（或计时器）（因此基本的javasscript

setTimeout/setInterval

没有内置启动/停止功能。OP需要明确这一点，并进一步研究。可能是一个完整的解决方案（特别是如果OP还想在服务器端启动某些东西）。这些基础知识更多地是OP I thinkYes的“问题”，这是另一种途径。如果有人只想轮询服务器端数据（如计时器的新值），则使用PrimeFaces中已有的

p:poll

组件可能是另一种途径.一如既往，这取决于要求。Kukeltje是对的。我想在每个Δ单元格上显示一个计时器。它将是一个h:outputText值，而不是一个datatable单元格。此时我不知道如何显示带有日期-时间开始的计时器，并在primefaces datatable中显示计时器。如果您想在每个单元格，只需在上面的

Δ

列下直接插入显示所需的相应HTML/Javascript，就像插入setInterval一样。

h:outputText

用于输出格式化文本-您不能/不应该使用它来输出希望浏览器解释的HTML/Javascript。