Axure 教程 | 列表选中项求合计值

主要内容

之前,我们介绍过中继器数据项求合。对于无“增删改查”的数据列表,我们不用使用中继器,沿用表格部件也是可以的,本次教程,我们就学习一下如何对表格部件制成的列表项进行求和交互设置。

交互说明

勾选中一行列表项,自动计算当前行的“小计”单元格,且表格己选中项计算1次。


取消勾选一行列表项,表格己选中项重新计算1次。

原型制作

步骤1:


列表制作,拖一个表格到编辑页面


a) 编辑表格为6行5列


b) Column2及Column3列输入数值


c) 分别设置第2-5行的单元名称:1-1、1-2、1-3、1;2-1、2-2、2-3、2;3-1、3-2、3-3、3;4-1、4-2、4-3、4


d) 设置第4列最后1个单元格名称为:合计

步骤2:


从部件窗口,分别拖入4个复选框放到列表第2-5行。设置名称为:第2行、第3行、第4行、第5行

设置首个复选框“选中状态改变时”事件

步骤3:


选中“第2行”复选框,双击“选中状态改变时”事件,打开用例编辑器编辑用例1。

步骤4:


第一步:用例说明 点击“编辑条件”按钮,打开条件生成对话框。设置条件表达式为:选中状态值“当前部件”=值“true”


动作1


第二步:点击新增动作 选择“设置文本”动作


第四步:配置动作 勾选“1-3(表格单元)”;将文本设置为:值“[[LVAR1+LVAR2]]”


注:LVAR1=部件文字“1-1”;LVAR2=部件文字“1-2”
 

动作2

第二步:点击新增动作 选择“设置文本”动作
 

第四步:配置动作 勾选“1(表格单元)”;将文本设置为:部件文字“1-3”

动作3
 

第二步:点击新增动作 选择“设置文本”动作
 

第四步:配置动作 勾选“合计(表格单元)”;将文本设置为:值“[[LVAR1+LVAR2+LVAR3+LVAR4]]”

注:LVAR1=部件文字“1”;LVAR2=部件文字“2”;LVAR3=部件文字“3”;LVAR4=部件文字“4”
 

点击“确定”,关闭用例编辑器。

步骤5:

继续选中“第2行”复选框,双击“选中状态改变时”事件,打开用例编辑器编辑用例2。

步骤6:


第一步:用例说明 点击“编辑条件”按钮,打开条件生成对话框。设置条件表达式为:选中状态值“当前部件”=值“false”

动作1
 

第二步:点击新增动作 选择“设置文本”动作
 

第四步:配置动作 勾选“1(表格单元)”;将文本设置为:值“0”
 

动作2
 

第二步:点击新增动作 选择“设置文本”动作

第四步:配置动作 勾选“合计(表格单元)”;将文本设置为:值“[[LVAR1+LVAR2+LVAR3+LVAR4]]”
 

注:LVAR1=部件文字“1”;LVAR2=部件文字“2”;LVAR3=部件文字“3”;LVAR4=部件文字“4”
 

点击“确定”,关闭用例编辑器。

重复步骤3-6,设置其它复选框“选中状态改变时”事件

步骤7:

选中“第2行”复选框,部件交互和注释窗口,选择“选中状态改变时”事件,复制用例1、用例2;分别选中“第3-5行”复选框的“选中状态改变时”事件,粘贴用例1和用例2。

步骤8:

分别修改“第3-5行”复选框“选中状态改变时”事件的用例1和用例2:

“第3行”复选框

用例1:
 

动作1:第四步:配置动作 勾选“2-3(表格单元)”
 

LVAR1=部件文字“2-1”;LVAR2=部件文字“2-2”
 

动作2:第四步:配置动作 勾选“2(表格单元)”;将文本设置为:部件文字“2-3”
 

用例2:

动作1:第四步:配置动作 勾选“2(表格单元)”;将文本设置为:值“0”

“第4行”复选框
 

用例1:
 

动作1:第四步:配置动作 勾选“3-3(表格单元)”
LVAR1=部件文字“3-1”;LVAR2=部件文字“3-2”

动作2:第四步:配置动作 勾选“3(表格单元)”;将文本设置为:部件

文字“3-3”
 

用例2:
 

动作1:第四步:配置动作 勾选“3(表格单元)”;将文本设置为:值“0”

“第5行”复选框

用例1:
 

动作1:第四步:配置动作 勾选“4-3(表格单元)”
LVAR1=部件文字“4-1”;LVAR2=部件文字“4-2”
 

动作2:第四步:配置动作 勾选“4(表格单元)”;将文本设置为:部件文字“4-3”

用例2:

动作1:第四步:配置动作 勾选“4(表格单元)”;将文本设置为:值“0”

生成原型

步骤9:


生成原型,查看效果。

- End -

猜你喜欢

转载自blog.csdn.net/weixin_42058609/article/details/121076981