Axure中继器的运用——实现数据库增删改查效果

中继器实现数据库的增删改查效果时十分有效的,下面展示一个简单的应用实例:


一 中继器绘制与数据交互

1.1 设置中继器样式,此处用表格来展示

Axure中继器的运用——实现数据库增删改查效果_第1张图片

目前先使用1*4的表格,表示四个属性,属性如下。


1.2 输入数据

Axure中继器的运用——实现数据库增删改查效果_第2张图片


1.3 设置交互效果

Axure中继器的运用——实现数据库增删改查效果_第3张图片

让数据集中的数据显示在交互界面上;

效果如下:

Axure中继器的运用——实现数据库增删改查效果_第4张图片

此时,初步绘制完成,开始添加对应功能。


二 新增商品信息功能

2.1 绘制遮罩与新增表格页面

遮罩的灰色可以调30-40左右的不透明度,达到美观效果;

Axure中继器的运用——实现数据库增删改查效果_第5张图片

属性在初始状态下设置为隐藏;


2.2 对添加信息按钮添加交互效果

Axure中继器的运用——实现数据库增删改查效果_第6张图片

效果如下,单击添加信息按钮后

 Axure中继器的运用——实现数据库增删改查效果_第7张图片


2.3 添加数据到数据集

Axure中继器的运用——实现数据库增删改查效果_第8张图片

Axure中继器的运用——实现数据库增删改查效果_第9张图片

记得将文本框数据初始化;


2.4 效果展示

Axure中继器的运用——实现数据库增删改查效果_第10张图片

 Axure中继器的运用——实现数据库增删改查效果_第11张图片


三 删除功能

3.1 界面改善

添加复选框 用以实现全选功能

Axure中继器的运用——实现数据库增删改查效果_第12张图片

效果如下:

Axure中继器的运用——实现数据库增删改查效果_第13张图片


3.2 设置标记状态

设置中继器内复选框状态改变时的标记效果

Axure中继器的运用——实现数据库增删改查效果_第14张图片

设置表头中全选按钮的标记效果

Axure中继器的运用——实现数据库增删改查效果_第15张图片


3.3 实现删除功能的交互效果

 

3.4 效果展示

效果如下,单击全选时

Axure中继器的运用——实现数据库增删改查效果_第16张图片

删除后

Axure中继器的运用——实现数据库增删改查效果_第17张图片

 也可只勾选部分数据,进行部分的删除;


四 修改功能

4.1 完善中继器

增加修改功能按钮


 Axure中继器的运用——实现数据库增删改查效果_第18张图片

4.2 创建一个修改界面


4.3 对修改按钮实现交互效果

让原先数据集结果显示在修改页中

Axure中继器的运用——实现数据库增删改查效果_第19张图片


修改页面中的修改按钮的交互效果,完成更新行操作,不要忘记了数据的初始化;

Axure中继器的运用——实现数据库增删改查效果_第20张图片

Axure中继器的运用——实现数据库增删改查效果_第21张图片

Axure中继器的运用——实现数据库增删改查效果_第22张图片

4.4 效果展示

修改第一条数据时,页面弹出

Axure中继器的运用——实现数据库增删改查效果_第23张图片

修改后

Axure中继器的运用——实现数据库增删改查效果_第24张图片

 

五 查找功能

查询操作可利用交互效果中的过滤器效果,添加或删除过滤器;

此处展示ID搜索;

5.1 交互效果设置

Axure中继器的运用——实现数据库增删改查效果_第25张图片

Axure中继器的运用——实现数据库增删改查效果_第26张图片

局部变量为文本框内的ID值;


5.2 效果如下

Axure中继器的运用——实现数据库增删改查效果_第27张图片

小结:

除了上面的功能外,依旧可以实现多条件搜索,数据及排序,分页效果,中继器样式等的进一步操作,在此不多做缀述; 

中继器的运用实例到此结束,谢谢。


你可能感兴趣的:(AXxure)