Axure RP 9萌新修炼手册-第五章-交互应用(8)

AxureRP9教程 小楼一夜听春语 353℃ 0评论

二、添加

在一些管理系统的列表中,需要添加列表条目的功能。

案例30:列表添加数据

例如腾讯云文件存储的权限组管理界面。(图5-149)

1、准备相关的元件。

注:本案例元件较多,建议参考RP源文件完成相关元件的准备。

元件按照从上至下、从底层至顶层以及从左至右的顺序依次摆放好,完成后将新建权限组的动态面板“OperationPanel”隐藏。(图5-150)

中继器编辑状态中的元件内容:(图5-151)

动态面板编辑状态中的元件内容:(图5-152)

2、完成中继器基础操作。

(1)创建模板

模板已经在元件准备中完成创建。

(2)组织数据

权限组列表中默认有一条数据,需要在样式功能面板中为数据集添加一条默认数据。(图5-153)

注意,数据中额外添加了一列“GroupID”,默认值为“1”。

这项数据的作用在添加数据时会进行说明。

还有,创建时间除了创建日期外,创建的时、分、秒都是单独的列,这在添加筛选部分会进行说明。

(3)设置交互

通过设置【每项加载时】的交互让数据与模板元件绑定。(图5-154)

具体交互设置可以参考本节第一部分-基础操作。

交互的设置中,创建时间“CreateTime”是“00:00:00”的格式,我们需要对“CreateHour”、“CreateMinute”以及“CreateSecond”的列值进行拼接,【设置文本】的动作中【值】的具体内容为“[[Item.CreateHour]]:[[Item.CreateMinute]]:[[Item.CreateSecond]]”。

另外,当备注“Remark”列值为空值时,我们要让权限组列表中对应的列显示一条短横线。当权限组是“默认权限组“时,不可以删除,列表中”操作“项显示也是一条短横线。

所以,【每项加载时】会分为三种情形:默认加载、备注为空以及默认权限组。

我们需要为【每项加载时】的交互事件【启用情形】,将已添加的交互设置为“默认加载”的情形,不添加任何条件。(图5-155)

然后,点击【添加情形】的按钮,设置情形名称为“备注为空”,添加条件判断列【值】“[[Item.Remark]]”【==】【值】“”(空值)。(图5-156)

为“备注为空”的情形,添加动作,为元件“Remark”【设置文本】,【值】为“-”。(图5-157)

继续点击【添加情形】的按钮,添加名称为“默认权限组”的情形,条件设置为列【值】“[[Item.GroupName]]”【==】【值】“默认权限组”。(图5-158)

为“默认权限组”的情形添加2个动作,为“删除”元件【设置文本】,【值】为“-”;并且【禁用】“删除”元件,以免横线能够执行删除的交互。(图5-159)

最后,这3种情形互相之间不应有条件关联,我们需要在带有条件的两个情形上点击鼠标右键,在上下文菜单中选择【切换为 [如果]或[否则]】,将这两种情形从【否则】改为【如果】。(图5-160)

(4)编辑样式

权限组列表默认【垂直】【布局】,并【多页显示】,默认【每页项数量】为“10”项。(图5-161)

3、为元件添加交互。

(1)“新建”按钮被用户【单击时】,【显示】新建权限组的动态面板 “OperationPanel”,同时带有【灯箱效果】,灯箱效果的【背景颜色】设置为纯黑色,不透明度为“50”%。(图5-162)

(2)用户在动态面板“CreatePanel”中完成数据的输入,“确定”按钮被【单击时】,需要【添加行】到中继器的数据集中,添加的数据我们通过系统变量与局部变量进行获取。(图5-163)

这里进行一些说明。

  • “GroupName”列值中通过自定义局部变量“groupName”获取文本框“NameInput”的输入内容。
  • “Binding”列值默认为“0”。
  • “Remark”列值中通过自定义局部变量“remark”获取文本框“RemarkInput”的输入内容。
  • “CreateDate”列值通过系统变量获取系统的年、月、日数值进行拼接。
  • “CreateHour”、“CreateMinute”以及“CreateSecond”通过系统变量获取系统的时、分、秒数值。并结合函数改变数值的格式。

