利用Axure 9中继器绘制数据统计表原型图

基础表格搭建

中间表格部分采用中继器实现了表格的渲染。

什么是中继器?

中继器是Axure中主要用于展示重复结构数据的交互元件,有效的避免了大量创建重复元件。

中继器可以快速创建表格,动态绑定数据以及支持交互逻辑的重复使用。在商品列表、购物车、好友列表又或者是用户管理后台等等都有使用。

以上表格通过填写数据就可以实现基本的数据渲染。

表格奇偶行背景颜色的差异设置需要选中中继器,在样式部分勾选交替颜色,设置需要交替的颜色即可。

新增数据

增设新增数据这一效果有两种方式,第一种就是直接创建好需要添加的数据,点击按钮表格添加行;第二种方式需要动态的实现新增行这一效果。

点击右上角新增按钮之后页面弹出添加数据的对话框。首先搭建好添加数据对话框。

选中整个对话框元件,右键创建动态面板。

同时页面还需要覆盖上一层遮罩。

将遮罩置于新增弹窗的底层。

为新增按钮添加交互事件。

将遮罩和新增弹窗移动到合适的位置再令其显示在页面上。

关闭弹窗功能部分需要考虑三点:

  1. 点击遮罩可以关闭弹窗
  2. 取消按钮关闭弹窗
  3. 输入新增数据之后点击确认数据新增成功并且弹窗关闭。

点击遮罩关闭弹窗

即设置遮罩和新增弹窗全部隐藏。

取消按钮关闭弹窗

这个部分与点击遮罩关闭弹窗的交互效果相似,但还需要考虑到的一点就是当用户输入了部分信息之后不想创建数据了,那么此时点击取消需要将输入框清空。

新增数据成功后弹窗关闭。

首先需要设置全局变量,由于表格渲染最初的数据是六条,因此全局变量数值应为6

当数据新增的时候,数据id值是依次自加的,利用全局变量依次自加1的话就可以解决数据表id值列的值变化。

新增行数据每个单元格的内容都应该是动态的,通过设置局部变量获取用户输入框输入的值,然后添加到每个单元格当中。

页面数据输入完毕之后,点击添加按钮的逻辑与取消按钮的交互事件逻辑一致。

删除数据

每一行数据都有一列对应的操作,用户点击删除按钮页面弹出"是否确认删除"的弹窗,点击确认对应的行删除。

点击删除文本的时候弹出删除对话框,遮罩与对话框都需要移动并且显现出来,最重要的是应该标记当前行,避免在弹框当中点击删除不方便查找到对应的行

关闭弹窗的逻辑与新增数据页面的逻辑一致。

删除部分的交互事件首先需要删除行,此时的行是此前在删除文本当中标记过的行,顺利删除行之后还需要取消标记行,防止第二行数据已经删除,但是第三行到了第二行这个位置之后也被影响到。

弹窗更新数据

点击修改页面弹出更新弹窗,输入希望修改的数据点击更新按钮数据修改。

首先创建更新弹窗。

修改文本创建交互事件,注意需要将对应行的数据都填入更新弹窗的输入框中。

此时需要为每个部分都设置文本以及设置选定的列表项。

触发事件部分相当于引用了取消按钮的交互事件,关闭弹窗并且清空了输入框的数据。

原位修改数据

文本框原位修改

双击进入中继器,拉入一个输入框与单元格大小一致。

为矩形设置交互事件,当点击单元格的时候输入框显示出来,可以直接输入想要更改的数据。

输入框输入的内容需要更新对应数据,并且失去焦点的时候需要隐藏输入框。

下拉框原位修改

单击矩形框将框内的值赋给下拉框。

当用户修改好之后单元格失去焦点就把修改后的值赋给矩形框,并且下拉框消失。

今日学习了中继器内容的增删改,每一个功能的实现都有好几种方式。

总体实现效果如下:

相关推荐
hstar952714 小时前
三十四、面向对象底层逻辑-SpringMVC九大组件之FlashMapManager接口设计哲学
java·spring·设计模式·架构
秋田君15 小时前
深入理解JavaScript设计模式之单例模式
javascript·单例模式·设计模式
Dave_Young16 小时前
上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式
c++·设计模式
on the way 12317 小时前
行为设计模式之Command (命令)
java·开发语言·设计模式
哆啦A梦的口袋呀17 小时前
基于Python学习《Head First设计模式》第八章 模板方法模式
python·学习·设计模式
qqxhb17 小时前
零基础设计模式——行为型模式 - 责任链模式
java·设计模式·责任链模式
黎䪽圓1 天前
【Java多线程从青铜到王者】单例设计模式(八)
java·开发语言·设计模式
小小神仙1 天前
JSCommon系列 - 为什么前端没有 Apache Commons?
前端·javascript·设计模式
蔡蓝1 天前
设计模式-抽象工厂模式
设计模式·抽象工厂模式