网站建设 社群运营 Axure教程:如何用中继器实现删除、编辑数据及排序、分页

Axure教程:如何用中继器实现删除、编辑数据及排序、分页

中企动力企业交流群

编辑导读:本文是关于Axure中继器的运用操作,作者详细讲解了利用Axure中继器实现删除、编辑数据及排序、分页的操作流程,比较基础,供初学者参考学习。

在上文《中继器实现列表添加数据案例》中,我们利用中继器实现了列表数据的新增,这一篇,我们会在上篇的基础上讲解删除列表一行数据、编辑数据、排序、分页的应用。

预览:https://jipr1h.axshare.com

一、删除

1. 准备元件

动态面板(这个在添加的基础上进行复制修改)、删除的按钮、其余元件大家参考上篇,这边不作多余赘述;

在上进行复制为state2,然后修改为;如下

将添加的文本框分别命名(方便后文与中继器绑定)

2. 为按钮添加交互

(1)选中表格中的,添加的交互用例,添加动作动态面板,选择;

(2)接下来添加动作,选中动态面板,设置面板状态为state2(即删除的面板)

(3)接下来添加动作,选中中继器,选择全部

(4)添加动作,设置标记当前选中的行,

(5)设置动态面板中的文本框的文本,分别与中继器列对应,如设置为[[Item.xingming]]如下图

二、排序

1. 准备元件

排序的下拉列表(输入按时间排序和按姓名排序)、表格(沿用上文的元件)

2. 添加交互

(1)选中下拉列表,添加的交互用例,找到中继器选择,设置为按照排序,如下图:

(2)选中下拉列表,设置的交互用例,添加动作为“按时间排序”

然后为这一动作添加条件,即被选项是按姓名排序

然后添加的用例2,添加动作,设置为按照时间排序,排序方式是日期,条件不用编辑,如下图

(3)设置完点击确定,进行预览,如下图

三、分页

1. 准备元件

分页元件,表格,如下图

2. 设置交互

选中分页向左按钮(或添加热区覆盖在上面),添加的交互用例,为中继器添加动作,选择前一页,如下图

按照同样的方法,为向右按钮添加交互;

选中页码1,添加的交互用例,设置当前显示页面为2;

我们可以在样式中设置中继器每页显示的项目数

按照同样的方法,为其他页码添加交互;完成后预览;

整体预览地址如下:https://jipr1h.axshare.com

四、编辑修改数据

交互:点击编辑按钮,显示编辑弹框,为灯箱效果,弹框中显示已选中的数据,且可在文本框中编辑文字,编辑完后点击确定,隐藏编辑弹框,并且列表中数据进行更新。

预览:https://jipr1h.axshare.com

1. 准备元件

编辑弹框(可复制添加弹框)、编辑按钮、表格

2. 设置交互

(1)选中编辑按钮,添加的交互案例,设置显示动态面板,灯箱效果,同时设置面板状态为编辑弹框。

(2)设置中继器的全部,同时选中中继器的This,

(3)设置文本,分别将动态面板中编辑弹框的文本框与中继器的列进行绑定;

(4)选中编辑弹框中的按钮,设置的用例,设置隐藏动态面板,同时设置中继器,选中的行,并设置中继器的列。

(5)点击确定,进行预览:https://jipr1h.axshare.com

中企动力企业交流群

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。 如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章

以上产品还未完全满足我的所有需求,在下方提交我的专属需求
我的专属需求:
*手机号:
*验证码:
img
咨询报价
现在咨询