如何使用YonBuilder实现数据过滤功能？

YonBuilder中提供了多种实现数据过滤功能的方式，本期我们通过之前在出入库示例中建立的库存单页面来对页面自带的数据过滤功能以及通过前端函数实现数据过滤这两种方法分别进行介绍。

01数据过滤功能对于库存表中的数据，我们希望通过添加数据过滤功能实现不显示物品数量为0的行。因此，首先要选择我们想要添加过滤限制的页面进入修改页面设计。

在页面设计中，点击预览可以看到在没有配置数据过滤功能前，物品数量为0的数据信息仍展现在库存表中。

由于我们配置的数据过滤功能是针对整个页面实现的，因此要先在层级中点击页面的根目录找到数据过滤的设置入口。

点击数据过滤进入到配置页面，通过添加按钮新建一条“物品数量大于0”的数据过滤规则并进行保存。

之后我们重新预览库存页面，可以看到此时已经不显示数量为0的库存信息。因此，通过如上配置已经实现了数据的基础过滤功能。

02通过前端函数过滤除了页面自带的基础功能外，我们还可以通过YonBuilder中的前端函数对页面进行扩展，从而实现过滤、监听、触发等功能。这里对前端函数中的过滤功能进行简单的介绍，在前端函数中可以使用CommonVOs和SimpleVOs两种函数来实现数据过滤。

首先，要在页面的根目录中找到脚本的编辑入口。

点击设置后，选择下拉框中的前端函数即可进入到函数编辑页面；进入页面后，在数据模型页面中编辑代码并进行保存。

对于CommonVOs，在页面进行初始化时读取当前页面数据并进行条件过滤，查询条件在commonVOs.push函数中进行配置。其中，itemName对应的是数据过滤功能中的字段名称； op对应的是操作符（gt为大于、eq为等于、lt为小于等等）；value1对应的是值。具体的CommonVOs数据过滤代码如下，其实现的功能即为过滤出物品数量大于0的信息。

  // 库存单--页面初始化  viewModel.on('customInit', function (data) {      var viewModel = this;        // 检索之前进行条件过滤    viewModel.on('beforeSearch', function (args) {      debugger;      args.isExtend = true;      //通用检查查询条件      var commonVOs = args.params.condition.commonVOs;      commonVOs.push({        //itemName对应要进行过滤的字段名称        itemName: 'num',        //op为比较符简写        op: 'gt',        //num为想要比较的值        value1: 0      });    }); });

而在SimpleVOs中，field对应CommonVOs中的itemName，另外两个字段与CommonVOs中的字段含义相同。具体的SimpleVOs数据过滤代码如下，其实现的功能与上方代码相同。

viewModel.on('customInit', function (data) {  // 库存单--页面初始化     debugger;     var viewMode = this;     viewModel.on('beforeSearch', function (args) {         //字段num大于0的数据进行查询         args.params.condition.simpleVOs =[{              field: 'num',               op: 'gt',               value1: 0         }];   });   });

在配置前端函数进行过滤时，有一个需要注意的点是，由于字段属性中比较符的优先级高于前端函数，且数量类型的字段比较符默认为等于。如果不修改比较符号只添加脚本，则无法获取到大于0的数据，因此要先对字段的比较符进行修改。

通过如上配置已经实现了基础的数据过滤功能，在保存页面修改后再次点击预览可以看到此时已经不再显示数量为0的库存信息。

在上述前端函数配置中，只要修改代码中的itemName、 op、value1等字段即可实现多种过滤效果。例如将op设置为lt、value1设置为10即可实现过滤出物品数量小于10的库存信息的效果。需要注意的是，要先将字段的比较符设置为小于，避免字段比较符与前端函数配置发生冲突。

实现效果如图，可以看到此时已经不再显示物品数量大于等于10的库存信息。

在数据过滤功能中除了对数值类型进行过滤以外，还可以对文本、日期等各种类型的字段进行过滤配置。同时，通过修改代码中的函数可以实现过滤外的更多扩展功能，具体的函数配置方法可以前往官方教程进行查看