所属产品: Mingcedar Studio DESIGNER

Table：数据绑定、模板复用与筛选 | Mingcedar Studio

在同一页面依次配置固定数据、页面数组、实时 Tag、模板实例、区域和设备筛选，最后导出筛选结果。

首次发布 2026-10-25T12:48:42.597529657Z 最近更新 2026-10-26T19:56:55.612940342Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="recipe-parameterized-table">操作教程: Table：数据绑定、模板复用与筛选</h2>

在同一页面依次配置固定数据、页面数组、实时 Tag、模板实例、区域和设备筛选，最后导出筛选结果。

<h3 id="recipe-parameterized-table-item-1">准备：创建页面与 Table</h3>

需已安装并授权插件，且能在 Mingcedar 运行画面。按编号操作；每组配置完成后 Save、保存 PPT，用 MX Design → Export → Export HTML 更新画面包并重新打开。

<ul>

<li>步骤 1–2 无需 PLC。步骤 3 使用可读取的数值 Tag：PLC_LINE01.PUMP01.SPEED、PLC_LINE01.PUMP02.SPEED；步骤 4 再增加 PLC_LINE02 下的同名两点。</li>

<li>Table name 是显示标题。引号表示固定文字；裸填文字时，运行时会先尝试将其作为变量或表达式求值。组件名称用于 ExportTable 定位，见步骤 4D。</li>

</ul>

<ol>

<li>在 PowerPoint 新建空白幻灯片。打开 MX Design → Page → Nav Path，将该页 Page Code 设为 pump_table，点击 Save。</li>

<li>打开 MX Design → Templates → Library，选择内置 Table 卡片，点击 Insert template。选中插入的整个 Table 组合，点击 Templates → Edit Instance。</li>

<li>在 Template Edit 的 Table name 中填写下方代码，保留双引号；继续完成步骤 1A、1B 后保存。</li>

</ol>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Table → Table nameJavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Table → Table name">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>"Pump speeds"</code></pre></div>

<li><a href="/ppt/manual/windows-install/">安装与授权</a></li>

<li><a href="/ppt/manual/export-and-publish-screen-package/">导出并发布画面包</a></li>

</ul>

</article>

<h3 id="recipe-parameterized-table-item-2">1A. 固定表头：在 Headers 填一维数组</h3>

在同一 Template Edit 窗口的 Headers 中粘贴下方数组。Table text ID 留空，Header text IDs 填 []。继续设置 Rows。

<ul>

<li>数组中的三个字符串依次对应三列标题；不要在整个数组外再加引号。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Table → HeadersJavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Table → Headers">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>["Pump", "Area", "Speed"]</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-3">1B. 固定数据：在 Rows 填二维数组</h3>

在 Rows 中粘贴下方二维数组。每个内层数组是一行，每项对应一个单元格。点击 Save，导出并在 Mingcedar 打开 pump_table。

<ul>

<li>Column layout 各列留空时均分宽度。手动设置时，三列分别填 40、20、40；如果显示单行列宽输入框，则填 40,20,40。Font size (px) 填 14。</li>

<li>Table 显示普通文本，超出高度可滚动；没有内置分页、行内按钮或单元格编辑。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Table → RowsJavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Table → Rows">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>[["PUMP01", "A", "1200 rpm"], ["PUMP02", "B", "900 rpm"]]</code></pre></div>

完成标志 表格显示三列、两行：PUMP01 / A / 1200 rpm 和 PUMP02 / B / 900 rpm。

</article>

<h3 id="recipe-parameterized-table-item-4">2A. 在 Page Script 定义数组</h3>

在 pump_table 打开 MX Design → Scripts → Page Script，点击 New，Name 填 table-data，Code 填下方完整代码，勾选 Enabled 并 Save。后续均修改此文档。

<ul>

<li>页面变量只在当前页使用；另一个页面需要自己的 Page Script。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Page Script → table-dataJavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Page Script → table-data">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>var pagePumpRows = [

];</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-5">2B. Rows 绑定页面变量</h3>

选中 Table，打开 Templates → Edit Instance，将 Rows 替换为下方变量名，不加引号。点击 Save，重新导出并打开页面。

<ul>

<li>=pagePumpRows 也可显式求值；"pagePumpRows" 是字符串，不会读取数组。</li>

<li>数组保存的是赋值时的数据。即使在 Page Script 顶层用 ReadTagDouble 构造数组，Tag 更新也不会重建它；实时数据使用步骤 3 的函数。</li>

