在设计原型的过程中,经常会涉及到表格的设计,如何能让表格实现数据的增删改查操作,制作出高保真的原型,而 Axure 的中继器组件便能够让用户体验到操作真实软件的感觉。
1 认识中继器
什么是中继器?
中继器部件是用来显示重复的文本、图片和链接。通常使用中继器来显示商品列表信息、联系人信息、用户信息等等。
中继器的组成
一个中继器组件由两部分组成, 数据集
和 项
。
中继器数据集
中继器的项
双击中继器组件就会打开 中继器的项
, 项
可以对应 数据集
中的一列数据 。默认的 项
本质上就是一个 矩形组件
而已,可以对它进行任意的修改,设置用其它组件替换。
中继器的使用场景
- 表格信息
- 文章列表信息
- 商品图片信息
- 订单列表信息
- …
2 绑定数据
(1) 创建中继器组件
(2) 在 Properties 的 Repeater 下编辑 中继器组件的数据集
(3) 编辑 中继器组件的项
(4) 项
和 数据集
绑定: 在 OnItemLoad
事件中为需要填充数据的地方 Set Text
3 新增数据之弹出窗设计
- 使用动态面板:因为弹出窗既可以用来新增数据,也可以用来编辑数据,存在多种状态
- 包含遮罩和弹窗两部分
- 为了不影响原型的设计操作,应当把用来弹窗的动态面板置于底层,并隐藏
4 新增数据
(1) 为 保存
按钮注册 onClick
(2) 在 case editor 中,Repeater > Datesets > Add Rows > 选择目标中继器组件 >
(3) 弹出 Add Rows Reapter 窗口,分别设置每个属性
其中每个属性都在 fx 中完成设置(以员工编号为例)
注意,部门和其它属性不同!
(4) 为两个 关闭
按钮注册 onClick
5 删除数据
功能说明
实现步骤
行内删除
删除一行数据项。
(1) 为 中继器项
中的 删除
注册 onClick
(2) 在 Case Editor
中, Repeater > Datasets > Mark Rows
,标记所在当前行;
(3) 在 Case Editor
中, Repeater > Datasets > Delete Rows
, 删除中继器中被标记的行。
全局删除
删除所有勾选了的数据项。
(1) 全选 和 全不选;
为全选复选框注册 onSelectedChange
(2) 当行内复选框被勾选时,当前行被标记;当去掉勾选时,删除标记;
为 中继器项
中的复选框注册 onSelected 和 onUnselected
(3) 点击全局删除按钮时,删除所有被标记的行
6 修改数据之弹出窗口初始化
功能说明
实现步骤
为 中继器项
中的 修改
注册 onClick
(1) 将弹出窗显示出来,并放置在最顶层;
(2) 分别将 中继器数据集
对应当前行的数据取出来,赋值给表单中对应的 input 或 select。
值时通过本地变量获取的,以 员工编号为例
:
7 修改数据之保存修改
(1) 新增一个全局变量来区分弹出窗的保存按钮,是 新增
还是 修改
;
(2) 单击 修改
(3) 单击 保存
8 数据搜索
通过使用 Repeater 的过滤器完成检索。
8.1 按姓名检索
功能说明
(1) 在搜索框输入要搜索的名字
(2) 点击搜索按钮,显示过滤后的结果
实现步骤
(1) 添加搜索相关组件
(2) 为搜索按钮注册事件
要点
添加过滤器
移除过滤器
8.2 按部门和姓名组合搜索
功能说明
实现步骤
(1) 组合搜索相关组件
(2) 为搜索按钮注册事件
9 数据排序
功能说明
点击员工编号区域,触发排序。升序和降序交替进行。
实现步骤
(1) 在 员工编号
旁边添加一个下三角
(2) 为 员工编号
添加热区
(3) 注册事件Repeaters > Add Sort
10 分页
效果
实现步骤
(1) 设置 中继器组件
分页显示
(2) 创建分页相关按钮,注册相关事件Repeaters > Set Current Page
- 首页
上一页
下一页
尾页
- 页码