01 引言 Function introduction
排序功能是表格的一个重要特性,一般表格组件只支持用户按照某一列数据进行排序,无法满足多字段排序需求。例如,如果您在企业员工表格中先按工作年限排序,后来想要再按年龄排序,之前的排序会被覆盖。
而 Choerodon UI 表格支持多列排序,满足以上场景,允许您在已有排序的基础上,继续按照其他字段进行排序,从而实现更准确的数据展示。
02 功能介绍 Function introduction
/ 排序方式 /
01 单列排序
鼠标悬停列头,出现箭头图标,点击可轮流实现表格数据的 正序 -> 倒序 -> 无序 循环排序。
02 多列排序
点击表头的多列排序图标会弹出一个窗口,您可以在窗口中控制多个列字段的顺序和排序方式。
多列排序包含字段排序优先级和组合使用的场景,为了更便捷地让用户理解当前的排序状态并操作字段排序,Choerodon UI 设计了如下排序交互:
- 表头交互
a. 显示多列排序图标
b. 点击弹出排序弹窗
- 排序弹窗内交互
a. 添加可排序字段
b. 确定排序字段状态,正序 | 倒序
c. 可拖拽调整排序字段优先级
3. 列头交互
a. 列头排序图标可清晰区分多列、单列和可排序状态
b. 在多列排序弹窗中点击确认后,显示多列排序图标
c. 直接点击列头,仅触发单列排序,显示单列排序图标
*注意:单列和多列排序查询之间相互独立,排序方式由最后一次操作决定。
具体而言,点击列头将触发单列排序;点击多列排序弹窗确认后,会清除单列排序根据弹窗内配置触发多列排序,反之亦然。
/ 排序策略 ****/
表格支持两种不同的数据排序策略,选择取决于数据量和业务需求。
****1. 前端排序:在浏览器中直接对数据进行排序,适用于小数据集,仅单页内排序的场景。
****2. 后端排序:将排序请求发送到服务器,适用于大数据和跨页排序场景。
03 场景示例 Scenario example
在人员查看表格中,用户想要按照年龄正序和性别倒序排列查询,且性别倒序的优先级更高。
Tips: 年龄正序按数字从小到大;性别倒序按照拼音顺序倒序,女 -> 男
/ 操作步骤/
1. 点击表头多列排序图标
2. 选择对应字段,并确认排序规则及字段顺序
3. 点击确认触发查询
/ 表格展示/
先基于性别排序,再根据年龄排序
在浏览数据后,用户希望通过按年龄单列进行倒序排列,再继续查看人员信息。
/ 操作步骤/
1. 点击年龄字段列头,触发单列排序
2. 观察列头图标,确认排序方式为倒序
/ 表格展示 /
欢迎试用welcome to try
以上就是 Choerodon UI Table 多列排序的基本功能介绍,欢迎试用。如果您有更好的想法和建议,欢迎积极反馈给我们,我们诚挚的邀请您和我们一起共建 Choerodon Ul。