Layui如何实现在表格头部工具栏添加一个动态更新的系统时间显示-Layui教程-PHP中文网

因为Layui表格toolbar初始化后不自动更新，new Date()只执行一次；需用setInterval定时更新DOM中预置的时间容器，并注意定时器清理以防内存泄漏。

为什么直接在 `toolbar` 配置里写 `new Date()` 不生效

layui 的表格 toolbar 是在初始化时一次性渲染的，它不支持运行时自动更新的 js 表达式。你写 toolbar: '<div>' + new date().tolocaletimestring() + '</div>'，只会冻结初始化那一刻的时间，后续不会刷新。

用 `layui.laydate.render` 之外更轻量的方案：定时器 + DOM 直接更新

不需要引入额外模块，只需在表格渲染完成后，找到工具栏容器，用 setInterval 定期更新其中的时间文本。关键点是定位准确、避免重复绑定、注意销毁时机。

表格初始化后，用 table.on('init') 或 done 回调获取工具栏 DOM（通常为 .layui-table-tool 下的 .layui-table-tool-self 或自定义容器）
给时间区域加一个唯一 id 或 class，比如 <div id="sys-time-display"></div>，方便精准操作
启动定时器前先清掉已有定时器（防止多次初始化导致多个 setInterval）
建议使用 toLocaleTimeString('zh-CN', { hour12: false }) 保证格式统一且无 AM/PM

<pre class="brush:php;toolbar:false;">let timeInterval = null;
table.render({
  elem: '#demo',
  url: '/api/data',
  toolbar: '<div class="layui-btn-container">
<button class="layui-btn">操作</button><div id="sys-time-display"></div>
</div>',
  done: function() {
    // 清除旧定时器
    if (timeInterval) clearInterval(timeInterval);
    // 立即显示一次，再启动
    document.getElementById('sys-time-display').innerText = new Date().toLocaleTimeString('zh-CN', { hour12: false });
    timeInterval = setInterval(() => {
      document.getElementById('sys-time-display').innerText = new Date().toLocaleTimeString('zh-CN', { hour12: false });
    }, 1000);
  }
});

如果用了 `toolbar`

模板字符串，要注意 HTML 转义和引号嵌套

模板里混写 JS 变量容易因单双引号冲突或未转义导致语法错误，尤其是含中文或特殊字符时。最稳妥的方式是把时间容器单独写死在 HTML 中，而不是拼在字符串里。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

错误写法：toolbar: '<div>时间：' + new Date().toLocaleTimeString() + '</div>' —— 初始化就固化，且引号易错
推荐写法：HTML 中预置空容器，如 <div id="sys-time-display"></div>，JS 里只负责更新内容
若必须用字符串模板，用反引号并确保内部单引号闭合：toolbar: `<div><span id="sys-time-display"></span></div>`