hello，大家好，今天给大家介绍在axure如何制作高保真高交互的表格。交互效果包含有增删改、上下移动、排序、多选、模糊搜索、分类筛选、分页显示、下载等等，作者会在下文中详细介绍每种效果是如何制作的。制作完成后，使用起来也非常简单，只需要填写表格表头和中继器表格即可完成，其他的由系统自动完成。这样非常的美观、方便、使用的原型强烈推荐给大家使用。
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/ax9/2bcd864c6573fb02
【原型下载】
方式2：https://weidian.com/item.html?itemID=3681949369
一、效果介绍
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地址。
到这里表格就做好了，大家可以根据自己的需要，选择使用或者连和使用，不需要的可以隐藏或者删除。
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
