如何使用高级表格的后台筛选功能

操作场景

后台排序必须和全局变量一起配合使用。后台分页、后台排序和后台筛选同时启用时，在添加转换器时，需要先筛选、再排序、最后分页，如图1。

图1 转换器添加顺序

操作步骤

1. 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。
2. 新建后台筛选转换器。
   1. 在主菜单中，选择“数据中心”。
   2. 在左侧导航栏中，选择“转换器 > 全部”，单击“新建转换器”。
   3. 输入转换器名称和分类，单击“确定”。
   4. 输入转换器代码，单击“保存”。

      let data = [...dataset];
      const filter = $pageStore.filters
      
      let filterObj = "";
      try {
          filterObj = JSON.parse(filter);
      } catch {
          filterObj = filter;
      }
      
      const keys = Object.keys(filterObj);
      
      data = data.filter(item => {
          return keys.every(key => {
              if (!filterObj[key].length) {
                  return true;
              }
              return filterObj[key].includes(item[key]);
          })
      })
      
      return data;

3. 新建一个大屏页面，从“全部组件 > 文本”中，拖拽“高级表格”组件至画布空白区域。
4. 开启后台筛选功能。
   图2 开启后台筛选
   

5. 新建全局变量。
   后台筛选需要搭配全局变量使用，请创建filters变量。

   图3 新建筛选全局变量。
   

6. 交互设置。
   1. 选中高级表格组件，单击，进行组件交互设置。
   2. 添加“点击筛选时”交互动作。
      图4 点击筛选时交互动作
      

7. 设置组件数据源。
   1. 选中组件，单击组件上方的。
   2. 选择所需的数据类型。
   3. 在全局变量配置下方，单击，选择转换器，添加2创建的转换器。
      图5 添加转换器
      
   4. 在组件预览中，将表格中的字段，拖拽到对应的配置中。
      图6 拖拽字段到对应配置中
      
   5. 单击“保存”，完成组件数据源的配置。

8. 保存页面，预览效果。
   图7 查看后台筛选效果