使用面板节点实现表格关键词搜索

背景

在node-red中，要做一个美观的面板，很多人都会选择使用node-red-dashboard这个库，该库在github上的star也很高，支持的特性也很多，比如中间件，多页面，栅栏式的排版布局。今天的这篇文章我就带大家使用dashboar的做一个常见的布局。

布局介绍

在使用dashboard做页面时必须要了解其中的几个概念，
其一就是dashboard的tab，所有的页面元素都要有一个tab来装载，它是一个基本的容器，一个页面可以有多个tab，用户可以自由切换。

一个页面同一时间只能显示一个tab。
dashboard tab 的配置页面

在tab下，又存在多个group，每个group相当于一个div，每个div可以设置宽度，
width的每一格默认代表 48px， 间隔为6px

在group下，可以存在多个template，form表单，等各种页面元素。
这里的页面元素，宽度可以设置为自动，扩展到整个容器。

理解了这三类页面元素，下面看一下如何使用这个元素排版，做一些业务系统中常见的布局，

常见布局

下面我们来实现一个表格搜索的功能，

示例的效果图如上，显示一个表格，里面会显示用户名，年龄，性别，
此外还有一个关键词,当用户在输入框中输入值后，自动搜索匹配的名称。

这是一个非常常见的业务场景。
下面来看一下如何实现。

实现示例

首先创建一个表格布局的dashboard tab
然后在其中创建一个用户管理的group，宽度设置为 20 单位。这样group的宽度为 20*48 = 960px 左右（会有偏差，和padding）

然后将 text-input 组件，配置label Wie关键词 拖入到流编辑器中，

表格的显示我们可以使用template 搭配 table 标签来显示

template节点的配置如下

拖入一个function 节点，function节点可以帮助我们处理数据的搜索，过滤，接受上一步的关键词后，使用关键词进行搜索，搜索后在重新组装数据，将数据向下传递。从而到达流式调用。
配置如下：

数据格式为

const payload = msg.payload
const data = 
    [
        {
            "name": "Fizz",
            "age": 29,
            "gender": "男"
        },
        {
            "name": "Tom",
            "age": 30,
            "gender": "男"
        }
    ]

if(payload){
    msg.payload = data.filter(x => {
    return x.name.includes(payload)
})

} else{
    msg.payload = data
}

console.log(msg)
return msg;

这显示template中，我们读取msg.payload来获取上一个节点的数据。并使用angular的ng-repeat 遍历来显示数组， ng-repeat是angular中自带的指令，使用它我们可以变量一个可迭代的对象，并使用{{}}来讲数组中的数据显示到页面上。这一步需要有一点angular的知识。整体来说，dashboard就是使用angualr来实现的。所以内置了很多angular的指令和写法。
如下

<div style="width:100%">
    <table style="width:100%;text-align:center" border>
        <thead>
            <tr>
                <th>名字</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="key in msg.payload">
                <td>{{key.name}}</td>
                <td>{{key.age}}</td>
                <td>{{key.gender}}</td>
            </tr>
        </tbody>
    </table>

</div>

注意当用户改变关键词输入框的值后，会自动向下游发送输入框的值，值的属性以msg.payload 负载。

然后使用一个function 节点来处理搜索的数据，这里我使用了一个filter 方法进行搜索。

表格搜索是在后台管理端中常用的功能，下一篇文章我将给大家做一些漂亮的折线图，柱状图。这在物联网大屏系统中，非常实用。希望同学们好好学。