</ul>

完成标志 表格仍显示步骤 1 的两行数据。

<div class="doc-step-troubleshooting">如果结果不一致<ul>

<li>如果为空，检查脚本文档是否 Enabled、是否已保存到同一页、变量名大小写是否一致。</li>

</ul></div>

</article>

打开 pump_table 的 Page Script，选中 table-data，将 Code 完整替换为下方函数并保存。两处完整 Tag 名称须与项目一致。

<ul>

<li>函数每次调用都重新读取 Tag；第二个参数 0 是读取失败时的回退值。步骤 4 将增加质量判断，以区分不可用数据和真实零值。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Page Script → table-dataJavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Page Script → table-data">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>function livePumpRows() {

return [

["PUMP01", "A", ReadTagDouble("PLC_LINE01.PUMP01.SPEED", 0)],

["PUMP02", "B", ReadTagDouble("PLC_LINE01.PUMP02.SPEED", 0)]

];

}</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-7">3B. Rows 绑定函数调用</h3>

打开 Table 的 Edit Instance，将 Rows 替换为下方调用并保存。导出后，在 Mingcedar 修改或观察 PLC_LINE01.PUMP01.SPEED 的值变化，并核对第一行。

<ul>

<li>Rows 填调用式；函数定义保存在 Page Script。刷新取决于宿主数据更新，不设固定采样周期。</li>

</ul>

完成标志 运行时收到新数据后，第一行 Speed 更新；第二行仍显示 PUMP02 的值。

<div class="doc-step-troubleshooting">如果结果不一致<ul>

<li>不更新时先核对 Tag 名、权限和质量，再确认 Rows 仍绑定函数，而不是上一步的数组快照。</li>

</ul></div>

</article>

<h3 id="recipe-parameterized-table-item-8">4A. 定义共享产线数据函数</h3>

将 table-data 的 Code 完整替换为下方代码并保存。函数读取四个明确列出的 Tag，再按产线、区域和设备筛选。保留 tableArea 和 pumpFilter 的默认值，继续配置步骤 4B–4D。

<ul>

<li>四个 Tag 均须可读取。质量不是 good 时显示 Unavailable。</li>

<li>tableArea="ALL" 表示全部区域；pumpFilter="" 表示全部设备。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Page Script → table-dataJavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Page Script → table-data">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>var tableArea = "ALL";

var pumpFilter = "";

function buildPumpRows(plc) {

if (plc !== "PLC_LINE01" && plc !== "PLC_LINE02") {

throw new Error("Unsupported line");

}

if (["ALL", "A", "B"].indexOf(tableArea) < 0) {

throw new Error("Unsupported area");

}

var pumps = [

{ plc: "PLC_LINE01", area: "A", pump: "PUMP01",

speed: ReadTagDouble("PLC_LINE01.PUMP01.SPEED", 0),

good: ReadTagQualityGood("PLC_LINE01.PUMP01.SPEED") },

{ plc: "PLC_LINE01", area: "B", pump: "PUMP02",

speed: ReadTagDouble("PLC_LINE01.PUMP02.SPEED", 0),

good: ReadTagQualityGood("PLC_LINE01.PUMP02.SPEED") },

{ plc: "PLC_LINE02", area: "A", pump: "PUMP01",

speed: ReadTagDouble("PLC_LINE02.PUMP01.SPEED", 0),

good: ReadTagQualityGood("PLC_LINE02.PUMP01.SPEED") },

{ plc: "PLC_LINE02", area: "B", pump: "PUMP02",

speed: ReadTagDouble("PLC_LINE02.PUMP02.SPEED", 0),

good: ReadTagQualityGood("PLC_LINE02.PUMP02.SPEED") }

];

return pumps.filter(function (pump) {

return pump.plc === plc &&

(tableArea === "ALL" || pump.area === tableArea) &&

(pumpFilter === "" || pump.pump === pumpFilter);

}).map(function (pump) {

return [pump.pump, pump.area,

pump.good ? pump.speed.toFixed(0) + " rpm" : "Unavailable"];

});

}</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-9">4B. 设置模板标题</h3>

打开 Table 的 Edit Instance，将 Table name 替换为下方字符串，Headers 保持步骤 1 的三列。<PLC> 是模板占位符；实例配置后替换为产线编码。继续步骤 4C 后保存。

</article>

<h3 id="recipe-parameterized-table-item-10">4C. Rows 传入当前实例的 PLC</h3>

