Axure教程：让中继器像数据库一样，实现数据查询、修改、判断功

　　如何让中继器也可以像数据库一样，实现数据查询、修改、判断等功能呢?文章为你解读。

　　

　　在用Axure制作原型的过程中，大部分人都将中继器当做数据存储的工具，可以快速格式化展示一系列排版相同的数据，例如商品展示图文列表、各种文字表格等。但是你有没有想过，中继器也可以像数据库一样，实现数据查询、修改、判断等功能呢(例如在下表中直接查询ID为2的人的姓名，或者修改姓名为wang的人的学号)?

　　

　　中继器相关函数难点分析

　　中继器函数

　　目前中继器中提供可以查询内部数据的函数只有「Repeater」，当我们使用此函数时只能获得以数组形式排列的整个中继器内的数据。例如：

　　对中继器使用函数Repeater.text时，得到以下数据

　　

　　由此我们得知：中继器内的数据是以「数组」形式储存的，当输出时，每个数组之间通过换行符’\n’连接。

　　这时候有人会问，为什么不像数据库一样，直接按照Repeater[0][0]类似的形式直接输出某个字段呢?很抱歉，通过测试发现，目前Axure中的函数是不能识别数组的，而「Item.列名」这个函数也只能直接对中继器的动作中(例如筛选、更新等)使用，并不能在其他函数赋值中直接使用。如下图：

　　

　　

　　字符串处理

　　现在我们已经知道，通过直接调用中继器某个具体字段的方式已经破灭了。

　　回到开始，目前我们外部组件能获取中继器数据只有「Repeater」一个函数可以用了，但是它里面的数据是整个中继器的所有数据，而且还是每个数据换行展示的，离我们想要的某个字段差距太远了，怎么办呢?

　　1. 筛选中继器，获取指定行内容

　　首先我们做的的是筛选，通过中继器的筛选功能，将中继器数据指定到我们想要的那一行数据中，例如当我们想获得ID是1的人的姓名时，我们直接对ID进行筛选。

　　

　　此时我们看到，其他没用行的数据已经消失了，貌似离我们想要的结果进了很多。

　　2. 格式化数据

　　如果想要获得姓名这个字段，我们需要将得到的数据进行格式化，调整为一行字符串显示，并且每个字段之间通过「,」隔开。这时候需要用到「split(‘separator’,limit)」函数(返回字符串)，第一个参数是分割字符，此时我们用换行符’\n’进行分割，第二个字符是分割最长的字符串个数，这里可以省略。

　　

　　是不是已经有点感觉了呢?Axure提供了那么多的字符串处理函数，如果想获得’li’这个字符串，是不是很简单呢?

　　3. 截取字符串

　　字符串都是以「0」开始排列的，’li’的位置应该是从2到3.那么我们使用「substring(from,to)」函数(返回字符串)，就可以得到这个姓名了。

　　这时候有人会问，如果姓名字符长度不确定呢?没问题，我们已经知道了每个字符组是通过「,」隔开的，那么我们直接截取第一个’,’到第二个’,’之间的内容就可以了。

　　怎么找到’,’的位置呢?使用「indexOf(’searchValue’,start)」(返回数字)函数就可以了，前面的字段是查找内容’,’，后面的字段是字符串开始查找的位置，例如通过

　　LVAR.substring(LVAR.indexOf(‘,’),LVAR.indexOf(‘,’,(LVAR.indexOf(‘,’)+1)))

　　OH，NO!你已经乱了?突然来了一个这么长的，到底是什么东西?那好，我给你分析下：

　　

　　查找字符串LVAR中第一个’,’出现的位置，返回数字。为什么要+1呢?因为它的输出作为前面LVAR.indexOf(2)的起始查找位置，就是说查找2字符串时候，是从它第一个’,’后面的一个字符开始查找的。

　　从字符串LVAR第一个’,’的后一位开始查找’,’，说白了就是得到字符串LVAR第二个’,’的位置。

　　截取字符串LVAR从第一个’,’出现的位置开始到第二个’,’出现的位置。

　　这下明白了吗?还要记住一点，就是substring函数截取的时候，是保留前面的第一个字符，不保留最后面的字符。所以当读取到第一个’,’的时候，要从它后面开始截取，一直到第二个’,’出现为止。

　　挑战升级

　　不知道还有几个人能看到这里，因为大部分人可能还是抱着一个失望的态度，『看了半天你就告诉我怎么截取字符串吗?老子800年前就会了，这跟数据库查的太远了吧，我怎么能随便查询任意参数呢?』

