《项目8 中继器——数据的添加、ppt课件（完整版）.pptx》由会员分享，可在线阅读，更多相关《项目8 中继器——数据的添加、ppt课件（完整版）.pptx（56页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、项目8 中继器数据的添加、ppt课件（完整版）主编周檬主编周檬, 石建国石建国, 石彦芳石彦芳项目八中继器项目八中继器数据的添加、删除、修数据的添加、删除、修改、更新改、更新学习目标学习目标1.了解中继器的组成。了解中继器的组成。2.掌握中继器中的数据操作的方法。掌握中继器中的数据操作的方法。8.1中继器组成中继器组成数据集数据集数据集就是一张数据表数据集就是一张数据表,可以包含多行多列。可以单击可以包含多行多列。可以单击“添加行添加行”或或“添加列添加列”按钮来添加行或列按钮来添加行或列,也可以单击对应的图标进行添加也可以单击对应的图标进行添加,如图如图8-1所示。所示。图图8-1添加行或列
2、添加行或列双击列名可以对其进行编辑双击列名可以对其进行编辑,但要注意列名只能包含字母、数字和但要注意列名只能包含字母、数字和“_”,并且不能以数字开头。并且不能以数字开头。数据集中的内容可以包含文本、图片和页面数据集中的内容可以包含文本、图片和页面,图片的导入和页面的引用可以通过在单元格上单击鼠标图片的导入和页面的引用可以通过在单元格上单击鼠标右键来选择相应的选项来实现右键来选择相应的选项来实现,如图如图8-2所示。所示。图图8-2图片的导入和页面的引用图片的导入和页面的引用项目交互项目交互项目交互功能主要用于将数据集中的数据传递到模板中的元件并显示出来项目交互功能主要用于将数据集中的数据传递
3、到模板中的元件并显示出来,或者或者根据数据集中的数据执行相应的动作。项目交互只有根据数据集中的数据执行相应的动作。项目交互只有3个触发事件个触发事件,比较常用的是比较常用的是“每项加载时每项加载时”,如图如图8-3所示所示,如果需要把数据集中的某些数据直接显示到模板的如果需要把数据集中的某些数据直接显示到模板的元件上元件上,可在这里添加用例动作。例如可在这里添加用例动作。例如,Axure软件在中继器中默认添加的一个用软件在中继器中默认添加的一个用例动作就是把数据集中例动作就是把数据集中“Column0”这一列的值添加到矩形元件上。这一列的值添加到矩形元件上。图图8-3添加交互添加交互8.2中继
4、器中的数据操作中继器中的数据操作添加数据添加数据添加数据其实是为中继器的数据集添加数据添加数据其实是为中继器的数据集添加数据,然后通过项目交互在项目列表中显然后通过项目交互在项目列表中显示出来。添加数据这个动作叫作示出来。添加数据这个动作叫作“添加行添加行”。例如例如,可以为本项目中的球队中继器添加新的数据并显示出来。可以为本项目中的球队中继器添加新的数据并显示出来。先将中继器命名为先将中继器命名为“team”,然后然后,对应数据集中的对应数据集中的4个字段放入个字段放入4个文本框个文本框(分别分别命名为命名为“name”“”“team”“”“shuju”“”“zhanji”),用来接收输入的
5、文字。之后用来接收输入的文字。之后,再再添加一个按钮添加一个按钮,作用是在单击这个按钮时作用是在单击这个按钮时,将将4个文本框的数据保存到中继器数据集个文本框的数据保存到中继器数据集中新的行里面。中新的行里面。步骤步骤1双击按钮的双击按钮的“鼠标单击时鼠标单击时”事件事件,打开用例编辑窗口打开用例编辑窗口,如图如图8-4所示。所示。图图8-4步骤步骤1步骤步骤2选择中继器数据集中的动作选择中继器数据集中的动作“添加行添加行”,如图如图8-5所示。所示。图图8-5步骤步骤2步骤步骤3勾选要添加行的中继器勾选要添加行的中继器“team”,如图如图8-6所示。所示。图图8-6步骤步骤3步骤步骤4单击
6、单击“添加行添加行”按钮按钮,打开打开“添加行到中继器添加行到中继器”窗口窗口,如图如图8-7所示。所示。图图8-7步骤步骤4步骤步骤5在在“添加行到中继器添加行到中继器”窗口中窗口中,我们能够看到之前做好的中继器数据集的我们能够看到之前做好的中继器数据集的4个列和个列和1个空行。个空行。单击空行中每个单元格后面的单击空行中每个单元格后面的“fx”,打开打开“编辑值编辑值”窗口窗口,如图如图8-8所示。所示。图图8-8步骤步骤5步骤步骤6设置局部变量以接收对应的文本框中输入的文字设置局部变量以接收对应的文本框中输入的文字,例如例如,在空行中的在空行中的teamrecord这一列设置局部变量这一
7、列设置局部变量“zhanji”接收文本框接收文本框“zhanji”中的文字。中的文字。步骤步骤7将局部变量填入值的编辑区将局部变量填入值的编辑区,然后单击然后单击“确定确定”按钮退出。这样就把文本按钮退出。这样就把文本框中的文字写入了空行的单元格中。框中的文字写入了空行的单元格中。步骤步骤8编辑完所有单元格的值后编辑完所有单元格的值后,一整行数据就组织完毕了。当单击一整行数据就组织完毕了。当单击“添加添加”按钮时按钮时,就会将就会将4个文个文本框中的数据组织成一行数据并添加到中继器的数据集当中本框中的数据组织成一行数据并添加到中继器的数据集当中,如图如图8-9所示。所示。图图8-9步骤步骤8删
8、除数据删除数据删除数据分为几种情况删除数据分为几种情况:删除当前行、按条件删除和删除单行。删除当前行、按条件删除和删除单行。1.删除当前行删除当前行删除当前行只需要将之前的中继器做一下调整删除当前行只需要将之前的中继器做一下调整,在模板的最右侧添加一个在模板的最右侧添加一个“删除删除”按钮按钮,然后设置交互然后设置交互,步骤如下步骤如下:步骤步骤1双击按钮的双击按钮的“鼠标单击时鼠标单击时”事件事件,打开用例编辑窗口打开用例编辑窗口,如图如图8-10所示。所示。图图8-10步骤步骤1步骤步骤2选择中继器数据集中的动作选择中继器数据集中的动作“添加行添加行”,如图如图8-11所示。所示。图图8-
9、11步骤步骤2步骤步骤3勾选要添加行的中继器勾选要添加行的中继器“team”,如图如图8-12所示。所示。图图8-12步骤步骤3步骤步骤4单击单击“添加行添加行”按钮按钮,打开打开“添加行到中继器添加行到中继器”窗口窗口,如图如图8-13所示。所示。图图8-13步骤步骤4步骤步骤5在在“添加行到中继器添加行到中继器”窗口中窗口中,我们能够看到之前做好的中继器数据集的我们能够看到之前做好的中继器数据集的4个列和个列和1个空行。个空行。单击空行中每个单元格后面的单击空行中每个单元格后面的“fx”,打开打开“编辑值编辑值”窗口窗口,如图如图8-14所示。所示。图图8-14步骤步骤52.按条件删除按条
10、件删除按条件删除数据集中的数据按条件删除数据集中的数据,关键在于条件表达式的编写关键在于条件表达式的编写,例如按队名删除。为例如按队名删除。为“删除删除”按钮的按钮的“鼠标单击时鼠标单击时”事件添加用例动作。事件添加用例动作。步骤步骤1选择中继器数据集中的动作选择中继器数据集中的动作“删除行删除行”,如图如图8-15所示。所示。图图8-15步骤步骤1步骤步骤2勾选要删除行的中继器勾选要删除行的中继器“team”,如图如图8-16所示。所示。图图8-16步骤步骤2步骤步骤3窗口右下角的选项会默认选中窗口右下角的选项会默认选中“条件条件”,如图如图8-17所示。所示。图图8-17步骤步骤3步骤步骤
11、4可以直接在条件输入框中输入表达式可以直接在条件输入框中输入表达式,不过这里需要用到局部变量来获取文本框中输入的学不过这里需要用到局部变量来获取文本框中输入的学号号,所以所以,单击单击“fx”打开打开“编辑值编辑值”窗口窗口,如图如图8-18所示。所示。图图8-18步骤步骤4步骤步骤5设置局部变量设置局部变量“sname”以获取文本框以获取文本框“sname”的文字的文字,如图如图8-19所示。所示。图图8-19步骤步骤5步骤步骤6写入条件表达式写入条件表达式:Item.teamname=sname。这个表达式的意思就是当某一行。这个表达式的意思就是当某一行“teamname”列的值列的值(I
12、tem.teamname)等于等于(=)文本框输入的内容文本框输入的内容(sname)时时,将其删除将其删除,完整步骤完整步骤如图如图8-20所示。所示。图图8-20完整步骤完整步骤3.删除单行删除单行删除单行删除单行,也就是删除最后一个被选中的行。从原理上说也就是删除最后一个被选中的行。从原理上说,删除最后一个被选中的删除最后一个被选中的行其实也要有标记的动作。但是怎么才能只标记当前这一行行其实也要有标记的动作。但是怎么才能只标记当前这一行,取消之前标记过的取消之前标记过的其他行的标记呢其他行的标记呢?很简单很简单,只需要在标记当前行之前再添加一个动作只需要在标记当前行之前再添加一个动作,取
13、消之前全部取消之前全部的标记就可以了。知道了原理的标记就可以了。知道了原理,我们只需给我们只需给“案例案例:删除多行删除多行”的矩形添加的矩形添加3个用个用例。例。步骤步骤1选中当前元件选中当前元件,实现单击时整行变色效果实现单击时整行变色效果,如图如图8-21所示。所示。图图8-21步骤步骤1步骤步骤2勾选中继器勾选中继器“team”,在窗口右下角选中在窗口右下角选中“全部全部”,实现取消之前全部标记的效果实现取消之前全部标记的效果,如图如图8-22所示。所示。图图8-22步骤步骤2步骤步骤3勾选中继器勾选中继器“team”,在窗口右下角选中在窗口右下角选中“This”,实现标记当前行的效果
14、实现标记当前行的效果,如图如图8-23所示。所示。图图8-23步骤步骤3步骤步骤4给给“删除删除”按钮添加按钮添加“鼠标单击时鼠标单击时”事件的用例动作事件的用例动作,设置动作设置动作“删除行删除行”,勾选中继器勾选中继器“team”,在窗口右下角选中在窗口右下角选中“已标记行已标记行”,如图如图8-24所示。所示。图图8-24完整步骤完整步骤更新数据更新数据更新数据是指对已有数据进行更改更新数据是指对已有数据进行更改,包括包括:更新当前行、更新标记行和按条件更新。更新当前行、更新标记行和按条件更新。下面以更新标记行为例下面以更新标记行为例,讲解更新行的关键步骤。讲解更新行的关键步骤。案例案例
15、:按队名更新数据按队名更新数据步骤步骤1添加一个新的按钮添加一个新的按钮,并为该按钮的并为该按钮的“鼠标单击时鼠标单击时”事件添加用例动作。事件添加用例动作。步骤步骤2设置动作为设置动作为“更新行更新行”,如图如图8-25所示。所示。图图8-25步骤步骤2步骤步骤3勾选中继器勾选中继器,如图如图8-26所示。所示。图图8-26步骤步骤3步骤步骤4在窗口右下方选择在窗口右下方选择“已标记已标记”,如图如图8-27所示。所示。图图8-27步骤步骤4步骤步骤5从列表中选取要写入数据的列名从列表中选取要写入数据的列名;单击列名后单击列名后,相应的列名会出现在下方的编辑区相应的列名会出现在下方的编辑区,
16、可以对要写可以对要写入的列值进行编辑。这里分别单击入的列值进行编辑。这里分别单击teamname和和teamplayers列名列名,将它们添加到下方编辑区中将它们添加到下方编辑区中,如图如图8-28所示。所示。图图8-28步骤步骤5步骤步骤6单击单元格后面的单击单元格后面的“fx”,然后通过局部变量获取文本框中的文字然后通过局部变量获取文本框中的文字,写入列中写入列中,具体操作步骤如具体操作步骤如图图8-29所示。所示。图图8-29具体步骤具体步骤8.3案例制作案例制作将球队的信息以列表的形式呈现将球队的信息以列表的形式呈现,如图如图8-30所示。所示。图图8-30球队信息球队信息1.制作模板
17、制作模板在模板中放入一张图片、在模板中放入一张图片、4个文本标签和一个矩形个文本标签和一个矩形,并调整好尺寸与样式并调整好尺寸与样式,如图如图8-31所示。所示。图图8-31添加元件添加元件然后然后,为元件命名为元件命名:用于显示球队用于显示球队Logo的图片元件命名为的图片元件命名为“teamLogo”;用于显示用于显示球队名称的文本标签命名为球队名称的文本标签命名为“teamname”;其他元件不改变内容其他元件不改变内容,可以不命名。可以不命名。接下来接下来,在数据集中设置列与行。图在数据集中设置列与行。图8-31中的每一项都包含了中的每一项都包含了5部分内容部分内容,球队球队Logo、
18、球队名称、球员、数据和战绩。所以、球队名称、球员、数据和战绩。所以,要在数据集中对应添加要在数据集中对应添加5列列,并设定并设定好列的名称。之后好列的名称。之后,对应案例中对应案例中9个球队的信息个球队的信息,添加添加9个空的数据行个空的数据行,如图如图8-32所示。所示。图图8-32添加空数据行添加空数据行最后最后,逐行地为每一列添加数据。逐行地为每一列添加数据。2.导入图片导入图片在单元格上单击鼠标右键在单元格上单击鼠标右键,在弹出的菜单中选择在弹出的菜单中选择“导入图片导入图片”,如图如图8-33所示所示,然后选择本地硬盘中的然后选择本地硬盘中的图片文件图片文件,即可将图片导入数据集。将
19、即可将图片导入数据集。将9支球队的支球队的Logo全部导入。全部导入。图图8-33导入图片导入图片当图片导入数量较多时当图片导入数量较多时,可以先导入一张图片可以先导入一张图片,选中该单元格选中该单元格,按快捷键按快捷键“+”进行进行复制复制,然后依次选中其他要导入图片的单元格然后依次选中其他要导入图片的单元格,按快捷键按快捷键“+”进行粘贴。完成粘贴进行粘贴。完成粘贴后后,再单击每个单元格中蓝色的小图标重选图片。再单击每个单元格中蓝色的小图标重选图片。3.添加文字添加文字双击单元格即可输入文字。将双击单元格即可输入文字。将9支球队的名称全部输入支球队的名称全部输入,如图如图8-34所示。接下
20、来所示。接下来,参照上面的操作把每参照上面的操作把每一行的数据全部编辑完成。一行的数据全部编辑完成。图图8-34球队名称球队名称此时此时,页面中还不能显示出数据集中的数据页面中还不能显示出数据集中的数据,因为还差了最重要的一步因为还差了最重要的一步在项目在项目交互中添加交互中添加“每项加载时每项加载时”事件的用例动作。然后事件的用例动作。然后,删除元件自带的用例动作再删除元件自带的用例动作再进行以下设置。进行以下设置。4.设置球队名称设置球队名称双击双击“每项加载时每项加载时”事件名称事件名称,在用例编辑窗口中添加动作在用例编辑窗口中添加动作“设置文本设置文本”,文本标文本标签签“teamna
21、me”为为“值值”,然后然后,单击单击“fx”,在编辑文本窗口中单击在编辑文本窗口中单击“插入变量插入变量或函数或函数”,选择列表中的选择列表中的“Item.teamname”,如图如图8-35所示。所示。图图8-35设置文本值设置文本值“Item.teamname”中的中的“Item”是指当前所读取数据行的数据集合是指当前所读取数据行的数据集合,也可称之也可称之为当前被读取数据行的对象。通过为当前被读取数据行的对象。通过“Item.teamname”就能够获取数据集合中就能够获取数据集合中“teamname”这一列的值。所以这一列的值。所以,通过上面的动作就完成了将数据集中的数据向通过上面的
22、动作就完成了将数据集中的数据向模板中元件的传递。模板中元件的传递。5.设置球队设置球队Logo在动作列表中选择在动作列表中选择“设置图片设置图片”,勾选勾选“Set teamLogo”,如图如图8-36所示所示,在图片的在图片的“Default”设置中选择设置中选择“值值”,然后单击然后单击“fx”,进入进入“编辑值编辑值”窗口窗口,在在“插入变插入变量或函数量或函数”的列表中选择的列表中选择“Item.teamLogo”后保存并退出到主界面。后保存并退出到主界面。图图8-36设置球队设置球队Logo此时此时,球队球队Logo图片和球队名称便都已经加载到模板上并显示出来。图片和球队名称便都已经
23、加载到模板上并显示出来。6.样式设置样式设置样式设置功能可以帮助我们调整项目列表的排版、布局和分页等样式样式设置功能可以帮助我们调整项目列表的排版、布局和分页等样式,如图如图8-37所示。所示。图图8-37样式设置样式设置项目小结项目小结中继器部件用于显示重复的文本、图片和链接中继器部件用于显示重复的文本、图片和链接,如商品列表、用户信息等。可以如商品列表、用户信息等。可以模拟数据库的增、删、改、查操作。模拟数据库的增、删、改、查操作。中继器由数据集和项组成。数据集决定重复显示的项的个数中继器由数据集和项组成。数据集决定重复显示的项的个数;项决定数据展示的项决定数据展示的部件。部件。感谢观看 THANKS!