表格模板:先定列头和行,再决定 Rows 写数组、变量名还是函数名 | HQ VISU Designer

table 模板适合统一展示规则化的二维数据。它通过表头、行数据和数据来源驱动内容更新,避免逐个单元格手工维护。

模板方法Table
Table

表格模板:先定列头和行,再决定 Rows 写数组、变量名还是函数名

table 模板适合统一展示规则化的二维数据。它通过表头、行数据和数据来源驱动内容更新,避免逐个单元格手工维护。

表格模板有哪些关键字段

最常用的是 Table Name、Table Text ID、Headers、Header Text IDs、Rows。Headers 控表头显示,Rows 控内容,Text ID 则适合和多语言或统一文案体系衔接。

Headers 和 Rows 字段填写规则

直接写数组时,应按 JavaScript 数组写法填写,数组中的文字需要加引号;引用页面脚本里已经准备好的变量或函数时,只填名称本身,不加引号,也不要加括号。

  • 直接表头:['设备', '状态']
  • 直接行:[['Pump 1', 'Running'], ['Pump 2', 'Stop']]
  • 引用变量:Rows 填 tableRows
  • 引用函数:Rows 填 buildTableRows,不写 buildTableRows()
Table Rows 写法:数组、变量名或函数名

Rows 既可以直接写数组,也可以写变量名,还可以写函数名。推荐把稍复杂的数据放在 Page Script 里准备好,然后在 Rows 配置框里填变量名 tableRows。

  • 直接数组适合快速静态表格
  • 变量名适合页面脚本提前准备数据
  • 函数名适合需要运行时重新计算表格数据的场景
var tableRows = [
  ["Pump 1", "Running"],
  ["Pump 2", "Stop"]
];

// Table 模板的 Rows 配置框填:tableRows
表格中接入 Tag 结果

可以。推荐在 Page Script 里调用 ReadTagString / ReadTagInteger / ReadTagDouble,把结果整理成二维数组,再让 table 模板按变量名渲染。这样表格层只负责显示,脚本负责读 Tag 和组织数据。

var tableRows = [
  ["Pump 1", ReadTagString("Device.TAGNAME", "")],
  ["Pump 2", ReadTagString("Device.TAGNAME_2", "")]
];

// Table 模板的 Rows 配置框填:tableRows
结构化行数据接入

当行数据来自后端、脚本或聚合结果时,建议由运行端或页面脚本整理为 JSON Tag,再在 Page Script 中使用 ReadTagJson("Device.ReportRows", []) 读取,最后把结果转换为 Table 需要的二维数组。

表头和多语言

Headers 适合直接声明当前表头;Header Text IDs 适合接入统一语言键。项目需要多语言时,优先维护稳定 Text ID,再把默认表头作为兜底显示。

表格常见错法

Rows 配置框只适合放数组、变量名或函数名;较复杂的 Tag 读取、判断和格式化逻辑应放在 Page Script 中,保持表格配置清晰。

表格模板的高价值场景

当页面需要维护多行、多列内容,且这些内容未来会随配置、Tag 或脚本变化时,表格模板可以显著降低维护成本。它特别适合设备清单、诊断列表、参数表和状态列表。

表格模板实例
表格模板实例

表格模板适合把列头、行样式和数据来源分开管理,避免每个单元格都靠手工维护。