乐趣区

关于前端:如何使用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 的库存信息。

在数据过滤性能中除了对数值类型进行过滤以外,还能够对文本、日期等各种类型的字段进行过滤配置。同时,通过批改代码中的函数能够实现过滤外的更多扩大性能,具体的函数配置办法能够返回官网教程进行查看

退出移动版