如何使用高级表格的后台排序功能

操作场景

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

图1 转换器添加顺序

操作步骤

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

      let data = [...dataset];
      
      const sortType = $pageStore.sortType;
      const sortField = $pageStore.sortField;
      
      if (sortType && sortField) {
          if (sortType == 'ascending') {
              data.sort((a, b) => {
                  return isNaN(Number(a[sortField])) ? b[sortField].localeCompare(a[sortField]) : b[sortField] - a[sortField];
              });
          } else {
              data.sort((a, b) => {
                  return isNaN(Number(a[sortField])) ? a[sortField].localeCompare(b[sortField]) : a[sortField] - b[sortField];
              });
          }
      }
      
      return data

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

5. 新建全局变量。
   后台排序需要搭配全局变量使用，请创建sortType、sortField。

   图3 新建排序全局变量。
   

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

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

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