将 Rows 替换为下方调用，点击 Save。<PLC> 尚未替换，此时不要导出；先完成步骤 4D 的模板保存和实例配置。

<ul>

<li>保留占位符两侧的引号，确保替换后的产线编码作为字符串传入函数。</li>

</ul>

</article>

<h3 id="recipe-parameterized-table-item-11">4D. 保存模板并插入两份实例</h3>

将当前 Table 保存为模板，再插入两份已配置的实例。以下步骤不需要添加外层组合。

<ul>

<li>模板保存表格配置，不包含页面的 table-data 脚本文档。插入其他页面时，需同时在目标页准备共享函数和变量。</li>

</ul>

<ol>

<li>选中整个 Table，打开 Templates → Library，点击 Save selection。在 Template name 填 Pump speed table，Group 保持默认；确认 Captured variables 中有 PLC，点击 Save。名称已存在时使用其他唯一名称。</li>

<li>关闭模板库，删除页面上仍含 <PLC> 的原始 Table。重新打开 Library，选择刚保存的 Pump speed table，点击 Insert template 两次。</li>

<li>分别选中新实例根组，打开 Templates → Edit Instance；第一份 PLC 填 PLC_LINE01，第二份填 PLC_LINE02，不加引号，每份配置后点击 Save。</li>

<li>点击 MX Design → Behaviors → Browse。在组件树中右键对应的 Table 节点，选择 Rename Component，分别命名 Line01Table、Line02Table。若存在外层组合，应展开后命名实际 Table。保存 PPT 并重新导出。</li>

</ol>

完成标志 Line01Table 显示 PLC_LINE01 的两台泵，Line02Table 显示 PLC_LINE02 的两台泵；标题分别包含对应产线编码。

<div class="doc-step-troubleshooting">如果结果不一致<ul>

<li>两份数据相同先查实例 PLC；函数找不到先查当前页脚本；仍含 <PLC> 先查 Captured variables 与实例根组。</li>

</ul></div>

</article>

<h3 id="recipe-parameterized-table-item-12">5A. 从入口页传 area 参数</h3>

新建入口页，画矩形按钮并标注“B 区”。在 MX Design → Behaviors → Browse 将 Click Script 拖到该组件，双击行为并填入下方代码，Save。后续按钮沿用此步骤。

<ul>

<li>完成步骤 5B 后，通过 Export HTML 导出同时包含入口页和 pump_table 的完整画面包；单页导出不包含另一个页面。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → 入口页 B 区按钮JavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Click Script → 入口页 B 区按钮">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>return hqVisuDesigner.openPage("pump_table", {

parameters: [{ key: "area", value: "B" }]

});</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-13">5B. 目标页校验并读取 area</h3>

回到 pump_table，打开 Page Script → table-data。仅将 var tableArea = "ALL"; 替换为下方代码，保留 pumpFilter 和整个 buildPumpRows 函数，点击 Save。导出后在 Mingcedar 打开入口页，点击“B 区”。

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Page Script → table-dataJavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Page Script → table-data">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>var tableArea = GetPageParameter("area", "ALL");

if (["ALL", "A", "B"].indexOf(tableArea) < 0) {

throw new Error("Area must be ALL, A or B");

}</code></pre></div>

完成标志 从 B 区入口打开后，两份表格都只显示各自产线的 PUMP02 / B；不传 area 时默认 ALL。

<div class="doc-step-troubleshooting">如果结果不一致<ul>

<li>area 为 C、空字符串或其他未知值时，脚本停止初始化。修正入口参数后重新打开目标页。</li>

</ul></div>

</article>

<h3 id="recipe-parameterized-table-item-14">6A. 在当前页切换区域</h3>

在 pump_table 绘制“B 区”按钮，按步骤 5A 添加 Click Script，填写下方代码并保存。重新导出后点击该按钮。

<ul>

<li>设备筛选与区域筛选同时生效；没有符合两项条件的设备时显示空表。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → 当前页 B 区按钮JavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Click Script → 当前页 B 区按钮">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>hqVisuDesigner.writeVariable("tableArea", "B");</code></pre></div>

完成标志 未设置设备筛选时，两份表格均只显示 B 区的 PUMP02。

</article>

在 pump_table 添加“全部区域”按钮，将下方代码放入 Click Script 并保存。它将页面变量 tableArea 改为 ALL。

<ul>

