Axure中继器的增删改查、批量查找、批量删除

流走的年华
English

中继器
引入:1.样式的频繁修改,2.数据的频繁修改,重复性工作需要调整
它可以帮助你在原型页面中保存数据,并且提供增删改查等功能,帮助你完成复杂的交互场景。例如:添加一个好友后,好友列表里就新增一行对应的记录。上传一张照片后,在对应的地方多了一张照片等。
中继器在Axure中是极为重要的,下面通过一个案例来实现中继器的基本使用方法,即增删改查,批量查找、批量删除。
搭建框架
从元件库中将中继器拉取到工作区域(记得是拉取而不是单击或是双击)中继器的左上角最好贴着x轴为0,y轴为0的位置->双击中继器进入中继器页面
图片.png
(2)删除中继器->从元件库中拉取一个方框->方框的左上角要对齐删除中继器中的左上角并且一定要将中继器覆盖住(自己调整好矩形方框的大小)->从元件库中拉取一个图像到方框中并且调整好位置图片.png从元件库中拉取一个标题到方框中并让文字居中(文字随意)图片.png关闭中继器。
(3)选中页面中的大方框->样式->布局-√横向->换行->每项3->间距为20->点开数据(在样式中)->双击column改名为name,新增列改名为image->将name填3列->image中右击导入图像即可即可
图片.png图片.png
(4)选中页面中的大方框->交互->新建交互->每项加载时->设置文本->选中一级标题->值改为item.name->插入动作->设置图像->设置DEFAULT图片为值->fx插入Item.image!
图片.png
新增
绘制模态框,默认隐藏。
用户点击新增按钮,模态框显示,用户输入数据,点击确定按钮,填充数据到数据集中(注意设置局部变量),模态框关闭
用户再次点击新增按钮,模态框的时候,模态框内有上次填充的值,需要清空,给新增按钮的点击交互里添加动作【设置文本】,设置要清空的元件的值为空。
(1)从元件库中拉取一个按钮并将文字改为新增->然后从元件库中拉取一个动态面板->双击动态面板->新增两个状态(分别为新增和编辑)->拉取一个矩形作为底板覆盖在动态模板上面
图片.png
(2)做一个表单,如图
图片.png
然后复制一份,粘贴到编辑里
图片.png
关闭动态面板
(3)点击新增页面->右键->设置为隐藏->点击确定按钮->交互->新建交互->鼠标单击时->设置显示/隐藏->选择动态面板->显示->选择动画->确定
图片.png
(4)在单击事件下面插入动作->设置面板状态->动态面板->新增->按确定即可
图片.png
(5)选中取消按钮->新建交互->鼠标单击时->设置显示/隐藏->动态面板->向上滑动->确定即可
图片.png
(6)为了避免混淆,将新增中的文本框命名为新增输入的值->给编辑框中的输入框命名为编辑输入->选中新增页面中的确定按钮->新建交互->鼠标单击时->新增行->选中中继器->新增行->在image下面右键导入图像(不是动态的,模拟)->点开name下面的fx函数->新增局部变量->将当前元件改为新增输入的值->插入变量LVAR1->点击确定即可
图片.png
接着插动作->显示与隐藏->动态面板->隐藏->向上滑动->确定即可-继续插入动作->设置文本->新增输入的值->空->确定
图片.png

删除行
在样本中的删除按钮上绑定点击交互事件,选择删除行的操作,选择操作的中继器
(1)随便找个删除和编辑的图标,并且放到方框中
图片.png
(2)选中删除图标->新建交互->鼠标单击时->删除行->中继器->当前元件->确定
图片.png
批量删除
(1)从元件库中拉取一个按钮,改名为批量删除,接着从元件库中拉取一个复选框放在图片的左上角->(如果要将复选框放大则->选中复选框->样式->按钮-修改尺寸即可)->选中复选框->新建交互->选中->标记行->选择中继器->当前元件->确定->新建交互->选中项改变时->取消标记行->选择中继器->当前元件->确定即可
图片.png
(2)选中批量删除按钮->新建交互->鼠标单击时->删除行->选择中继器->已标记->确定
图片.png
- 编辑行
中继器中的一条数据中,点击编辑按钮,显示编辑的动态面板,并且文本框中能获得已标记记录的值;点击确认编辑后更新中继器中已标记的数据。
(1)选中编辑图标->新建交互->鼠标单击时->取消标记行->中继器->全部->确定->插入动作->标记行->选择中继器->当前元件->确定->插入动作->设置面板状态->选择动态面板->状态为编辑->√上显示面板(如果隐藏)->切换到动态面板的编辑->选中编辑地点中的取消按钮->鼠标单击时->显示/隐藏->动态面板->隐藏->确定-
(2)选中编辑按钮->插入动作->设置文本->编辑输入->点击函数->插入item.name->确定
(3)选中编辑页面中的确定按钮->鼠标单击时->更新行->选择中继器->选择已标记->+选中列->name->fx->添加局部变量->当前元件改为编辑输入->插入[[LVAR1]]变量->确定->完成->插入动作->显示/隐藏->动态面板->隐藏->确定
(4)搭建查询按钮和文本框->文本框重命名为searchInput->选中查询按钮->新建交互->鼠标单击时->新增过滤器->选择中继器->名称随便写(我写search)->点击fx->新增局部变量->当前元件改为searchInput->插入变量函数->选择item.name并且修改如下图即可
图片.png
然后确定后文章就完成了中继器的增删改查啦!

阅读 417
4 声望
1 粉丝
0 条评论
你知道吗?

4 声望
1 粉丝
宣传栏