关于前端:Axure中继器的增删改查批量查找批量删除

37次阅读

共计 2136 个字符,预计需要花费 6 分钟才能阅读完成。

中继器
引入:1. 款式的频繁批改,2. 数据的频繁批改,重复性工作须要调整
它能够帮忙你在原型页面中保留数据,并且提供增删改查等性能,帮忙你实现简单的交互场景。例如:增加一个好友后,好友列表里就新增一行对应的记录。上传一张照片后,在对应的中央多了一张照片等。
中继器在 Axure 中是极为重要的,上面通过一个案例来实现中继器的根本应用办法,即增删改查,批量查找、批量删除。
搭建框架
从元件库中将中继器拉取到工作区域(记得是拉取而不是单击或是双击)中继器的左上角最好贴着 x 轴为 0,y 轴为 0 的地位 -> 双击中继器进入中继器页面

(2)删除中继器 -> 从元件库中拉取一个方框 -> 方框的左上角要对齐删除中继器中的左上角并且肯定要将中继器覆盖住(本人调整好矩形方框的大小)-> 从元件库中拉取一个图像到方框中并且调整好地位 从元件库中拉取一个题目到方框中并让文字居中(文字随便)敞开中继器。
(3)选中页面中的大方框 -> 款式 -> 布局 -√横向 -> 换行 -> 每项 3 -> 间距为 20-> 点开数据(在款式中)-> 双击 column 改名为 name, 新增列改名为 image-> 将 name 填 3 列 ->image 中右击导入图像即可即可

(4)选中页面中的大方框 -> 交互 -> 新建交互 -> 每项加载时 -> 设置文本 -> 选中一级题目 -> 值改为 item.name-> 插入动作 -> 设置图像 -> 设置 DEFAULT 图片为值 ->fx 插入 Item.image!

新增
绘制模态框,默认暗藏。
用户点击新增按钮,模态框显示,用户输出数据,点击确定按钮,填充数据到数据集中 (留神设置局部变量),模态框敞开
用户再次点击新增按钮,模态框的时候,模态框内有上次填充的值,须要清空,给新增按钮的点击交互里增加动作【设置文本】,设置要清空的元件的值为空。
(1)从元件库中拉取一个按钮并将文字改为新增 -> 而后从元件库中拉取一个动静面板 -> 双击动静面板 -> 新增两个状态(别离为新增和编辑)-> 拉取一个矩形作为底板笼罩在动静模板下面

(2)做一个表单,如图

而后复制一份,粘贴到编辑里

敞开动静面板
(3)点击新增页面 -> 右键 -> 设置为暗藏 -> 点击确定按钮 -> 交互 -> 新建交互 -> 鼠标单击时 -> 设置显示 / 暗藏 -> 抉择动静面板 -> 显示 -> 抉择动画 -> 确定

(4)在单击事件上面插入动作 -> 设置面板状态 -> 动静面板 -> 新增 -> 按确定即可

(5)选中勾销按钮 -> 新建交互 -> 鼠标单击时 -> 设置显示 / 暗藏 -> 动静面板 -> 向上滑动 -> 确定即可

(6)为了防止混同,将新增中的文本框命名为新增输出的值 -> 给编辑框中的输入框命名为编辑输出 -> 选中新增页面中的确定按钮 -> 新建交互 -> 鼠标单击时 -> 新增行 -> 选中中继器 -> 新增行 -> 在 image 上面右键导入图像(不是动静的,模仿)-> 点开 name 上面的 fx 函数 -> 新增局部变量 -> 将以后元件改为新增输出的值 -> 插入变量 LVAR1-> 点击确定即可

接着插动作 -> 显示与暗藏 -> 动静面板 -> 暗藏 -> 向上滑动 -> 确定即可 - 持续插入动作 -> 设置文本 -> 新增输出的值 -> 空 -> 确定

删除行
在样本中的删除按钮上绑定点击交互事件,抉择删除行的操作,抉择操作的中继器
(1)轻易找个删除和编辑的图标,并且放到方框中

(2)选中删除图标 -> 新建交互 -> 鼠标单击时 -> 删除行 -> 中继器 -> 以后元件 -> 确定

批量删除
(1)从元件库中拉取一个按钮,改名为批量删除,接着从元件库中拉取一个复选框放在图片的左上角 ->(如果要将复选框放大则 -> 选中复选框 -> 款式 -> 按钮 - 批改尺寸即可)-> 选中复选框 -> 新建交互 -> 选中 -> 标记行 -> 抉择中继器 -> 以后元件 -> 确定 -> 新建交互 -> 选中项扭转时 -> 勾销标记行 -> 抉择中继器 -> 以后元件 -> 确定即可

(2)选中批量删除按钮 -> 新建交互 -> 鼠标单击时 -> 删除行 -> 抉择中继器 -> 已标记 -> 确定

– 编辑行
中继器中的一条数据中,点击编辑按钮,显示编辑的动静面板,并且文本框中能取得已标记记录的值;点击确认编辑后更新中继器中已标记的数据。
(1)选中编辑图标 -> 新建交互 -> 鼠标单击时 -> 勾销标记行 -> 中继器 -> 全副 -> 确定 -> 插入动作 -> 标记行 -> 抉择中继器 -> 以后元件 -> 确定 -> 插入动作 -> 设置面板状态 -> 抉择动静面板 -> 状态为编辑 ->√上显示面板(如果暗藏)-> 切换到动静面板的编辑 -> 选中编辑地点中的勾销按钮 -> 鼠标单击时 -> 显示 / 暗藏 -> 动静面板 -> 暗藏 -> 确定 -
(2)选中编辑按钮 -> 插入动作 -> 设置文本 -> 编辑输出 -> 点击函数 -> 插入 item.name-> 确定
(3)选中编辑页面中的确定按钮 -> 鼠标单击时 -> 更新行 -> 抉择中继器 -> 抉择已标记 ->+ 选中列 ->name->fx-> 增加局部变量 -> 以后元件改为编辑输出 -> 插入[[LVAR1]] 变量 -> 确定 -> 实现 -> 插入动作 -> 显示 / 暗藏 -> 动静面板 -> 暗藏 -> 确定
(4)搭建查问按钮和文本框 -> 文本框重命名为 searchInput-> 选中查问按钮 -> 新建交互 -> 鼠标单击时 -> 新增过滤器 -> 抉择中继器 -> 名称轻易写(我写 search)-> 点击 fx-> 新增局部变量 -> 以后元件改为 searchInput-> 插入变量函数 -> 抉择 item.name 并且批改如下图即可

而后确定后文章就实现了中继器的增删改查啦!

正文完
 0