　　别急，上面都是基础，干货来了。

　　需要函数：

　　Repeater.text 确保中继器返回的是字符串

　　split() 按照特定分隔符分割字符串

　　substring(from,to) 按照指定位置分割字符串

　　indexOf() 查找某个字符串在字符串出现位置

　　concat() 连接字符串

　　length 获取字符串长度

　　场景设计

　　学校有一个【人员管理系统】，系统里包含所有学生的姓名、学院、电话、年龄等各种信息。使用者可以通过姓名查询学生的任意其他特定信息，也可以修改任意信息。

　　例如：查询王刚的班级，查询邓爽的电话号码等。

　　构架分析

　　由需求得知我们需要查询指定姓名人员的某项信息，即数据库中特定行中的某项。由上文得知，我们可以通过筛选中继器方式得到指定行数据，即指定姓名的所有信息。然后通过切割字符串的方式查找到指定项目的信息。

　　

　　在整个环节中，只有「查找项目字段位置」是个难点，因为项目是不确定的，在输出后的字符串中，只有按照「,」分割的数据内容，并不能知道每个数据代表着什么，所以如何查找指定项目的位置呢?

　　这里我们引入了一个类似「列名」的辅助字段，即将所有的数据内容前面加上一个列名标识，例如：

　　姓名中的数据变为 王刚name_王刚

　　班级中的数据变为 通信信息class_通信信息

　　手机中的数据变为 23456phone_23456

　　年龄中的数据变为 22age_22

　　这样我们获得某一行的字符串数据就变化成了：

　　王刚，通信信息，23456，22 name_王刚，class_通信信息，phone_23456,age_22

　　看到了吗?我们得到了一个有标识的字符串，相信有些人已经想明白了，我们在字符串中通过数据前面的标识就可以判断每个数据是什么意思了。如果想得到班级，识别’class_’,如果想得到年龄，识别’age_’就可以了，无论数据有多少项，无论它位置在哪，只要我们指定想要数据的标识就可以了。

　　系统搭建

　　优化数据表

　　将原有数据按照指定数据格式优化(关于在excel中为同一列中每项数据增加字符的方法有很多)，优化后添加到中继器数据中。

　　

　　设置全局变量

　　首先设置一个表示查询项目的变量「Finder」，通过查询的项目内容为「Finder」赋值。 之后设置每个查询项目对应的特定前缀，name_、class_等。

　　设置查询面板

　　查询面板包括姓名文本框，查询项目列表框，查询按钮。

　　当切换查询项目时，系统将查询项目赋值给项目变量「Finder」，项目变量默认值与查询项目列表默认值相同。

　　

　　当点击查询按钮时，将「姓名」赋值给全局变量「Name」，然后按照「姓名」文本框筛选中继器数据，之后按照项目变量「Finder」将具体项目数值显示到查询结果中。

　　

　　设置查询结果面板

　　查询结果包括姓名及查询内容结果，对应文本框显示相应信息即可，在此不再赘述。

　　

　　函数分析

　　以下是查询结果显示的函数：

　　[[A2.text.split(‘\n’).concat(‘,’).substring((A2.text.split(‘\n’).indexOf(Finder)+Finder.length),A2.text.split(‘\n’).concat(‘,’).indexOf(‘,’,(A2.text.split(‘\n’).indexOf(Finder))))]]

　　如果上文看懂的人会发现这里有几个特殊的地方：

　　A2.text.split(‘\n’).concat(‘,’)：在重新排列字符串最后加一个’,’，为了防止查找不到最后一个’,’而出现bug。

　　A2.text.split(‘\n’).indexOf(Finder)+Finder.length：因为Finder字符串长度的不确定性，切割的起始位置是从「Finder」字符串后开始切割的。

　　系统优化

　　由于时间原因功能做的比较简单，但是通过这个方法我们可以查找或修改任意项目的内容，比如查找某个学生的全部信息，按照班级查找某个姓名的学生等。

　　结语

　　这篇文章主要提供了一种将中继器设计成数据库的方法，看似虽然繁琐，其实定义好所有内容后，可以为Axure实现更多的类似数据库的数据查询、修改、判断等功能，而不是单纯的数据展示。希望喜欢的人可以用到。

　　以下为源文件下载链接：链接:http://pan.baidu.com/s/1i4JTQAT 密码：lbrc

*请认真填写需求信息，我们会在24小时内与您取得联系。