关于axure中,中继器的增删改查

关于axure中,中继器的增删改查

最近又琢磨了一阵中继器的增删改查,觉得很有意思。希望可以帮助到其他人。如果有错误的话还请各路大神批评指正。

1. 准备

首先,我们先来准备一下需要的元件。想一想我们都需要什么字段。
姓名、性别、年龄、学历、职位。
需要五个文本框+一个中继器+四个功能按钮+若干个文本标签、若干个矩形框。
请一定要记得取名字啊!!!!
关于axure中,中继器的增删改查

2. 开始操作

2.1 调整中继器

双击画布上的中继器
关于axure中,中继器的增删改查
就会看到画布上之后一个矩形框,将这个矩形框复制四个,以此排在后面,记住一定要取名字!!按照自己的需求,将字段进行排序,并取名字,我的排序是:姓名、性别、年龄、学历、职位。
关于axure中,中继器的增删改查
复制好之后,返回到之前的画布,我们就可以看到显示五列的中继器了!
关于axure中,中继器的增删改查
我们在画布的右侧为中继器填充内容。
关于axure中,中继器的增删改查
在这个时候我感觉到,这个中继器还差一个表头,话不多说,我们拽几个矩形框做表头!
关于axure中,中继器的增删改查
但是这个时候我们可以看到,我们刚才给中继器填充的内容并没有显示,下面,我们要让中继器显示刚刚填充的信息!
单击中继器,双击“每项加载时”
关于axure中,中继器的增删改查
中继器下方这几个选项就是我们刚才进入中继器之后复制的几个矩形框。我们一次选中,并对应输入每一列的列名。(修改列名的地方就是在中继器填充信息上方有一栏深灰色的,默认的第一列名是colum0,大家可以按照自己的习惯,改或者不改,他就在那里,不来不去。)
关于axure中,中继器的增删改查
我刚才是按照对应的字段修改了以下列名,大家别忘记对应自己写的列名哦~
关于axure中,中继器的增删改查
点击确定之后,我们就可以看到画布上显示了在中继器中填充的内容啦~
关于axure中,中继器的增删改查

2.2 新增

我们为“新增”这个功能按钮添加交互
单击“鼠标单击时”
关于axure中,中继器的增删改查
找到“添加行” 选中中继器,单击右下角“添加行”
关于axure中,中继器的增删改查
然后就会出现这个界面
这几个列对应的fx函数是为了让每一列 从对应的文本框中获得参数
关于axure中,中继器的增删改查
举个栗子
你想新增加一行信息,那么你的姓名、性别、年龄等信息都是从哪儿获取呢?
姓名是不是要从,输入姓名的文本框中获取呢?
想明白了这一点我们说干就干
我们先点击name的fx函数
关于axure中,中继器的增删改查
先添加局部变量,记住!是姓名的文本框!
关于axure中,中继器的增删改查
然后我们按照上面的方法依次添加好变量。然后一路确定下去
关于axure中,中继器的增删改查
这个时候 我们新增就设置好了,不过,这个有一个弊端就是,你只要单击新增,无论你有没有输入信息,他都会新增一行,这个可以在这个动作上添加一个条件:
当五个文本框都不为空的时候才可以进行这个动作,否则则会弹出一个提示信息:请填写信息。
当然你也可以根据你的需求增加条件,那这个步骤我就简单带过啦,不放图啦

2.3 删除

还是继续用这个中继器,我们先给“删除”增加一个交互
单击“删除”,再单击“鼠标单击时”
关于axure中,中继器的增删改查
进入之后,再按照顺序依次单击。
关于axure中,中继器的增删改查
好了,删除的交互动作添加完了,我们选择了“已标记”,那么,就要新添加动作,在想要删除的一行中进行标记。
那么,我们怎么才能对想删除的行进行标记呢?
1.新添加一列复选框,把想要删除的内一行进行勾选就可以了。
2.进入中继器内部,对中继器添加交互动作,鼠标单击就是选中,再单击就取消选中,这个就要用到选中 中的toggle。
像我这么懒得人我大概是不会在新建一列添加复选框的,那我就从第二个入手啦!
首先,就像上文说到,我们需要用toggle,但是光选中不行啊,你还得标记啊!
那么我们就需要想一个嵌套的if语句,整个的一个标记or取消标记需要在选中状态是toggle的前提下来完成的。

if 当前元件选中状态=toggle 是真
if 选中状态=true是真,则标记
else if 则取消标记

想好了我们就去付诸行动吧!
双击中继器,进入中继器内部 ,将五个矩形框组合一下,并取个名字
关于axure中,中继器的增删改查
接下来我们单击“鼠标单击时”然后按顺序依次点击(不用添加条件,加了case2和case3的时候会自动出现条件)
关于axure中,中继器的增删改查
然后我们再次单击“鼠标单击时”为这个矩形框添加case2
关于axure中,中继器的增删改查
按照顺序依次选择
关于axure中,中继器的增删改查
下面是case3
继续单击“鼠标单击时”
这个时候我们看到,条件自动生成成“else if”,所以我们也不用手动添加条件啦
关于axure中,中继器的增删改查
这个时候我们注意到
case2的条件是else if 并不是嵌套其中的if语句,所以我们修改一下。
关于axure中,中继器的增删改查
右键单击case2,最后一个是切换或,点击一下,切换成if 就可以啦
关于axure中,中继器的增删改查
还有一步,我们要对选中的一行有一个颜色的变化我们才知道他选中没选中。
我们还是需要选中这5个矩形框,然后在右侧交互设置的地方点击“选中”,
关于axure中,中继器的增删改查
在填充颜色一栏选择一个颜色,并勾选上。我选择的是 #F2F2F2
关于axure中,中继器的增删改查
现在一个删除功能做好啦~

2.4 修改

我们还是,先给“修改”按钮增加事件
单击“修改按钮”,单击“鼠标单击时”。
然后按照顺序一次选择。
关于axure中,中继器的增删改查
单击“选择列”将你想修改的列全都加入到下方
关于axure中,中继器的增删改查
然后这个fx函数和刚才新增的fx函数一样,都是需要从字段对应的文本框中获取值。
单击“fx”,先添加局部变量,还是注意是从文本框中获取值哦
关于axure中,中继器的增删改查
依照上问的办法,将其余几个字段的fx函数补充完整,选择确定
关于axure中,中继器的增删改查
这样一个修改功能就做好啦。

2.5 查询

查询我记得我之前好像写过一个帖子,在这我写的就不这么详细啦~
单击“查询”,单击“鼠标单击时”
关于axure中,中继器的增删改查
关于axure中,中继器的增删改查
我把fx函数写在下方:
[[(Item.name.indexof(LVAR1))>-1]]
[[(Item.sex.indexof(LVAR2))>-1]]
[[(Item.age.indexof(LVAR3))>-1]]
[[(Item.education.indexof(LVAR4))>-1]]
[[(Item.position.indexof(LVAR5))>-1]]
别忘了使用之前添加对应的局部变量哈~

这样一个查询功能也做好啦
以上就是基础地增删改查功能,还有很多地方可以继续优化,以后有时间再继续分享~