Axure实现表格的新增 *** 作

Axure实现表格的新增 *** 作,第1张

 上篇: Axure中继器实现绘制表格 -

上篇,实现了Axure绘制表格,本文介绍表格的新增 *** 作。

二、新增功能

1、绘制新增的d窗,并给输入框和 *** 作标签命名,d窗的样式和组件命名如图:

将d窗各个组件组合,命名为:“新增、编辑d窗”,并将d窗隐藏。

2、增加“新增”按钮,根据个人喜好设置背景色和字体颜色。

设置“新增”的“鼠标点击时”,显示“新增、编辑d窗”。

3、设置“新增、编辑d窗”中输入框的值与中继器绑定

1)设置“确认按钮”的“鼠标点击时”用例

同理,绑定姓名输入和性别输入的值

即可完成“内容列表”新增数据。

2)为了更符合日常使用习惯,新增记录后隐藏d窗,并将输入框的数据清0

添加用例,隐藏“新增、编辑d窗”:

设置输入框的值为空

3)由于后面的“编辑”也需要该窗口,因此需要在点击确认时做新增和编辑的判定。

“添加条件”

设置“ *** 作标题”为新增时,执行添加行等 *** 作

4)设置“取消”按钮“鼠标点击时”。隐藏“新增、编辑d窗”、设置输入框的值为空

下一篇: Axure实现表格的编辑 *** 作 -

方法/步骤

打开Axure8 找到元件,如下图所示:

请点击输入图片描述

根据下图做出界面布局,元件有:中继器一个,按钮三个(添加、编辑、删除)、文本框一个(添加、编辑时输入使用)

根据图示,对各个元件名称:中继器、添加按钮、编辑按钮、删除按钮、文本、中继器内容(使用axure时一定要记得对元件命名,元件相同的太多就会混乱,影响思路)

请点击输入图片描述

布局做好后,先简单认识一下 中继器,系统默认为我们添加了三个内容,以及设置了一个交互用例:

请点击输入图片描述

选中“添加”按钮,点击交互用例”鼠标单击时“,d出”用例编辑“窗体,选择  中继器-->添加行,选中右侧 ”中继器“字样,点击下面的”添加行“按钮。

请点击输入图片描述

请点击输入图片描述

在d出的窗体上点击如图所示的地方,来添加一个局部变量:

请点击输入图片描述

请点击输入图片描述

根据下图所示,设置局部变量:先选择”元件文字“,再选择元件”文本“,意思是:变量 等于 所选择元件的文字;

请点击输入图片描述

点击上面的”插入变量或函数“ 找到变量,点击即可。效果如下图:

请点击输入图片描述

一路确定后,F5预览,并测试添加效果。下一片经验我们继续中继器的其他相关 *** 作。

请点击输入图片描述

如果您说的是直接在中继器添加行显示,点击选中中继器部件,在这里直接编辑

如果是问如何实现点击添加一行数据到中继器中显示,本例是通过点击页面上的“添加”按钮触发添加行 *** 作。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11736488.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存