Axure实现表格的编辑 *** 作

上篇： Axure实现表格的新增 *** 作 -

上篇，实现了表格的新增 *** 作，本文介绍表格的编辑 *** 作。

三、编辑功能

1、设置“编辑按钮”的鼠标点击时用例，因为编辑 *** 作和新增 *** 作，共用同一个“新增、编辑d窗”，所以需要把d窗中的“ *** 作标题”的值更改为“编辑”

再选择显示“新增、编辑窗口”

取消所有行的标记

标记选到的行：

得到结果：

设置输入框的值，将列表中需要编辑的行的数据，展示在输入框，用于修改。

同理设置其他输入框的值

得到结果：

2、保存编辑数据，“新增、编辑d窗”中“确认按钮”的“鼠标点击时”用例，添加条件：

选择“中继器-更新行”，更新标记的行的数据

使用局部变量：

设置每一列的更新数据

数据更新完成后，为了符合日常习惯。隐藏“新增、编辑d窗”、设置d窗中的每个输入框的值为空，并取消所有标记的行。

由此，完成编辑 *** 作。

下一篇： Axure实现表格的删除 *** 作 -

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

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

二、新增功能

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

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

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

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

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

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

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

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

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

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

设置输入框的值为空

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

“添加条件”

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

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

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

注：本文以全新小鸟（包含最基本步骤）的为阅读对象！排版布局仅做demo参考，一切力求最简，如有任何异议请评论指出，谢谢！

一般的新闻列表会配有图片（pic）、标题（tittle）、阅读量（click）和新闻日期（date）等的内容，而每一条新闻的布局相同，在这里，我们将要制作出相同布局、不同内容的列表，以求更接近实际的成品项目。

1.将Axure元件库里的中继器拖入至工作区

2.双击工作区中的原件，进入中继器编辑页，删掉原有的方框，拖入一个图片原件和四个矩形，调整矩形的大小和样式，在矩形内用文字标出相应的部分名称，调整整体的布局如下图所示：

3.此时index页面展示情况如上图所示，为一列三行的相同布局，原因是在检视一栏中，中继器原件的默认是三行一列，需要修改为相应的栏目名称和内容，如下图1-6（b）（注：a.表题的内容填写只允许为字母或数字，不可以填写汉字b.图片的导入为右键选择“导入图片”）：

至此，即使已经在中继器内填好了相应内容，但发布后也是没有内容的，因为没有对中继器进行传值！

4.选中index页的中继器，在交互中选择“每项加载时”进行设置（当然选择“载入时”效果也是差不多的，具体场景具体变换即可），如下图：

每设置完一个参数，编辑区会展示出来相应的列表内容，在参数为图片的时候要注意，设置“图片”而非默认的“文本”，之后选择引用值名称即可，如下图

1.如图，拖入两个矩形，输入对应内容

2.给两个矩形分别添加对应的单击事件，并且排序：

ps：最好给中继器编写名称，不至于分不清是哪个中继器

是不是很欢快呢~~~为朋友解决了导入不同图片的问题后，就在此时，对方又提出要实现三行四列的排序，虽然在我的内心认为和上述方法也是一样的，但是朋友似乎并不理解，非要我做出来给ta看，emmmm.....

在part 1的基础上，对中继器继续添加内容，并且双击中继器，设置其样式。选择“网格布局”后，选择“水平”布局，每行项目数设置为 3，这样，一共有10条数据的列表就会被分为四行三列的表格样式，从左至右排序。相应的，如果需要从上至下排序，则修改至选中“垂直”布局，此时页面情况为三行四列，第四列空余两项：

注意：一定不要再在中继器的编辑区内，将同一布局样式整体重复复制粘添好几条了！！这样图片不出问题才怪呢！此外，中继器的样式里面可以编辑每条的间隔哦，以及交替背景、分页什么的，巴拉巴拉...

希望对同样有疑惑的朋友有所帮助

完结，收工~~~

---