Axure9中继器内部实现批量操作

复选框情形

右键 > 创建动态面板。

面板内部有两种状态,一种是勾选,一种是未勾选(默认状态)。

为动态面板新建交互,分两种不同的情况,如果当前状况是未勾选,那么面板状态切换至已勾选;反之亦然。

将外部创建好的复选框复制到中继器内部。

总复选框控制其他分支

在表头的复选框新建一个交互,控制中继器内部复选框状态。

两个部分的复选框状态必须一致。

勾选数据点击按钮一键删除

首先,创建一个全局变量,作为计数器,方便计算用户勾选的需要删除的数据。

进入中继器 > 选中复选框 > 新建交互 > 设置变量值

与之相反,当用户取消勾选的时候,值应该 -1 。

图中按钮需要设为隐藏,只有当用户勾选数据大于等于2的时候按钮才会出现。

交互设置完成之后,必须在中继器内部的复选框设置一个触发事件,触发按钮。

当然,此时在中继器内部的复选框设置触发事件是不够的,同样也需要在表头的复选框设置相同的触发事件。

由于每一页固定显示数据是10,全选的话就相当于选中的数值为10。

需要删除的条数也应该动态的显示在按钮之上。

选中 >=2 的情况 > 设置文本

为删除按钮创建交互,实现删除效果。

由于设置删除按钮交互的时候是删除标记行,那么需要再中继器内部设置动态标记行。

勾选上的数据删除成功之后需要隐藏按钮。

全选状况下的标记行(难点)

函数还需要进行一个判断,只有它的值为rue才能够标记可见的。

当然在没有勾选的状况下还需要取消标记,此时直接取消全部标记即可。

外部复选框点击勾选之后,切换页面需要将切换勾选状态。

批量操作整体效果实现

相关推荐
Zane19943 天前
一个 new 就能创建对象,为什么还要拆出单例、工厂、建造者、原型四种模式?
设计模式
怕浪猫4 天前
一行命令复刻爆款视频,我把 Hypit 从安装跑到了出片
人工智能·设计模式·程序员
Zane19944 天前
函数式编程里的函数,其实不是你天天写的那个函数——三大编程范式的边界在哪
设计模式
xy34535 天前
Axure 9.0 中继器核心结构
前端·ui·html·axure·原型·产品设计
sarasuki5 天前
工具设计的坏味道:什么样的定义会让模型乱调
人工智能·agent·设计
Zane19945 天前
策略模式现在该不该上?一次讲清楚过度设计和设计不足怎么找平衡
设计模式
她说..5 天前
常见设计模式-模板方法模式
java·spring·设计模式·springboot
xiaofeiyang1505 天前
第六章 · 桥接 — 三支毛笔,画出九种颜色
设计模式
Shadow(⊙o⊙)6 天前
OTOL设计模式 One Thread One Loop
服务器·网络·设计模式
sarasuki7 天前
如何让LLM 能在半夜偷偷打开网易云呢?
人工智能·设计模式·agent