Node-Red使用table控件输出表格

1.控件说明

要实现使用Node-Red显示数据，需要先下载新控件 node-red-node-ui-table，此控件下载完成后会更新与dashboard系列，大家注意别找错啦。

2.table表格输出

1.首先是table节点的初步学习，大家可以参考官方提供的网址：https://flows.nodered.org/node/node-red-node-ui-table，根据官方给的案例进行学习。
官方网址最快的跳转方法：在安装节点时，点击右上角的跳转按钮即可。

2.下面来看一下官方案例中table节点的使用。首先使用一个button节点作为程序的开始触点，然后将案例中的表格数据写入到msg.payload中并用表格进行显示。
在function中需要编写的程序为

msg.payload = [
    {
    
    
        "Name": "Kazuhito Yokoi",
        "Age": "35",
        "Favourite Color": "red",
        "Date Of Birth": "12/09/1983"
    },
    {
    
    
        "Name": "Oli Bob",
        "Age": "12",
        "Favourite Color": "cyan",
        "Date Of Birth": "12/08/2017"
    }
]
return msg;

其中 Name、Age、Favourite Color、Date Of Birth 为表格的表头，冒号后的内容为表格内容。
在UI界面中先点击一下button按钮再查看现象。

3.table表格新增数据

其实案例中也有给如何将数据新增至table表格中。

• 首先我们先来看一下案例中给的代码（下面的案例代码可点击table节点后，在后侧栏选择帮助进行查看）

{
    
    
    command: "addRow",
    arguments: [
        {
    
    
            "Name": "Oli Bob",
            "Age": "12",
            "Favorite Color": "red",
            "Date Of Birth": "12/08/2017",
            "Rating": 2
        },
        true
    ],
    returnPromise: true
}

这里的代码与之前不同的是，标注了command、arguments、returnPromise。command意为命令，addRow表示新增行；arguments意为参数，这里就将我们前边学到的表格数据显示直接拿过来即可；最后returnPromise为返回，直接设置为true即可。

当然，案例中所给的代码也是需要保存至msg.payload中的。

到这一步大家会发现明明代码已经赋值给msg.payload了，为什么会没有数据显示呢？

• 这里大家还有一些注意事项需要了解，需要对table这个节点进行设置。从前一步可以知道function需要传递的参数都有哪些，在table也需要一一对应。
  
  点击左下角的 “+” 号即可。新增内容中Property用来填写在function中设定的表头名；Title用来填写自己可以看得懂的表头名，若不设置，表头名则为空。Align可以选择数据显示靠左、靠右或居中；Width可手动设置表间距，不填时间距均分；最后是Format可用来显示数据格式。
• 最后来看一下效果，点击button按钮后 会在table的第一行新增一行。
  代码展示：

[{
    
    "id":"21c0eba7c9ad4709","type":"function","z":"626645ca3ad55b37","name":"","func":"msg.payload = {\n    command: \"addRow\",\n    arguments: [\n        {\n            \"Name\": \"Oli Bob\",\n            \"Age\": \"12\",\n            \"Favorite Color\": \"red\",\n            \"Date Of Birth\": \"12/08/2017\",\n            \"Rating\": 2\n        },\n        true\n    ],\n    returnPromise: true\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":410,"y":160,"wires":[["852b71615e49302e","a3c9fc2a3831be11"]]},{
    
    "id":"852b71615e49302e","type":"ui_table","z":"626645ca3ad55b37","group":"874338cf.932688","name":"","order":15,"width":"15","height":"5","columns":[{
    
    "field":"Name","title":"姓名","width":"","align":"left","formatter":"plaintext","formatterParams":{
    
    "target":"_blank"}},{
    
    "field":"Age","title":"年龄","width":"","align":"left","formatter":"plaintext","formatterParams":{
    
    "target":"_blank"}},{
    
    "field":"Favorite Color","title":"","width":"","align":"left","formatter":"plaintext","formatterParams":{
    
    "target":"_blank"}},{
    
    "field":"Date Of Birth","title":"","width":"","align":"left","formatter":"plaintext","formatterParams":{
    
    "target":"_blank"}},{
    
    "field":"Rating","title":"","width":"","align":"left","formatter":"plaintext","formatterParams":{
    
    "target":"_blank"}}],"outputs":0,"cts":false,"x":630,"y":160,"wires":[]},{
    
    "id":"ea2015c8da6a2d0d","type":"ui_button","z":"626645ca3ad55b37","name":"","group":"874338cf.932688","order":16,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":190,"y":160,"wires":[["21c0eba7c9ad4709"]]},{
    
    "id":"874338cf.932688","type":"ui_group","name":"test","tab":"1c073481.46e3bb","order":1,"disp":true,"width":"15","collapse":false,"className":""},{
    
    "id":"1c073481.46e3bb","type":"ui_tab","name":"tab","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

当我们学会之后，就可以将制表时arguments 中冒号后边的新增数据设置为自定义变量，在表格中输出我们所需要的数据。