当前位置：首页 > news >正文

【Node-Red】一款可以自定义的table节点

news 2024/11/7 11:14:34

node-red-contrib-ui-etable 节点教学

1、根据官方链接中的内容来做一个简单的demo
2、案例表格参数介绍
3、案例表格操作性介绍
4、案例源码

首先需要下载控件： node-red-contrib-ui-etable
官方节点信息链接：node-red-contrib-ui-etable (node) - Node-RED

功能演示：
请添加图片描述

1、根据官方链接中的内容来做一个简单的demo

在官方说明链接的最后有讲到一个传参的方式：在 msg.payload 中传递输入数据。请注意，选项和列也可以通过 msg 传入。msg. msg = { payload: … config: { options: … columns: … } }
那我们可以把链接中给到的options和columns以上述格式当作参数放在function中，当然在官方链接中还给到一个Tabulator | JavaScript Tables & Data Grids的案例链接，我们把案例中的表格内容当作payload进行传参就能得到如下的msg内容：

msg = {payload:[{id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1},{id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true},{id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true"},{id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980"},{id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},{id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, col:"red", dob:"12/05/1966", car:1},
],config:{options: { "movableColumns": true, "resizableColumns": true, "selectable": 5, "responsiveLayout": "collapse","autoResize": true, "layout": "fitColumns","pagination": "local", "height": "800px","groupBy": "system","groupStartOpen": true },columns: [{title: "Name", field: "name", editor: "input" },{title: "Task Progress", field: "progress", align: "left", formatter: "progress", editor: true },{title: "Gender", field: "gender", width: 95, editor: "select", editorParams: {values: [ "male", "female"] }},{title: "Rating", field: "rating", formatter: "star", align: "center", width: 100, editor: true },{title: "Color", field: "col", width: 130, editor: "input"},{title: "Date Of Birth", field: "dob", width: 130, sorter: "date", align: "center"},{title: "Driver", field: "car", width: 90, align: "center", formatter: "tickCross", sorter: "boolean", editor: true}]} 
}
return msg;

然后在function节点前加个inject节点，在后边加个下载的etable节点就完成了。
使用inject节点触发消息，打开UI界面，就能看到一个与Tabulator | JavaScript Tables & Data Grids链接中一样的表格内容了。

2、案例表格参数介绍

options介绍：

1.可移动列（movableColumns）：用户可以拖动列来重新排列它们的顺序。
2.可调整列宽（resizableColumns）：用户可以拖动列的边缘来调整列的宽度。
3.选择行（selectable）：用户可以选择最多5行。
4.响应式布局（responsiveLayout）：在屏幕尺寸变化时，表格会自动折叠以适应屏幕。
5.自动调整大小（autoResize）：表格会自动调整大小以适应容器。
6.布局（layout）：列会自动调整大小以适应表格的宽度。
7.本地分页（pagination）：表格支持本地分页，即数据在客户端进行分页处理。
8.高度（height）：表格的高度设置为800像素。
9.分组（groupBy）：数据会根据“system”字段进行分组。
10.分组初始展开（groupStartOpen）：分组在初始时是展开的。

columns介绍：

Name：姓名，支持输入编辑。
Task Progress：任务进度，显示为进度条，支持编辑。
Gender：性别，支持下拉选择编辑，选项为“male”和“female”。
Rating：评分，显示为星级，支持编辑。
Color：颜色，支持输入编辑。
Date Of Birth：出生日期，支持日期排序。
Driver：驾驶员，显示为勾叉标记，支持布尔值排序和编辑。

payload介绍：

{id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1}

从参数来看，我们只需要注意，变量名字对应的为columns参数中的field变量即可，不要使用title进行传参。

3、案例表格操作性介绍

在案例表格中

Name列和Color列可以双击进行自定义输入；
Task Progress列可以将鼠标放在进度条右侧进行拖拽，自定义比例；
Gender列为下拉框选项；
Rating列可使用点击的形式对星级进行设定；
Date Of Birth列为不可操作列；
Driver列为bool值，可设置为true或false。

