Axure教程:中继器表格(增删改查、排序、移动、多选、搜索、筛选、分页、下载效果)

hello,大家好,今天给大家介绍在axure如何制作高保真高交互的表格。交互效果包含有增删改、上下移动、排序、多选、模糊搜索、分类筛选、分页显示、下载等等,作者会在下文中详细介绍每种效果是如何制作的。制作完成后,使用起来也非常简单,只需要填写表格表头和中继器表格即可完成,其他的由系统自动完成。这样非常的美观、方便、使用的原型强烈推荐给大家使用。如果喜欢这篇文章的话,希望您能给个赞点个订阅!

原型预览及下载地址:https://axhub.im/pro/062d6a4d5756623b/#g=1

一、效果介绍

1、修改效果

直接点击表格修改对应内容即可。

2、 增加行、删除行效果

3、 上下移动效果

4、 排序效果

5、 多选效果

能判断是否全选

6、 模糊搜索

能按不同条件进行搜索,条件名自动按表头生成,表头变化时,跟着变化

7、 分类筛选

根据表格自动生成筛选条件,不会重复,表格内容变化时,筛选条件自动变化

8、 分页显示

能够设定每页显示条数,可以翻页查看,能统计数据条数和页数

9、 模拟下载

这里做了一个模拟下载的交互,可以excel表格,您们如果想换成自己的excel表格,需要先上传至网上然后修改一下url即可

二、制作方法

1、普通的中继器表格

如下图所示,表格由表头和内容中继器组成。

表头大家用6个矩形制作即可,我们命名为表头1-6

内容需要用中继器制作

中继器内材料

中继器表格里面也是由6个表格组成,我们命名内容1-6

然后这里我们要给中继器的背景设颜色,选择交替,一种是浅蓝色,一种是白色。

中继器表格和交互

如下图所示,设置6列,column1-6,分别对应内容1-6,每项加载时,设置内容1-6文本分别=column1-6

这样普通版的中继器表格就做完了

2、可修改的中继器表格

在上面的教程的前提下,在表头1-6里加入表头输入框1-6,将输入框的外框隐藏,设置颜色为透明,这样就可以的到一个透明的输入框了,这里记得将表头1-6的文字上去。

中继器内材料

中继器内材料也是想表头1-6一样,他加入内容输入框1-6,外框隐藏,设置颜色为透明。

中继器表格和交互

每项加载时:我们就不是像前面一样设置内容1-6文本分别=column1-6,而是设置内容输入框的文本分别=column1-6。

然后我们还要注意一点,虽然这里不涉及中继器的更新,但是为了后面的交互,我们这里需要写一个事件。就是内容输入框1-6失去焦点时,我们要更新行,更新this行,更新对心的column1-6=this.text。简单来说,就是比如你修改了第一列的数据,那失去焦点的时候,我就要更新中继器该行的文本=该文本框的值。

3、增删改和上下移动的中继器表格

材料准备

首先,我们要准备5个图标按钮,你们可以网上找一些漂亮的图标,如下图所示,我是在icon上面找的,很多都很实用,推荐给大家哈。5个图标名称分别为上方添加行、下方添加行、上移、下移、删除行。

材料摆放

首先我们把5个图标隐藏,在下面放一个透明的矩形,然后组合,我们叫他图标组合吧。

中继器表格

这里我们要在前面的基础下加多一列,命名为no,填写按1、2、3、4、5、6填写即可,用于中继器排序的

交互事件

中继器载入时:添加排序,按no的升序排列

鼠标移入图标组合时:显示5个图标;

鼠标移出图标组合时:隐藏5个图标;

鼠标单击上方添加行图标时:首先我们要更新行,更新no>=该行no的行,targetitem.no=targetitem.no 1(这里要解释一下,例如在第二行的时候点击上方添加行,即原来的第二行变成第三行,原来的第三行变成第四行……所以我们要更新一下,大于等于第二行的no,更新为他们原来的值 1);更新完之后,我们在添加一行,no=item.no-1,其他值为空即可。(这里也要说明一下,因为刚刚做了更新,原来第二行的no变成了3,所以添加一行的no应该是2=3-1,当然了你们也可以事先记录更新行前的item.no,路是很多条的,我一开始做这个原型的时候也不是这个方法,在写的时候发现可以简化,所以就讲简单的)。

鼠标单击下方添加行图标时:首先我们要也是要更新行,更新no>=该行no的行,targetitem.no=targetitem.no 1(这里就不解释了,和上面原理一致),然后添加行,no=item.no 1,其他值为空即可。

鼠标单击上移时:首先我们要更新行,更新条件:targetitem.no=item.no-1,更新为:targetitem.no 1(这里也解释一下吧,比如你在第二行点击上移,那原本的第一行就变成了,第二行,所以2-1行,更新为1 1行);然后在更新this行,no=item.no-1(这里就是第二行-一行就变成第一行)。

鼠标单击下移时:我们也是要更新行,更新条件:targetitem.no=item.no 1,更新为:targetitem.no-1(这里其实就是上移的反过来);然后在更新this行,no=item.no 1。

鼠标单击删除行时:这里不能直接做删除行的操作,同样的要先更新行,更新条件targetitem.no>item.no,更新为targetitem.no-1(这里解释一下,比如我删除第二行,删除之前我要先把3、4、5……行的no-1),然后在删除this行。

4、排序中继器表格

材料准备和摆放

如图所示,准备12个向上和向下的箭头,放在表头的对应的位置即可。

这里12个箭头要设定为统一选组,选中时显示为绿色(颜色可以自己设置)

交互事件

