尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

Axure9.0 中继器表头点击双向切换排序教程

Axure9.0 中继器表头点击双向切换排序教程 适配版本Axure RP 9.0一、功能说明制作后台列表表头点击表头文字/表头矩形添加中继器排序动作支持根据ID字段、时间字段一键切换升序、降序排列适配后台管理表格常规排序交互。二、前期基础准备左侧组件库拖拽【中继器】至页面画布自定义命名数据列表中继器编辑中继器数据集新建排序字段ID、创建时间录入多条大小不一的测试数据页面外层画布制作列表表头拖拽矩形文本制作【ID表头】【时间表头】点击表头即可触发排序双击中继器进入内部单行模板绑定ID、创建时间字段完成列表数据展示对应排序表头添加排序图标1转换为动态面板2设置三个状态分别为默认不用动升序拖入降序图标升序图标修改降序的填充透明度为20%降序复制升序修改升序的填充透明度为20%修改降序的填充透明度为100%三、核心交互设置点击表头排序操作位置页面外层选中【ID表头】元件1、右侧交互面板新建交互触发事件选择单击时2、启用情形分三种1默认第一步添加条件设置如下点【确定】按钮第二步添加动作选择【设置面板状态】目标刚刚设置的面板STATE升序可以根据自己需要第三步新增动作选择【添加排序】目标元件选择【数据列表中继器】排序配置选择排序字段例ID排序方式按需选择升序2升序拷贝默认情形第一步修改条件设置如下点【确定】按钮第二步修改动作选择【设置面板状态】STATE降序第三步修改动作选择【添加排序】排序配置选择排序字段例ID排序方式按需选择 降序3降序拷贝升序情形第一步修改条件设置如下点【确定】按钮第二步修改动作选择【设置面板状态】STATE升序第三步修改动作选择【添加排序】排序配置选择排序字段例ID排序方式按需选择 降序注升序从小到大排序数字由小到大、时间由早到晚降序从大到小排序数字由大到小、时间由晚到早直接确定保存交互无需填写公式、无需绑定局部变量四、功能效果F8预览原型点击对应表头中继器列表即刻重新排布ID、时间字段自动规整排序数据实时刷新。五、重点注意事项表头元件放置在页面外层画布禁止放入中继器内部排序字段必须和中继器原始列名完全一致大小写、文字不可修改数字类选ID列排序日期文本类选时间列排序排序匹配字段类型中文排序有问题大家对中文排序有好方法评论区帮忙给建议
返回列表