相关链接
1. 了解使用中继器，新增数据的实现方式
一、成品效果
Axure Cloud 案例24【中继器 - 后台管理系统2】新增数据
一、简介
1.1 除了基本的新增功能，还额外添加了很多快捷操作，都是符合用户操作习惯的。比如：点击弹窗外部，退出弹窗；点击esc退出弹窗；点击enter提交数据等。但输入框中使用tab键切换功能Axure并不能实现，这里我使用alt、shift+alt键代替tab、shift+tab的快捷操作。
二、共 x 条记录
2.1 新增数据后 实时显示 当前数据量（使用富文本框 + [[This.itemCount]]函数）。
三、信息设备列表
3.1 点击 新增 按钮，新增数据弹窗 显示。
3.2 点击 新增 按钮，信息设备列表部分置灰。
四、弹窗相关快捷操作
4.1 当前无弹窗时，键盘点击enter -> 新增数据弹窗 显示。（效果等于点击新增按钮）
4.2 当前有弹窗时，键盘点击esc -> 新增数据弹窗 隐藏。
4.3 当前有弹窗时，鼠标单击弹窗以外部分 -> 新增数据弹窗 隐藏。
4.4 当前有弹窗时，键盘点击enter -> 进行 提交 操作。（效果等于点击提交按钮）
4.5 当前有弹窗时，键盘点击alt -> 光标焦点进入下一文本框，并选中文本框中的文本。
4.6 当前有弹窗时，键盘点击shift+alt -> 光标焦点进入上一文本框，并选中文本框中的文本。
五、弹窗内部
5.1 点击 提交 按钮，将填入信息新增到设备信息列表中。
5.2 输入信息时，无需输入设备编号，编号逻辑为 自增。
5.3 点击 提交 按钮，新增数据弹窗 隐藏。
5.4 点击 提交 按钮，更新当前记录条数（共x条记录）。
5.5 点击 提交 按钮，当前输入信息保留，不清空。
5.6 点击 清空 按钮，所有输入框内容清空，下拉框变为默认选项。
六、弹窗内部校验
6.1 校验：设备名称、规格型号、生产厂商 不能为空。
a) 以上三者之一为空，并执行 提交动作 时，输入框上方提示 字体变红色。
b) 三个(必填)至多有一个处于红色状态。（选项组+选中状态）
6.2 校验：购置价格必须为 >0的数字。
a) 上方校验不通过则 出现提示： >0的数字。等待5000ms后，隐藏提示。
b) 校验不合法输入时，除了提示信息，还要将光标放入该输入框。（获取焦点，获取焦点时选中元件上的文本）
历史版本：Axure Cloud 案例23【中继器 - 后台管理系统1】框架搭建
一、框架搭建
1.1 按照 视频 -> 【中继器实战 xxx】 搭建即可，内容较琐碎。页面基本无任何交互功能，仅设计布局及界面。
二、素材准备
使用Axure自带元件。
三、制作方法
整体分为四大部分：1.弹窗c（默认隐藏）、2.标题栏t、3.主内容m、4.背景b。（按图层顺序）
其中 标题栏t、主内容m、背景b 在 案例23 中基本已完成，但也有部分修改。
页面 设置交互：
3.1 背景b
无修改内容，建议设置 锁定位置和尺寸。避免误操作移动背景（锁定后，可以看到元件周围出现红色方块）。
3.2 主内容m
结构上分为以下5小部分：1-文字描述、2-按钮、3-数据列表标题、4-数据列表内容、5-分页。
3.2.1 文字描述
无交互内容
3.2.2 按钮
新增 按钮设置交互：
3.3.3 数据列表标题
无交互内容，对齐表格（中继器）即可
3.3.4 数据列表内容
与案例23 相比，新增蓝框部分内容：
变量：
eq_code：[[Math.max(Item.eq_code)+1]]
count：[[Item.Repeater.itemCount]]
其中：
Math.max() ：获取多个值中的最大值。
Item.eq_code：获取所有的编号。
Math.max(Item.eq_code)：获取当前最大的编号。
Math.max(Item.eq_code)+1：获取当前最大的编号+1。用于给新增数据 id自增 使用。
Item.Repeater.itemCount：获取当前数据量，用于显示 共x条记录 时使用。
原理： 每次数据新增时，都会触发 每次加载 动作。同时计算出下一个自增id值，以及当前数据总量。
注：由于案例目前还未涉及 筛选、删除 功能，所以还不确定其是否会触发 每次加载 动作、并导致自增id计算错误问题。（到后面测试）
共x条记录： 选择富文本，富文本可以设置字体颜色和样式。
设置值：共 [[This.itemCount]] 条记录
也可以用：共 [[Item.Repeater.itemCount]] 条记录或共 [[count]] 条记录
3.3.5 分页
无任何交互：
3.3 标题栏t
与案例23 相同，无任何交互，无任何变化：
3.4 弹窗c
弹窗相关元件设为一个大的组合，默认是隐藏的，只有点击时才会展开。
弹窗c分为7部分组成：1.提示文字、2.输入框、3.文字描述、4.按钮、5.背景、6.置灰、7.提交
3.4.1 提示文字
无任何交互，但要注意
1. 提示文字-5.购置价格 默认为隐藏
2. 【1.设备名称】、【3.规格型号】、【4.生产厂商】设为同一选项组，选中样式如下：
3.4.2 输入框
由4个文本框、2个下拉框组成。文本框设置交互，下拉框不需要设置交互。
在任一文本框中：
按下enter(Return)键：执行提交动作
按下alt键：光标移入下一个输入框并选中文字（tab键冲突不能使用，用alt模拟tab键效果）。
按下shift + alt键：光标移入上一个输入框并选中文字（tab键冲突不能使用，用alt模拟tab键效果）。
其中：
第一个输入框不需要设置shift +alt键，因为第一个文本框不存在"上一个输入框"。
第四个输入框不需要设置shift +alt键，因为第四个文本框不存在"下一个输入框"。
3.4.3 文字描述
无任何交互
3.4.4 按钮
清空按钮：
1. 所有输入框置空
2. 输入下拉选项置为默认选项
3. 光标回到第一个输入框（设备名称）
4. 提示框全部变为为选中状态（黑色字体）
提交按钮：通过热区进行提交动作，此方法在案例22 中有详细描述。
3.4.5 背景
无任何交互
3.4.6 热区
矩形：实现置灰效果：#000000 ，20%透明度，其位置正好覆盖下层主内容，大小一致。
热区：
3.4.7 提交（重点）
执行校验、提交操作，共5中情形：
1. 设备名称校验
2. 规格型号 校验
3. 生产厂商 校验
4. 购置价格 校验
5. 校验成功，提交数据
利用了Axure特性：（执行顺序）
step1. 判断条件1（设备名称校验）,如果：
1) 满足条件1，执行条件1逻辑，程序结束
2) 不满足条件1，向下继续执行
step2. 判断条件2（规格型号校验）,如果：
1) 满足条件2，执行条件2逻辑，程序结束
2) 不满足条件2，向下继续执行
step3. 判断条件3（生产厂商校验）,如果：
1) 满足条件3，执行条件3逻辑，程序结束
2) 不满足条件3，向下继续执行
step4. 判断条件4（购置价格校验）,如果：
1) 满足条件4，执行条件4逻辑，程序结束
2) 不满足条件4，向下继续执行
step5. 判断条件5（校验成功，提交数据）,如果：
1) 满足条件5，执行条件5逻辑，程序结束
2) 不满足条件5，向下继续执行，没有可执行内容，程序结束
又∵条件5 = 没有任何条件，一定执行
∴只要执行到这里，则说明所有校验通过，一定会执行提交动作
3.4.7.1 设备名称校验
a.判断逻辑：
条件：
[[input_eq_name.trim()]]= 空值
[[input_eq_name]]：为自定义的局部变量，用于获取元件文字。
[[*.trim()]]：函数用于去除两端空格。
[[input_eq_name.trim()]]：获取输入内容后去掉两端空格，防止用户输入空值。
b.执行逻辑：
1. 文字描述变为 选中状态（提示变色）
1) 选中样式为红色字体、未选中样式为黑色字体
2) 由于三个必填在同一选项组，任一选中，其他会变为未选中状态
2. 设备名称输入框 获取焦点（鼠标光标）
3.4.7.3 规格型号校验
a.判断逻辑：
条件：
[[input_model_type.trim()]]= 空值
[[input_model_type]]：为自定义的局部变量，用于获取元件文字。
[[*.trim()]]：函数用于去除两端空格。
[[input_model_type.trim()]]：获取输入内容后去掉两端空格，防止用户输入空值。
b.执行逻辑：
1. 文字描述变为 选中状态（提示变色）
1) 选中样式为红色字体、未选中样式为黑色字体
2) 由于三个必填在同一选项组，任一选中，其他会变为未选中状态
2. 规格型号输入框 获取焦点（鼠标光标）
3.4.7.4 生产厂商校验
a.判断逻辑：
条件：
[[input_source_company.trim()]]= 空值
[[input_source_company]]：为自定义的局部变量，用于获取元件文字。
[[*.trim()]]：函数用于去除两端空格。
[[input_source_company.trim()]]：获取输入内容后去掉两端空格，防止用户输入空值。
b.执行逻辑：
1. 文字描述变为 选中状态（提示变色）
1) 选中样式为红色字体、未选中样式为黑色字体
2) 由于三个必填在同一选项组，任一选中，其他会变为未选中状态
2. 生产厂商输入框 获取焦点（鼠标光标）
3.4.7.5 购置价格校验
a.判断逻辑：
条件1：
[[Math.floor(input_price)]]不是 数字 → 过滤数字以外情况
[[input_price]]：为自定义的局部变量，用于获取元件文字。
[[Math.floor(*)]]：传入
[[input_source_company.trim()]]：获取输入内容后去掉两端空格，防止用户输入空值。
条件2：[[input_price]]<= 0 → 过滤负数情况
[[input_price]]：为自定义的局部变量，用于获取元件文字。
条件3：[[input_price.trim()]]= 空值 → 过滤空值情况
[[input_price]]：为自定义的局部变量，用于获取元件文字。
[[*.trim()]]：函数用于去除两端空格。
[[input_price.trim()]]：获取输入内容后去掉两端空格，防止用户输入空值。
匹配任何：满足3个条件中任意一个，则认为满足条件
b.执行逻辑：
1. 三个必填文字描述变为 未选中状态
1) 未选中样式为黑色字体
2) 三个必填在同一选项组，这里全部设置为假
3) 能进入这一步执行逻辑，说明之前的校验全部通过了
2. 购置价格输入框 获取焦点（鼠标光标）
3. 购置价格文字描述出现变化
1) 设置元件文字 >0的数字
2) 显示元件，动画逐渐 500ms
3) 等待5000ms
4) 隐藏元件，动画逐渐 1500ms
3.4.7.x 校验成功，提交数据
a.判断逻辑：true（表示执行到这里，已经通过全部交验，无需判断，直接进行提交动作）
b.执行逻辑：
1. 三个必填文字描述变为 未选中状态
1) 未选中样式为黑色字体
2) 三个必填在同一选项组，这里全部设置为假
3) 能进入这一步执行逻辑，说明之前的校验全部通过了
2. 弹窗c 隐藏
3. 数据表 添加行
4. 文字提示 隐藏
1) 购置价格输入错误后动画大概7秒后才会消失，如果在这7秒内完成了提交动作，并重新打开新增窗口，会看到错误提示还是处于高亮状态。为了避免这种情况发生，提交时要将其直接隐藏掉。
c.添加行：
1. 只有设备编号通过全局变量eq_code获取
eq_code：赋值在表格数据加载时
2. 四个输入文本框通过局部变量获取元件文字
3. 三个输入框下拉框通过局部变量获取被选项
22/10/12
M
扫一扫
1775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