<li>按钮只修改当前页变量。重新打开页面时，tableArea 仍由入口的 area 参数初始化。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → 全部区域按钮JavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Click Script → 全部区域按钮">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>hqVisuDesigner.writeVariable("tableArea", "ALL");</code></pre></div>

完成标志 未设置设备筛选时，点击“全部区域”后两份表格各显示两行。

</article>

<h3 id="recipe-parameterized-table-item-16">6C. 切换整份数组数据</h3>

在 pump_table 插入独立 Table，Table name 填 "Inspection status"，Headers 使用步骤 1A 数组。新建 Page Script 文档 table-status，粘贴步骤 2A 完整数组代码；保留 table-data。新表 Rows 填 pagePumpRows，再为“切换检查状态”按钮配置下方 Click Script，保存。

<ul>

<li>此按钮替换 pagePumpRows 的数据，不修改两份实时表格的函数绑定。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → 切换检查状态按钮JavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Click Script → 切换检查状态按钮">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>hqVisuDesigner.writeVariable("pagePumpRows", [

]);</code></pre></div>

完成标志 点击后，“检查状态”表格分别显示 Inspection due 和 Inspection complete。

</article>

<h3 id="recipe-parameterized-table-item-17">7A. 组合 Input 实现设备筛选</h3>

在 pump_table 打开 Templates → Library，选择 Input 并点击 Insert template。在 Behavior Browser 右键该实例根节点，用 Rename Component 命名为 Pump filter。打开 Templates → Edit Instance，将 Input mode 设为 Plain Input 并保存。添加“应用设备筛选”按钮，Click Script 填下方代码。

<ul>

<li>Input 提供筛选文本，按钮更新页面筛选条件，Table 显示结果。修改设备设定值的流程见 Input 教程。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → 应用设备筛选按钮JavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Click Script → 应用设备筛选按钮">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>var pump = String(template.getValue("Pump filter")).trim().toUpperCase();

if (["", "PUMP01", "PUMP02"].indexOf(pump) < 0) {

throw new Error("Enter PUMP01, PUMP02 or leave blank");

}

hqVisuDesigner.writeVariable("pumpFilter", pump);</code></pre></div>

完成标志 重新导出后，先点击“全部区域”；在输入框填写 PUMP01，再点击“应用设备筛选”，两份表格各显示一行 PUMP01。填写 pump02 时按大写 PUMP02 筛选。

<div class="doc-step-troubleshooting">如果结果不一致<ul>

<li>输入 PUMP99 时保留上一次筛选；空白输入清除设备筛选。找不到输入框时核对实例名 Pump filter。</li>

</ul></div>

<li><a href="/ppt/manual/recipe-page-parameter-input/">继续学习：传参驱动 Input 与提交</a></li>

</ul>

</article>

<h3 id="recipe-parameterized-table-item-18">7B. 单独清除设备筛选</h3>

添加“清除设备筛选”按钮，将下方代码放入 Click Script 并保存。该按钮清除 pumpFilter，不修改输入框中尚未应用的文本。

<ul>

<li>区域筛选继续生效。点击“B 区”后清除设备筛选，两份表格恢复各自的 PUMP02。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → 清除设备筛选按钮JavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Click Script → 清除设备筛选按钮">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>hqVisuDesigner.writeVariable("pumpFilter", "");</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-19">8. 导出当前筛选结果</h3>

为“导出 LINE01”按钮配置下方 Click Script，确认实际 Table 组件名为 Line01Table（步骤 4D）。保存并导出，在运行页依次点击“B 区”“清除设备筛选”“导出 LINE01”。

<ul>

<li>导出包含当前筛选下的全部行，包括滚动区域外的行；导出时会重新读取数据，因此可能比上一帧显示值更新。</li>

<li>文件保存位置和完成状态由浏览器决定。</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → 导出 LINE01 按钮JavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: Click Script → 导出 LINE01 按钮">复制代码</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>ExportTable("Line01Table", "line01-filtered.csv", "csv");</code></pre></div>

完成标志 浏览器下载 line01-filtered.csv，包含 Pump、Area、Speed 三列表头以及 PLC_LINE01 的 PUMP02 当前数据。

<div class="doc-step-troubleshooting">如果结果不一致<ul>

<li>未找到表格时，核对组件名 Line01Table；Table name 显示标题和外层组合名不能代替实际 Table 组件名。</li>

</ul></div>

</article>

</div>