
# 如何使用高级表格的后台排序功能
#### 操作场景
后台排序必须和全局变量一起配合使用。后台分页、后台排序和后台筛选同时启用时，在添加转换器时，需要先筛选、再排序、最后分页，如。
图1转换器添加顺序   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424981.png "点击放大")
#### 后台排序
1. 参考[登录华为云Astro大屏应用界面](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6008.html)中操作，登录华为云Astro大屏应用界面。
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开启后台排序   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123026800.png "点击放大")
   
   
5. 新建全局变量。 
   后台排序需要搭配全局变量使用，请创建sortType、sortField。
   图3新建排序全局变量。   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306533.png "点击放大")
   
   
6. 交互设置。 
   1. 选中高级表格组件，单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002148213325.png)，进行组件交互设置。
   
   2. 添加"点击排序时"交互动作。
      图4点击排序时交互动作   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123026876.png "点击放大") 
   
   
   
   
7. 设置组件数据源。 
   1. 选中组件，单击组件上方的![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002112534904.png)。
   
   2. 选择所需的数据类型。
   
   3. 在全局变量配置下方，单击"+"，选择转换器，添加[2]创建的转换器。
      图5添加转换器   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123026816.png "点击放大") 
   
   4. 在组件预览中，将表格中的字段，拖拽到对应的配置中。
      图6拖拽字段到对应配置中   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123026880.png "点击放大") 
   
   5. 单击"保存"，完成组件数据源的配置。
   
   
   
   
8. 保存页面，预览效果。 
   图7查看后台排序效果   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306537.png)
   
   
 