鼠标单击时:首先选中该箭头(让他变色,别人就知道这行排列了),然后添加内容中继器的拍讯。点击哪列的箭头就按哪列排序,例如点击第一列,就按column1排序,点击下箭头就按降序排列,点击上箭头就按升序排列。

5、多选中继器表格

材料准备和摆放

把多选框放在表头和内容的最左侧,我们把表头隔壁的多选框叫全选多选框,内容隔壁的多选框叫内容多选框,如下图所示,你们可以用系统自带的多选框,但是作者认为不太美观,所以就自制了一个好看一点的多选框。

中继器表格

这里在上面的基础上要加多一列xuanzhong,默认为空值即可。

交互事件

中继器每项加载时:如果xuanzhong=1,设置该行的内容多选框为选中状态,否则,则为未选中状态。

鼠标单击内容多选框时:如果xuanzhong=1,更新行this,xuanzhong=0(就是如果内容多选框选中了,鼠标单击时就设为没选中),除此之外,我们还要设置表头隔壁的全选多选框为未选中。如果xuanzhong不等于1,更新行this,xuanzhong=1,除此之后,我们还要做一个判断,是否中继器里xuanzhong都等于1,如果是的话还要更新表头隔壁的全选多选框为选中状态。

鼠标单击全选多选框时:如果全选多选框的状态为未选中,则设置全选多选框为选中状态,同时更新中继器所有行,xuanzhong=1;如果全选多选框的状态为选中,则设置全选多选框为未选中状态,同时更新中继器所有行,xuanzhong=0。

6、模糊搜索中继器表格

材料准备和摆放

首先我们要准备一个分类搜索的搜索框,如下图所示。

交互事件

表头1-6输入框载入时:分别更新行搜索中继器的内容,例如表头1输入框的内容为元工行,设置搜索中继器第二行内容为员工号,以此类推。

表头1-6输入框失去焦点时:和上面事件一模一样,这样就可以在更新表格的时候页更新搜索条件,方便每一次的使用。

点击搜索按钮时:如果搜索条件为全部,则添加内容中继器的筛选,筛选条件:[[Item.Column1.indexOf(LVAR1)>-1||Item.Column2.indexOf(LVAR1)>-1||Item.Column3.indexOf(LVAR1)>-1||Item.Column4.indexOf(LVAR1)>-1||Item.Column5.indexOf(LVAR1)>-1||Item.Column6.indexOf(LVAR1)>-1]]

如果搜索条件=表头1输入框时:[[Item.Column1.indexOf(LVAR1)>-1]]

如果搜索条件=表头2输入框时:[[Item.Column2.indexOf(LVAR1)>-1]]

如果搜索条件=表头3输入框时:[[Item.Column3.indexOf(LVAR1)>-1]]

如果搜索条件=表头4输入框时:[[Item.Column4.indexOf(LVAR1)>-1]]

如果搜索条件=表头5输入框时:[[Item.Column5.indexOf(LVAR1)>-1]]

如果搜索条件=表头6输入框时:[[Item.Column6.indexOf(LVAR1)>-1]]

7、分类搜索中继器表格

材料准备和摆放

需要准备6个筛选列表,样式可以自己设置,筛选列表需要用中继器来制作的。如果该中继器内只要填写第一行:全部,然后其他是根据逻辑中继器自动生成,逻辑中继器由内容中继器复制而来,用于逻辑处理,默认隐藏不显示,内容中继器变化时需要同时更新逻辑中继器内容。

摆放如下图所示:

交互事件

逻辑中继器每项加载时:首先判断下拉列表中继器是否有改行的内容,如果有的话就不做处理,如果没有的话需要在下拉列表出添加行,例如第三列的中继器,第一行读取女的时候,因为之前没有女,所以添加行到第三个下拉列表中继器,第二行读取男的时候,因为之前没有男,所以页是添加到第三个下拉列表中继器;第三行读取男的时候,因为之前有男的,所以不做处理……这样就可以自动生成下拉列表的条件,而且演示时,能随着表格的增删改,筛选条件也自动变更。

下拉列表项点击时:如果点击全部,移除该列的筛选,如果不是全部,则进行筛选,条件为:TargetItem.ColumnX==this.text。X表示第几列的数字,例如点击第三列的筛选,X就是3

8、分页显示中继器表格

材料准备和摆放

如下图所示,需要材料分别为,分页选择器,左箭头、页数、右箭头、页码输入框、确认按钮、统计条数

交互事件

分页选择器鼠标单击分页时:设置内容中继器每页显示n条,例如点击10条每页,设置中继器每页显示10条,然后在设置统计条数文字为:共itemCount条,共pageCount页;

点击左箭头时:设置内容中继器选择页面为preivious,然后在设置统页数为pageIndex;

点击由箭头时:设置内容中继器选择页面为next,然后在设置统页数为pageIndex;

点击确认按钮时:设置内容中继器选择页面为页码输入框的内容,然后在设置统页数为pageIndex。

9、下载中继器表格

材料准备和摆放

这里做了一个模拟下载的交互,可以下载excel表格,您们如果想换成自己的excel表格,需要先上传至网上然后修改一下url即可。这里需要一个下载图标。

交互事件

鼠标单击下载图标时:在新窗口链接到url,这里的url就是你实现准备好的url地址。

到这里表格就做好了,大家可以根据自己的需要,选择使用或者连和使用,不需要的可以隐藏或者删除。如果喜欢这篇文章的话,希望您能给个赞点个订阅!谢谢大家,我们下期见。

人已赞赏
产品专栏图文教程

Axure share APP使用教程

2020-11-19 20:11:53

图文教程

Axure教程:富文本编辑器

2020-11-20 10:45:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