还可以先看一下etable节点是包含有头和尾两个连接点的，表示既可以输入，又可以输出。那我们在etable节点后连接debug节点后，在UI界面选中某一行，可以收到msg节点输出。
msg.payload 为选中行的整行信息，msg.options.data中为整个表格的数据

4、案例源码

将以下内容复制到node-red中即可。

[{"id":"c0dd0cd67f58333a","type":"ui_etable","z":"10abcf86f21a27e4","payload":"{}","payloadType":"json","options":"{}","group":"b6c8ccb75434e4fa","name":"","order":5,"width":"0","height":"0","columns":[],"outputs":1,"cts":false,"x":790,"y":1520,"wires":[["f9bac5bf241180ed"]]},{"id":"f9bac5bf241180ed","type":"debug","z":"10abcf86f21a27e4","name":"debug 181","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":970,"y":1520,"wires":[]},{"id":"c84c52ff3b18835b","type":"inject","z":"10abcf86f21a27e4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":470,"y":1520,"wires":[["dff33486b433bb97"]]},{"id":"dff33486b433bb97","type":"function","z":"10abcf86f21a27e4","name":"function 154","func":"msg = {\n    payload:[\n    {id:1, name:\"Oli Bob\", progress:12, gender:\"male\", rating:1, col:\"red\", dob:\"19/02/1984\", car:1},\n    {id:2, name:\"Mary May\", progress:1, gender:\"female\", rating:2, col:\"blue\", dob:\"14/05/1982\", car:true},\n    {id:3, name:\"Christine Lobowski\", progress:42, gender:\"female\", rating:0, col:\"green\", dob:\"22/05/1982\", car:\"true\"},\n    {id:4, name:\"Brendon Philips\", progress:100, gender:\"male\", rating:1, col:\"orange\", dob:\"01/08/1980\"},\n    {id:5, name:\"Margret Marmajuke\", progress:16, gender:\"female\", rating:5, col:\"yellow\", dob:\"31/01/1999\"},\n    {id:6, name:\"Frank Harbours\", progress:38, gender:\"male\", rating:4, col:\"red\", dob:\"12/05/1966\", car:1},\n],\n    config:\n    {\n        options: { \n            \"movableColumns\": true, \n            \"resizableColumns\": true, \n            \"selectable\": 5, \n            \"responsiveLayout\": \"collapse\",\n            \"autoResize\": true, \n            \"layout\": \"fitColumns\",\n            \"pagination\": \"local\", \n            \"height\": \"800px\",\n            \"groupBy\": \"system\",\n            \"groupStartOpen\": true \n     },\n         columns: [\n            {title: \"Name\", field: \"name\", editor: \"input\" },\n            {title: \"Task Progress\", field: \"progress\", align: \"left\", formatter: \"progress\", editor: true },\n            {title: \"Gender\", field: \"gender\", width: 95, editor: \"select\", editorParams: {values: [ \"male\", \"female\"] }\n            },\n            {title: \"Rating\", field: \"rating\", formatter: \"star\", align: \"center\", width: 100, editor: true },\n            {title: \"Color\", field: \"col\", width: 130, editor: \"input\"},\n            {title: \"Date Of Birth\", field: \"dob\", width: 130, sorter: \"date\", align: \"center\"},\n            {title: \"Driver\", field: \"car\", width: 90, align: \"center\", formatter: \"tickCross\", sorter: \"boolean\", editor: true}\n        ]\n    } \n}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":630,"y":1520,"wires":[["c0dd0cd67f58333a"]]},{"id":"b6c8ccb75434e4fa","type":"ui_group","name":"test","tab":"65324def.436554","order":3,"disp":true,"width":"6","collapse":false,"className":""},{"id":"65324def.436554","type":"ui_tab","name":"test","icon":"dashboard","order":12,"disabled":false,"hidden":false}]