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

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

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

二、新增功能

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

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

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

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

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

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

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

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

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

添加用例，隐藏“新增、编辑d窗”：

设置输入框的值为空

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

“添加条件”

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

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

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

最近学习Axure的使用，学到制作自己的元件，又恰好客户制作的原型中需要用到日历，就想到自己制作一个动态变化的日历表，添加到“我的原件”中，于是，我就开始了研究。。。

首先看一下效果：第一张图为界面原始效果，第二张图为点击箭头之后的变化图。

首先我们得知道客户使用日历的先后顺序：显示日历——选择年份月份——选择日期

第一步：显示日历

显示内容：当前年份月份，以及日期。年份月份都很好知道，通过电脑系统即可知道当前年份和月份，方法：获取年份，[[Now.getFullYear()]]；获取月份，[[Now.getMonth()]]；

显示日期就比较麻烦了，要确定每月第一天是星期几，确保每一个单元格内容正确显示，经过多次尝试最终得出正确打开方式：

计算每月第一天：

蔡勒（Zeller）公式：w=y+[y/4]+[c/4]-2c+[26(m+1)/10]+d-1；w：星期；c：世纪-1；y：年（两位数）；m：月（m大于等于3，小于等于14，即在 蔡勒公式 中，某年的1、2月要看作上一年的13、14月来计算，比如2003年1月1日要看作2002年的13月1日来计算）；d：日；[ ]代表取整，即只要整数部分。(C是世纪数减一，y是年份后两位，M是月份，d是日数。1月和2月要按上一年的13月和 14月来算，这时C和y均按上一年取值。)

蔡勒公式得出的结果除以7 取余，余数即为每月第一天对应的是星期几，如：2017年09月第一天为星期五。

需要注意的是：蔡勒公式计算中  取整  问题，Axure  里面没有取整计算方式，所以我一开始使用的是  [[LVAR.toFixed(0)]]，这个方法是保留0位小数，在一开始的设计中，九月份能正常显示，但是十月份第一天就往后推一天（本来是周日，变成周一），后来查资料发现这个公式有四舍五入的效果，而恰好在蔡勒公式中的  [26(m+1)/10]  在十月份的时候是28.6，那么在最终结果上就多出“1”，所以十月份第一天就往后推了一天；问题找到，解决问题：将  [[LVAR.toFixed(0)]]  替换为  [[LVAR.split('.',1)]]。该函数意为：将字符串以“.”分割为1个字符串数组，成功解决问题。

在单元格中正确显示日期：将每个单元格设置名称，从第一个个开始设置为1，第二个设置为2，第三个设置为3，第四个。。。，以此类推，将所有单元格设置名称（星期所在单元格除外）。给每个单元格赋值：[[This.name-MinuendNumber]]，This指的是当前单元格；

完成以上内容基本上可以实现日历显示，只不过我们还需注意各个事件的先后顺序，以及事件的执行时机，进过诸多尝试得出如下执行顺序：显示年份月份的控件：执行    载入时   获取年份月份，获取蔡勒公式中需要的C和Y，并对控件赋值。执行   文本改变时   给月份赋值，同时将日历表显示。

说明：X对应的是蔡勒公式中的年份，Y对应的是蔡勒公式中的世纪数（世纪数不需要减一）。Z对应的是月份数。

日历表：执行  显示时   ，判断月份，根据月份设置月份天数，计算月份第一天的星期数，改变所有单元格的选中状态；

单元格：执行  选中改变时  根据 [[This.name-MinuendNumber]] 结果来判断单元格赋值情况，执行   鼠标单击时  给某一控件赋值。这个就很随意了，直接将单元格内容赋值到某一控件。

第二步：改变年份和月份

这一步是整个日历表最重要的一部分，他是实现日历表动态变化的关键。仅以左侧箭头来说明问题：执行   鼠标单击时  事件：根据月份来判断年份和月份的增减，给显示年月的控件重新赋值，日历表隐藏，日历表显示；

说明：左侧箭头“减”：Case1：月份等于1时，年份减少，月份为12月；Case2：月份大于1时改变月份。

到这，一个完整的日历表就完成了，下面给一个事件执行顺序图，以帮助大家的理解。

另外，需要注意的是单元格点击事件需要作出判断，单元格内容为空的时候作出合理的 *** 作。

实际上在大多数的原型设计中不需要这么复杂的功能设计，只需要展示即可，单复杂的设计有助我们去理解Axure中事件执行的先后顺序，函数的功能等等，所以没事的时候不妨自己设计几个比较好玩的控件也是不错的！

方法/步骤

打开Axure8 找到元件，如下图所示：

请点击输入图片描述

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

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

请点击输入图片描述

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

请点击输入图片描述

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

请点击输入图片描述

请点击输入图片描述

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

请点击输入图片描述

请点击输入图片描述

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

请点击输入图片描述

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

请点击输入图片描述

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

请点击输入图片描述

---