---
order: 37
navTitle: 排序数据
---
# SuperPage交互-排序数据

使用**排序数据**交互，可以实现让数据按照指定的字段升序或降序显示。如点击成立日期，可按照成立日期对企业进行升序或降序切换：

![排序数据](./images/orderdata.gif)

示例地址：[排序数据](https://demo.succbi.com/v5/demo-spg/%E6%8E%92%E5%BA%8F%E6%95%B0%E6%8D%AE)

## 使用排序数据{#start}

使用**排序数据**交互，一般需要搭配[按钮](../../components/common/button.md)组件使用，同时需要使用[列表](../../components/data/list.md)或[浮动面板](../../components/layout/floatpanel.md)组件来展示数据。以点击成立日期按钮，对企业列表按照**成立日期**进行升序和降序排列切换为例，具体步骤如下：

![操作步骤](./images/orderdata1.gif)

1. **添加组件：** 在页面中添加`成立日期`按钮，勾选[启用切换](../../components/common/button.md#switch)
2. **添加交互并设置属性：**
   1. 选中`成立日期`按钮，添加**排序数据**交互
   2. 在交互中，数据集选择`企业基本信息`，**排序**表达式为`CLRQ ${IF([成立日期].[选中值],'desc','asc')}`即可
      :::tip 按钮启用切换属性说明
      [按钮](../../components/common/button.md)组件的[启用切换](../../components/common/button.md#switch)属性，是否勾选会影响按钮的返回值，如下：

- 未勾选该属性时：连续多次点击按钮，按钮的`选中值`不受影响，始终返回`TRUE`
- 勾选该属性时：
  - 第一次点击按钮时，按钮的`选中值`返回`TRUE`
  - 再次点击按钮时，`选中值`为`FALSE`
    :::

## 设置排序依据{#order}

**排序**属性是数据进行排序的依据，可设置依据的字段以及升序或降序排列。输入为宏表达式，可以逗号分割多个字段，如`字段1 asc,字段2 desc`。字段名可以是[名称](../../../../data-gov/model/README.md#model-field)也可以是[物理字段名](../../../../data-gov/model/README.md#model-field)。如以下几种写法：

- `CLRQ desc`：按照成立日期降序排列
- `成立日期 desc`：按照成立日期降序排列
- `CLRQ ${IF([成立日期].[选中值],'desc','asc')}`：点击成立日期按钮对数据按照成立日期进行升序和降序切换
- `${[排序方式].[值]} desc`：排序方式为下拉框，下拉框是字段名列表，选择下拉框中某个选项即可按照该字段降序排序，该交互是设置在下拉框组件上
- `${[排序方式].[值]} ${if (btn1, "DESC", "ASC"}`：选择排序方式下拉框中的某个选项后，点击按钮1，可以按照该选项进行升序和降序切换排序。该交互需要在下拉框组件和按钮组件上都设置
- `CLRQ desc,HZRQ asc`：按照成立日期进行降序排列，若成立日期相同，则按照核准日期升序排列

:::tip 排序优先级
用户在[模型属性](../../../../data-gov/model/model-settings.md#sort-fields)以及[查询数据集](../../../../data-viz/dash/design/datasource.md#dataset-properties)上，也能设置按照指定的字段排序数据。排序优先级：
排序数据交互>查询数据集>模型属性
:::