AxureRP7.0从入门到精通(连载39)

Axure书籍 小楼一夜听春语 15082℃ 0评论

案例:按条件删除

按条件删除数据集中的数据,关键在于条件表达式的编写。比如:按学号删除。

我们为删除按钮的【鼠标单击时】事件添加用例动作(图6-26):

1、选择中继器数据集中的动作【删除行】;

2、勾选要删除行的到中继器【scoretable】;

3、界面右下角的选项会默认选中【条件】;

4、条件的输入框中我们可以直接输入表达式,不过这里需要用到局部变量获取文本框输入的学号,所以,我们点击【fx】打开编辑值的界面。

5、设置局部变量“sid”获取到文本框“s_id”的元件文字。

6、写入条件表达式:[[Item.studentID==sid]]。这个表达式的意思就是当某一行“studentID”列的值(Item.studentID)等于(==)文本框输入的内容(sid)时,将其删除。

图6-26

(图6-26)

案例:按标记删除

按标记删除是指先将指定的行进行标记,然后在点击删除按钮时将其删除。删除标记行分为删除多行和删除单行。

案例:删除多行

还以学生成绩表为例,我们在点击每一行的时候进行标记,点击删除按钮的时候删除所有点击过的行。

要实现这个效果,首先我们将单选按钮变成复选框,表示能够多项被选择,然后取消选项组的效果,这样点击过的行才能够全部变色,取消选项组效果可以删除组名,或者,也可以勾选中继器属性中的【取消[选项]组效果】来实现。(图6-27)

图6-27

(图6-27)

完成了上面的设置,我们来完成标记的动作。

这一步有点复杂,因为动态面板“student_panel”被点击的时候应该是在选中和取消选中两个状态间切换,同时标记也要跟随着添加和取消。具体的步骤是:

1、为动态面板“student_panel”【鼠标单击时】事件添加第一个用例,动作为【切换选中状态】动态面板“student_panel”。这样就会在视觉上呈现选中和取消选中两种效果。(图6-28)

图6-28

(图6-28)

2、根据选中状态进行判断,先添加用例进行第一种情形的判断,判断内容为如果【选中状态】“This”【==】【值】“true”,如果符合条件,设置动作为【标记行】,勾选中继器“scoretable”,在界面右下角选中【This】,表示标记当前行。(图6-29)

图6-29

(图6-29)

3、再次添加用例,为不满足条件的情形添加动作。设置动作为【取消标记行】,勾选中继器【scoretable】,在界面右下角选中【This】,表示标记当前行。(图6-30)

图6-30

(图6-30)

完成这一步后,不要忘记将第二个用例转为“If”,以免不能正常的执行判断。(图6-31)

图6-31

(图6-31)

最后,我们再为删除按钮添加【鼠标单击时】事件的用例动作。(图6-32)

1、设置动作【删除行】;

2、勾选中继器【scoretable】;

3、在界面右下角选中【已标记】,表示删除掉所有被标记的行。

图6-32

(图6-32)


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP7.0从入门到精通(连载39)

喜欢 (31)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 这个是要点击复选框选中的话 点击删除多行 不能删除啊 除非点击动态面板选中 才可以删除
    孙小北2015-10-20 17:08 回复
    • 之前的单选的【鼠标单击时】事件中是:选中-动态面板-ture;之后变成复选框,不做任何的设置,因为相对应的设置已经加动态面板那个步骤中去了。
      阿花2016-09-12 16:46 回复
  2. 老师后边给动态面板加的特效 是要加给复选框才比较合理
    孙小北2015-10-20 17:13 回复
    • 小楼一夜听春语
      可以都加
      小楼一夜听春语2015-10-22 08:24 回复
    • 确实,你说的是正确的。我也做例子验证了。感谢你的提问,我之前也是困惑,看了你说的才反应过来。
      banban2016-01-20 15:44 回复
      • 那这个怎么改呢? 点 复选框 也有这效果。
        shirley2016-01-28 17:51 回复
        • 不在动态面板加交互,在复选框那里加就行了,选中时动态面板为true并标记行,未选中时动态面板为false并取消标记行,这样做就只有点复选框才有特效,点其他没特效。
          teslac2016-08-01 03:03 回复
      • 删除多行,动态面板的位置能讲解一下吗
        hello2016-02-22 16:44 回复
  3. 点击一行的任一位置,复选框变成勾选状态,且整行变色。但当直接点击复选框时,整行会变色,但复选框还是未勾选的状态。为什么呢
    winner2016-03-10 11:16 回复
    • 知道了,不是鼠标按键按下时,应该是鼠标单击时
      winner2016-03-10 11:21 回复
  4. [[Item.studentID==sid]]按条件删除的时候 这个代码不是item 应该是target 我不懂程序 倒腾了好久 才发现
    无畏号2016-04-27 16:23 回复
    • 小楼一夜听春语
      [[Item.studentID==sid]]没有问题,如果购买了图书,你可以到读书群下载源文件参考。
      小楼一夜听春语2016-04-27 16:29 回复
  5. 中继器中的复选框点击不能勾选?为什么
    cucmber2016-09-21 13:50 回复