使用ag-grid展示MQTT数据遇语法错误，求解决方案

让我们一步步搞定你的问题：

首先，修复触发语法错误的核心问题 #

你看到的Uncaught SyntaxError是因为代码里的一个低级拼写错误：(funtion(scope) {里的funtion少了一个字母c，应该写成function。除此之外，还有两处语法/逻辑问题：

• 初始化ag-grid时，你漏传了网格容器的DOM元素参数，正确的初始化方式需要把#myGrid的DOM对象作为第一个参数传入agGrid.Grid。
• scope.$watch的回调函数后面缺少闭合的括号和分号，导致代码结构不完整。

修正后的完整模板代码（含CSV导出功能） #

下面是修复了所有语法问题，并且支持接收MQTT payload数据、自带CSV导出的完整代码：

<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css">

<div id="myGrid" style="height: 600px;width:500px;" class="ag-theme-balham"></div>

<script>
(function(scope) {
    // 定义表格列配置，和你的数据字段对应
    var columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];

    // 网格核心配置，启用CSV导出功能
    var gridOptions = {
        columnDefs: columnDefs,
        enableRangeSelection: true, // 导出需要的前置配置
        popupParent: document.body,
        toolbar: ['export'], // 显示导出工具栏按钮
        defaultExportParams: {
            fileName: 'vehicle-data.csv', // 导出的CSV文件名
            exportMode: 'csv' // 指定导出格式为CSV
        }
    };

    // 获取网格容器的DOM元素
    var eGridDiv = document.querySelector('#myGrid');
    // 初始化网格实例
    var testGrid = new agGrid.Grid(eGridDiv, gridOptions);

    // 监听Node-RED传入的msg数据，更新表格内容
    scope.$watch('msg', function(msg) {
        if (msg && msg.payload) {
            // 兼容单个对象或数组格式的payload
            var rowData = Array.isArray(msg.payload) ? msg.payload : [msg.payload];
            // 更新表格数据
            testGrid.setRowData(rowData);
        }
    });
})(scope);
</script>

关键修改点说明 #

1. 语法修复：修正了function拼写错误，补全网格初始化的DOM参数，修复$watch的语法闭合问题。
2. CSV导出功能：在gridOptions中添加了导出相关配置，工具栏会自动显示导出按钮，点击即可下载CSV文件。
3. MQTT数据适配：自动处理单个对象或数组格式的msg.payload，只要你的MQTT消息payload包含make、model、price这三个字段，就能直接渲染到表格里。

使用小提示 #

• 如果你的MQTT数据字段和列配置不匹配，记得修改columnDefs里的field值，和你的实际数据字段对应。
• 要是需要导出Excel格式，只需要把defaultExportParams里的exportMode改成excel即可。

内容的提问来源于stack exchange，提问作者cogitoergosum