博客 · Custom Web Control
8 款最佳数据表格 Custom Web Control：适用于 WinCC Unified 和 WinCC V8（免费）
数据表格 Custom Web Control 到底哪款好用？2026 年 11 月初，我们把 HMIx 目录里所有数据表格、日志和 SQL 表格 Custom Web Control 挨个打开了一遍——一共 13 个候选——凑近看了每一张预览图，读完了每一份产品说明，最后留下 8 款：放进 WinCC Unified 或 WinCC V8 画面里毫不犹豫的那种。全部免费，全部是 CWC ZIP 包，而且产品说明里都写明了属性名，你事先就知道要绑定什么。
- Custom Web Control
- CWC
- WinCC Unified
- WinCC V8
- TIA Portal
- 数据表格
- SQL Server
- SCADA 控件
速览清单
时间紧？直接跳到你需要的那款表格。
为什么值得用数据表格 Custom Web Control
每个 HMI 项目迟早都要来一张表格。本班的生产订单、最近二十个批次、带合格或不合格结论的质量检查、检测重量，还有厂长想“像 Excel 那样”放在画面上的一条 SQL 查询。仪表和趋势告诉操作员过程现在怎么样；数据表格告诉他发生了什么——一条一条，带着名称、时间和数值，随时可查。
WinCC 的标准对象都是为特定数据设计的：报警、趋势、参数集。当你想要一张装自己记录的表格，带搜索、分页、状态颜色，还能让操作员点选某一行时，数据表格 Custom Web Control（CWC）就是捷径。CWC 是一个小型 Web 应用：HTML、CSS 和 JavaScript 打包成一个 ZIP，由 WinCC Unified（TIA Portal）和 WinCC V8 在画面中运行。表格类 CWC 通常通过 dataJson 或 recordsJson 这类属性，以 JSON 字符串的形式接收行数据，并触发 RowSelected 之类的事件，供你的 HMI 脚本响应。
什么样的数据表格 Custom Web Control 才值得下载
上榜单之前，先亮出我们的标尺。下面是我们看重的几点，大致按“缺了它有多让人抓狂”排序：
- 一眼看得懂。 表头清楚，数字对齐，单位和状态颜色都有意义。要操作员费劲破译的表格，最后谁都不会看。
- 数据量可控。 有搜索、分页或行数上限（
rowsPerPage、pageSize、maxDisplayedRows），画面才能保持流畅，也没人需要在 12 英寸面板上翻一千行。 - 数据约定要干净。 行数据放在一个有文档的属性里，列布局放在另一个属性里，你就清楚脚本到底要写什么。
- 交互要有去处。 行点击事件、刷新请求或 CSV 导出，能把一张列表变成一件工具。只写了属性数量的说明，只能进荣誉提名。
- 表格选对用途。 历史日志、SQL Server 编辑器、质量日志、实时变量列表、批次浏览器、导出器、检测日志和全能表格：每种用途我们只选一位冠军。
我们是怎么挑的（以及我们没做什么）
2026 年 11 月初，我们在 HMIx 目录中搜遍了所有以“行和列”为核心的免费 Custom Web Control：数据表格、日志、SQL 表格、CSV 导出器和记录浏览器。那些只是碰巧带一张表格的完整应用，比如库存或批次管理器，留到以后再说。每个候选都看了它的真实预览图（不是目录里那张顶着大标题的封面），并读了产品说明，看它在文档里列出了哪些属性、事件和方法。下载量只在难分高下时才拿来参考。
产品说明里没写属性名的控件，只能进荣誉提名。另有四个直接淘汰：三个的图库里只有控件图标，根本没东西可评；第四个单元格里的文字几乎看不见。也得先说句实话：我们评判的是预览图和文档，并没有把这些控件放进真实的 Runtime 里跑过，也没有连过真实的数据库。它们都是用 AI 生成的，每个产品页面都会提醒你：上生产之前，先在你自己的 TIA Portal 项目里测试。
8 款最佳数据表格 Custom Web Control，逐一点评
每一款都附上真实预览图、我们喜欢的地方、需要留意的地方，以及产品说明中列出的属性，最后是目录缩略图：点击即可打开产品页面，免费下载这款表格。
01综合最佳
Dynamic Data Table
如果只能留一个，那就是它。一张沉稳的深色表格，顶部是“Search all columns...”搜索框，每条记录的日期和时间用蓝色等宽字体显示，后面是五个过程列：液位、泵转速、阀门开度、温度和压力。底部是“Page 1 of 2 (20 records)”和一个小巧的分页器。没有花哨的东西，一切都在你预料的位置；2026 年 11 月它有两条五星评价。
它是为历史数据而生的。据产品说明，它自己生成日期和时间列，再加上五个可配置的过程列，在 columnSettings 中定义，通过 historicalData 喂数据。rowsPerPage 设置分页，searchPlaceholder 和 noDataMessage 负责文字，backgroundColor 匹配你的主题。RowSelected 和 PageChanged 让脚本可以响应，exportToCsv 方法则把筛选后的行下载下来做报表。
我们喜欢的
- 搜索、分页和 CSV 导出集于一个整洁的控件
- 日期和时间替你处理好，数值分列清楚
- 接口简短：两个 JSON 属性就能搞定大部分工作
需要留意
- 据产品说明只有五个过程列：记录更宽的话请选别的表格
- 预览图里没有导出按钮：请用你自己的按钮调用
exportToCsv
可绑定属性
- historicalData
- columnSettings
- rowsPerPage
- searchPlaceholder
- noDataMessage
- backgroundColor
02SQL Server 记录首选（增、改、删）
Table SQL Server
给天天和数据库打交道的人准备的。浅色工具栏上有搜索框、蓝色的“Add New”、“Edit”、红色的“Delete”和一个刷新按钮，下面是一张可排序的表格，列有 ID、时间戳、变量名、数值、单位、状态和操作员。页脚一侧写着“SQL Server: Connected to [Production_DB]”，另一侧是“No row selected”。2026 年 11 月它有四条评价、平均 4.75 星，是本文评价最多的表格。
产品说明列出了 21 个属性，写明了其中 20 个。SQL 部分写得很明白：sqlSelectQuery、sqlInsertQuery、sqlUpdateQuery 和 sqlDeleteQuery 存放查询模板，primaryKeyColumn 标识行，连接方式要么是 dbConnectionString，要么是 dbServer、dbDatabase、dbUser 和 dbPassword。showAddButton、showEditButton 和 showDeleteButton 决定操作员能做什么，按钮文字也可以单独设置。这些按钮会向你的 WinCC 脚本触发 AddRequested、EditRequested、DeleteRequested 和 RefreshRequested，而 setTableData、setConnectionStatus 和 clearSelection 让脚本可以写回。
我们喜欢的
- 完整的增、改、删流程，每个操作都有事件
- 按钮可以按画面或用户角色隐藏
- 本文评价最多的表格
需要留意
- 在承诺实时 SQL 之前，先读附带的文档，弄清查询在你的架构里到底在哪儿执行；也千万别把数据库密码放进操作员能读到的变量里
- 预览图里所有文字都是斜体，“Search records...”顶部被截断，“Add New”换了行，操作员列也跑出了边缘
可绑定属性
- sqlSelectQuery
- sqlInsertQuery
- sqlUpdateQuery
- sqlDeleteQuery
- primaryKeyColumn
- dbConnectionString
- dbServer
- dbDatabase
- dbUser
- dbPassword
- showAddButton
- showEditButton
- showDeleteButton
- addLabel
- editLabel
- deleteLabel
- searchPlaceholder
- connectionStatusText
- noSelectionText
- backgroundColor
03质量控制日志首选
Quality Control Log
榜单上颜值最高的表格。顶部四张汇总卡片：Total Checks 20、Passed 11（55 %）、Failed 4（20 %）和 Warnings 5（25 %），各有各的颜色。下面是一张信息密集的表格：从 B-1024 开始的批次号，每个参数都带自己的图标（芯部温度、密封压力、灌装量、pH 值……），带单位的数值，一个发光的 OK、WARNING 或 FAIL 徽标，时间，以及用圆形姓名缩写头像表示的操作员。
产品说明列出了 10 个属性，写明了其中 9 个：title 和 subtitle，卡片标签 totalLabel、passedLabel、failedLabel 和 warningsLabel，用于搜索和状态筛选的 showFilters 与 searchPlaceholder，以及 backgroundColor。OnRowSelection 可以用来跳转到批次详情画面，clearSearch 和 setFilter 方法则让脚本一步直达不合格项。
我们喜欢的
- 汇总计数器和详细日志集于一个控件
- 状态徽标醒目，但不刺眼
- 内置搜索和状态筛选
需要留意
- 产品说明没写承载记录的是哪个属性：绑定之前先在 TIA Portal 中查看接口列表
- 预览图里带标题和筛选器的表头是模糊的，汇总卡片的右边缘也被截掉了
可绑定属性
- title
- subtitle
- totalLabel
- passedLabel
- failedLabel
- warningsLabel
- showFilters
- searchPlaceholder
- backgroundColor
04实时变量值轻量表格首选
Data Table
有时候你要的只是一张干净的列表。它显示十个信号的变量名、数值、单位和状态，从 145.2 m³/h 的 PUMP-001 到 22.1 °C 的 COOL-001，用彩色圆点表示 Active、Idle、Error 或 Offline。选中的行左边有一条蓝色竖条。对比度高、没有装饰，隔一米远也看得清。
它的接口同样精简。dataJson 承载行数据，columns 定义结构，rowHeight 和 headerHeight 调整密度，emptyMessage 处理无数据的情况，backgroundColor 匹配你的画面。据产品说明，表头是固定的，点击时触发 RowSelected，selectedRowIndex 还能把选中项写回变量（记得为它取消勾选“只读”（Read only））。clearSelection 和 scrollToTop 用来重置视图。
我们喜欢的
- 非常易读，长列表也有固定表头
- 选中项写回变量，方便联动面板
- 绑定很快：一个数据属性加一份列定义
需要留意
- 产品说明没提到搜索、排序或分页：只用在短列表上
- 预览图有一半是行下面的空白，请按你的行数调整尺寸
可绑定属性
- dataJson
- columns
- selectedRowIndex
- rowHeight
- headerHeight
- emptyMessage
- backgroundColor
05按页浏览批次记录首选
Paginated Records Table
本文最新的一款表格，2026 年 10 月发布，考虑得很周到。控件里是五条批次记录，从 L2 产线上的 B-24-0412“Tomato Sauce 500”到 B-24-0416“Basil Purée”，带配方、产线、开始时间和右对齐的数量（kg）。页脚写着“Rows 1–5 of 47”，旁边是一个带首页、上一页、页码、下一页和末页的分页器。
它的 17 个属性描述了一套清晰的分工。你的项目脚本负责查询数据库，把当前页写入 rows，把数据总量写入 totalCount，并在 PageChanged 事件之后把确认的页码写入 pageIndex。pageSize、columns（标签、对齐和单位）和 rangeTemplate 决定显示效果。点击某一行，或按 Enter 或空格键，会触发 RowClicked，并打开一张背景变暗的详情面板，显示每个存储参数的名称、数值和单位，这些数据由你通过 selectedParameters 和 parametersRowId 提供。
我们喜欢的
- 服务端分页：面板上只保存画面里显示的行
- 每条记录都有参数详情面板，按 Esc 即可关闭
- 支持键盘操作，并带无障碍标签
需要留意
- 预览图里的行很高，一次能看到的记录不多
- 没有你的脚本就什么都不会动：查询在你的项目里，不在控件里
可绑定属性
- rows
- totalCount
- pageIndex
- pageSize
- columns
- rangeTemplate
- selectedParameters
- parametersRowId
- backgroundColor
06历史数据导出 CSV 首选
Historical Data CSV Exporter
专治那句经典需求：“能把昨晚的数据导到 Excel 里吗？”两个日期时间选择器设定时间窗口，预览图里是 09:16 到 10:16，一张表格预览记录：时间戳加四个记录变量——TT_101 温度（°C）、PT_201 压力（bar）、FT_301 流量（m³/h）和 LT_401 液位（%）。页脚写着“Configured: 4 tags • Previewing: 15 of 26 records”，旁边是一个大大的绿色“Export CSV”按钮。
产品说明写明了整个流程。startTimestamp 和 endTimestamp 保存时间窗口（取消勾选“只读”（Read only），操作员的选择才能写到变量里），startLabel 和 endLabel 用来翻译标题，loggingTags 列出各列。你的脚本响应 QueryRequested，把记录写入 historicalDataJson，maxPreviewRows 限制预览行数，导出时生成以 fileNamePrefix 命名的 CSV，并触发 ExportTriggered。previewButtonText、exportButtonText、setHistoricalData 和 triggerExport 补齐了其余部分。
我们喜欢的
- 查询、预览和导出的完整流程都在一个画面上
- 交班报告和审计报告的文件名保持一致
- 浅色、办公风格的外观，适合报表画面
需要留意
- 预览图里日期选择器下面有个按钮，几乎完全被表格挡住了
- 它不会自己去读你的归档：得由脚本填充
historicalDataJson
可绑定属性
- startTimestamp
- endTimestamp
- loggingTags
- historicalDataJson
- maxPreviewRows
- fileNamePrefix
- startLabel
- endLabel
- previewButtonText
- exportButtonText
- backgroundColor
07检测与称重日志首选
Inspection Log
一张直接来自生产线的实在日志。“TUBE WEIGHT INSPECTION LOG”下面是一张浅色带边框的表格，列出 101 到 108 号管的管号、日期时间、重量和重量状态。重量在 17.7 到 17.9 之间浮动，三条标为“OK HIGH”的单元格是亮黄色的，一眼就能看到。角落里的“STANDALONE / READY”徽标显示连接状态。
产品说明列出了 7 个属性，全部写明：recordsJson 接收记录（比如一条 SQL 查询的结果），maxDisplayedRows 控制显示行数，titleText 和 connectionStatusText 负责标注，headerColor 和 backgroundColor 设置配色，highlightHighWeightColor 选定警告颜色。RowSelected 和 RefreshRequested 与你的脚本通信，appendRecord 逐条追加实时结果，clearRecords 开始新一轮记录。
我们喜欢的
- 超差结果想看漏都难
appendRecord可接收检重秤的实时数据流- 经典、适合打印的外观，质量团队会喜欢
需要留意
- 专为重量设计：用于其他检测就得重命名列，而且重量列没有单位
- 产品说明说的是整行高亮，但预览图里只有状态单元格变黄
可绑定属性
- recordsJson
- maxDisplayedRows
- titleText
- connectionStatusText
- highlightHighWeightColor
- headerColor
- backgroundColor
08人气之选：最灵活（Tabulator）
Custom table
榜单上的老将，2025 年 7 月发布，也是目录里下载量最高的表格：2026 年 11 月有 45 次下载。预览图是个演示，不是工厂画面：一个带蓝色标题栏的窗口里，是 Donald、Peter 和 Ronaldo 的 Name、Salary 和 Rating 列，配有绿色进度条和星级评分。Peter 那一行被选中，下面一行回显了这次点击：“The content of the selected row is: {"name":"Peter"}”。
外观上欠的，能力上补回来了。据产品说明，它基于 Tabulator——一个知名的开源表格库——所以筛选、列格式化和动态样式样样都有。它通过两个属性接收数据：TableDataString 放行数据，ColumnStyleString 放列定义；点击事件会告诉你的脚本点的是哪一行哪一列，随时可以弹出窗口或切换画面。下载包里附带一个示例项目和英文的集成说明。
我们喜欢的
- 底层是 Tabulator：格式化、筛选和排序都有在线文档
- 行列点击事件，方便下钻
- 附带示例项目，而且是下载量最高的表格
需要留意
- 预览图外观过时，还是演示数据：做好重新设计样式的准备
- 列定义要自己写成 JSON 字符串，得花点时间读 Tabulator 的文档
可绑定属性
- TableDataString
- ColumnStyleString
荣誉提名：另一款值得一看的表格
一款好看的控件，没挤进前八，原因是产品说明里没写属性名。点击缩略图即可打开产品页面。
Modern table
一款资产监控表，带实时时钟、整体性能和报警计数器，以及一张设备表格：状态徽标、温度、负载条、健康度和一个“VER”按钮。预览图里的文字是西班牙语，产品说明写了 14 个属性、2 个事件和 2 个方法，但没列出名字。
查看产品
没找到你要的表格？用 AI 免费做一个自己的（或改一个现成的）
坦白一件事：本文里的每一款数据表格，都是用 HMIx AI 生成器做出来的。所以我们可以脸不红心不跳地说：如果其中没有一款能按你需要的方式展示你的记录，几分钟你就能生成一个自己的。
用大白话描述这张表格（比如“显示最近 50 个生产订单的表格，列有订单号、产品、数量和进度条，订单延误时整行标红，带搜索和行点击事件”），生成器会一步步带你走完：设计外观、确定要在 WinCC 中使用的属性、事件和方法、用仿真试各种数值，最后打包出适用于 WinCC Unified 和 WinCC V8 的 Custom Web Control。如果你只需要一幅轻量的图形，同一个工具还能生成动态 SVG。
- 改造榜单上的任意一款：在它的产品页面上点击“在 AI 生成器中编辑”按钮，就能直接在生成器里打开它，随时可以提修改要求，比如“去掉斜体”“给重量列加上单位”或者“不合格时整行变色”。本文中的“用 AI 编辑”链接也是同样的作用。
- 免费试用：不注册账号也能直接开始，每天有一小笔积分额度；Community 套餐也是免费的。
- 成果归你使用：下载控件包，像本页其他表格一样放进你的 TIA Portal 项目即可。
如何在 WinCC Unified（以及 WinCC V8）中使用数据表格 Custom Web Control
精简版，留给已经选好表格的你。我们的 Custom Web Control 指南配有示意图和截图，每一步都讲得很细。
下载 ZIP
打开产品页面，用免费账号登录，然后下载表格。下载的 ZIP 中包含说明文档，以及名为
{GUID}.zip的控件包：你需要的是这个内部文件。复制到你的 TIA Portal 项目中
把
{GUID}.zip文件保持压缩状态，复制到项目文件夹下的UserFiles\CustomControls中（如果这两个文件夹不存在，就自己新建）。不要解压。刷新“我的控件”并拖到画面上
在 TIA Portal 中，打开工具（Tools）任务卡，展开“我的控件”（My controls）窗格，然后点击更新按钮。表格会出现在列表中：把它拖到画面上，并给各列留出足够的空间。
绑定并测试属性
选中控件，在巡视窗口（Inspector window）中打开“属性 → 属性 → 接口”（Interface）。这些表格以 JSON 字符串的形式接收行数据（
dataJson、historicalData、recordsJson、TableDataString……），所以先用一个内部字符串变量，再加一段写入两三行数据的测试脚本，然后启动 Runtime。对于控件会写回的属性，比如selectedRowIndex或pageIndex，请取消勾选“只读”（Read only）。行数据显示正常后，再换成真实数据。在 WinCC V8 中
本文所有入选表格的产品页面都标注了兼容 WinCC V8。控件包是同一个；在该环境中导入和组态 Custom Web Controls 时，请按照 WinCC V8 的文档操作。
进阶提示：只把操作员看得过来的数据发给表格。用好这些控件自带的行数上限（rowsPerPage、pageSize、maxDisplayedRows、maxPreviewRows），数据量大时就像 Paginated Records Table 那样一次只查一页。每秒重写一次、动辄几千行的 JSON 字符串，对 Unified Comfort Panel 来说是重活，对屏幕前的人来说也毫无用处。
常见问题
这些数据表格 Custom Web Control 真的免费吗？
是的。本文中的每款表格都在 HMIx 上作为免费产品发布。你只需要一个免费账号就能下载。
为什么要在 WinCC Unified 中用 Custom Web Control 做表格？
WinCC 的标准对象都是为特定数据设计的，比如报警、趋势或参数集。当你想要一张装自己记录的表格——生产订单、批次、质量检查，或者一条数据库查询的结果——并且要带搜索、分页、状态颜色和行点击事件时，数据表格 Custom Web Control 给你的就是这样一张可以直接绑定的表格。
怎么把行数据发给表格？
这些表格大多通过 dataJson、historicalData、recordsJson 或 TableDataString 这类属性，以 JSON 字符串的形式接收行数据。你可以在 WinCC 脚本中拼出这个字符串，或者绑定一个由其他程序填充的字符串变量；具体格式请查看下载包中附带的文档。
Custom Web Control 能读取我的 SQL Server 数据库吗？
把数据库访问当作你项目的一部分，而不是控件的一部分。榜单里面向 SQL 的表格开放了查询和连接属性、RefreshRequested 或 PageChanged 之类的事件，以及 setTableData 之类的方法，由你的脚本或服务端连接器执行查询，再把结果交给表格。请先读你所选控件的文档，尽量使用只读的数据库用户，也千万别把数据库密码存进操作员能读到的变量里。
它们能在 WinCC Unified Comfort Panel 和 WinCC V8 上使用吗？
它们的产品页面列出的兼容性包括 WinCC Unified（含 Unified Comfort Panel）和 WinCC V8。和任何 AI 生成的控件一样，上生产之前，请在你自己的项目和目标设备上测试实际表现，尤其是你打算显示的行数。
我可以修改其中某款表格吗？
当然可以。你可以自己修改控件的 HTML、CSS 和 JavaScript，也可以在产品页面上点击“在 AI 生成器中编辑”，用大白话提出修改要求。第二种方式通常更快，因为生成器会替你处理好接口和打包。
我们的结论
如果只下载一个，就选 Dynamic Data Table：搜索、分页和 CSV 导出都装在一张沉稳的表格里，几分钟就能绑好。要 SQL Server 编辑器，选 Table SQL Server；做质量，选 Quality Control Log；显示一小串实时数值，选 Data Table；浏览大量批次历史，选 Paginated Records Table；碰上“我要导到 Excel 里”，选 Historical Data CSV Exporter；配检重秤，选 Inspection Log；想要 Tabulator 的全套工具，就选 Custom table。
如果你的记录需要一张这些都画不出来的表格（现实中总是如此），别忘了，做出它们的那个生成器，离你只有一次点击。