Choerodon UI 支持多列排序的企业级表格组件

335 阅读3分钟

01 引言 Function introduction

排序功能是表格的一个重要特性,一般表格组件只支持用户按照某一列数据进行排序,无法满足多字段排序需求。例如,如果您在企业员工表格中先按工作年限排序,后来想要再按年龄排序,之前的排序会被覆盖。

而 Choerodon UI 表格支持多列排序,满足以上场景,允许您在已有排序的基础上,继续按照其他字段进行排序,从而实现更准确的数据展示。

02 功能介绍 Function introduction

/ 排序方式 /

01 单列排序

鼠标悬停列头,出现箭头图标,点击可轮流实现表格数据的 正序 -> 倒序 -> 无序 循环排序。

02 多列排序

点击表头的多列排序图标会弹出一个窗口,您可以在窗口中控制多个列字段的顺序和排序方式。

多列排序包含字段排序优先级和组合使用的场景,为了更便捷地让用户理解当前的排序状态并操作字段排序,Choerodon UI 设计了如下排序交互:

  1. 表头交互

    a. 显示多列排序图标

    b. 点击弹出排序弹窗

  1. 排序弹窗内交互

    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。

● 官网 demo

● github