表格排序——大屏使用技巧

易知微创新技术团队

| 2024-09-26 11:47 85 0 0

实际项目实施中，有时候会需要对表格做排序。单个组件无法实现，这个时候不需要单独做定制开发，多个组件之间结合使用即可满足需求。（此处示例可以作为参考，实际项目中还是根据对应需求来处理。）

一、实现效果

点击上面的三角箭头，即可使下面的表格进行排序联动。

二、实现思路

轮播表格默认展示顺序与数据返回顺序相同，想要动态控制轮播表格内容的排序，通过调整轮播表格的数据即可。数据的排序可以在“数据过滤器”中，以 sort 方法进行。具体的排序规则可以通过 “回调参数” 由其他组件传递过来。

三、配置流程

3.1 选项卡

3.1.1 组件配置

通过系列分别对升序与降序进行样式配置，并区分选中与未选中样式。

3.1.2 具体逻辑

选中组件，在数据中注入用于排序的 key 值，格式为：${列字段}_${排序方式}。

在“交互”-“回调参数”中通过回调字段 sort_key 将回调发出。

3.2 轮播表格

选中【轮播表格】组件，在“数据”中添加过滤器。

在过滤器中关联回调字段 sort_key，sort_key 每次变化都会驱动数据过滤器执行。过滤器执行时，先将 sort_key 按照 ${列字段}_${排序方式}的格式进行拆解，提取出对应要素，在随后的逻辑中针对具体的列字段按对应的排序方式处理，最终返回的数据即是完成排序的内容。配置完成后点击“保存”即可。

const {  sort_key = "column1_asc"} = callbackArgs;

const [key, type] = sort_key.split('_');
const asc = (a,b) => a[key] - b[key]const desc = (a,b) => b[key] - a[key]
const fun = type == 'asc' ? asc : desc
return data.sort(fun);

该场景demo可点击此处获取

数字孪生可视化 可视化大屏设计 交通可视化大屏 表格排序 表格进行排序联动

赞同 0

: 微信

: 链接

全部 0条评论

易知微创新技术团队

135

文章

1.08K

人气

粉丝

关注

关注我们

扫码获取

更多数字孪生可视化干货内容

表格排序——大屏使用技巧

一、实现效果

二、实现思路

三、配置流程

分享方式

评论

全部 0条评论

热门文章

关注我们

官方媒体