注:公式“[['0'.concat(XXX).slice(-2)]]”是在获取的数值前连接一个“0”之后截取最后2位。

(3)数据添加完毕之后,还要【隐藏】新建权限组的动态面板“OperationPanel”。并且,这个动作还需要复制给“取消”按钮以及关闭按钮”Close“。(图5-164)

三、删除

权限组管理列表中每一项后方都带有一个删除按钮,在点击 “删除”按钮时,能够删除当前行的数据。

如果直接就删除的话,我们可以通过添加【删除行】的动作,对【当前】行进行删除。

不过,一般来说,对数据进行删除时,为了避免用户的误操作,都会再次进行确认才可以删除。

案例31:列表删除数据

在点击“删除”时,不能直接进行【删除行】的动作,而是要把当前这一项对应的数据行进行【标记】,确认删除的时候,删除【已标记】的行。

这里需要注意,用户可能点击某一个“删除”之后,没有确认删除,而又去点击另外一个“删除”。

这种情况下,我们需要先将【全部】的数据行【取消标记】,然后再【标记】【当前】所需要删除的数据行。

1、准备相关的元件。

之前,我们已经有了一个新建权限组的动态面板“OperationPanel”,我们将这个动态面板中原有的状态命名为“Add”,选中原有的状态“Add”,点击【重复】按钮生成一个新的状态,命名为“Remove”。

在“Remove”状态中,我们删除中间部分的无用元件,再添加新的元件。(图5-165)

然后,将中继器“GroupList”编辑状态中的全部模板元件添加【鼠标悬停】的交互样式(图5-166),并【组合】到一起,组合的属性设置中勾选【触发内部元件鼠标交互样式】。(图5-167)

2、为元件添加交互。

(1)因为动态面板“OperationPanel”新增加了状态“Remove”,“新建”按钮【单击时】,我们需要新增一个【设置面板状态】为状态“Add”的动作。(图5-168)

(2)“删除”按钮【单击时】,我们需要新增一个【设置面板状态】为状态“Remove”的动作。(图5-169)

(3)“删除”按钮【单击时】,我们还要先取消【全部】数据行的标记(图5-170),再【标记】【当前】项所对应的数据行。(图5-171)

(4)“删除”按钮【单击时】,需要为 “Remove”状态中的元件“DeleteGroupInfo”【设置文本】,内容为当前项权限组的名称。(图5-172)

 

(5)“删除”按钮【单击时】,将操作面板“OperationPanel”【显示】出来。(图5-173)

(6)删除“Remove”状态中的“确定”按钮原有的【添加行】交互,添加【删除行】的交互动作,删除【已标记】的数据行。(图5-174)

(7)为“Remove”状态中的“取消”和“关闭”按钮都添加【取消标记】中继器“GroupList”【全部】行的交互。(图5-175)

四、排序

案例32:列表排序功能

在腾讯云的控制台原网站中,新建的权限组列表项会出现在原有列表项上方。

但是,通过中继器【添加行】的交互所新增加的列表项,默认在下方出现。

解决方案是通过创建时间进行排序。

在中继器“GroupList”【载入时】,我们【添加排序】,依次添加按秒的列值降序排序、按分的列值降序排序、按小时的列值降序排序以及按日期的列值降序排序。

之所以按照这样的顺序添加,是因为我们叠加排序效果时,会以后添加的为主排序。

因为交互设置都非常相近,此处以按日期的列值“CreateDate”排序为例。(图5-176)

注:时、分、秒的排序类型为Number(数字)类型,日期的排序类型为Date(日期)类型中的【YYYY-MM-DD】类型。

【提示】图书案例源文件及素材,请关注微信公众号“chanpinban”后,回复“萌新手册”获取。


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

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure RP 9萌新修炼手册-第五章-交互应用(8)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 头像
    添加了排序,但是在预览时没有任何效果,请问这是Axure软件的问题还是?
    凌欣2019-05-26 11:42 回复