上篇,实现了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预览,并测试添加效果。下一片经验我们继续中继器的其他相关 *** 作。
请点击输入图片描述
如果您说的是直接在中继器添加行显示,点击选中中继器部件,在这里直接编辑
如果是问如何实现点击添加一行数据到中继器中显示,本例是通过点击页面上的“添加”按钮触发添加行 *** 作。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)