Axure中继器实战项目教程：做一个学生管理表

2023-03-0117:49:21原型设计Comments4,793 views1字数 1820阅读模式

本次我们的实战项目是做一个学生管理表，以下是界面截图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

一、界面设计

界面这块非常简单，最上面是查询条件和添加按钮，中间的表格是一个中继器，最下面是分页操作，还有一个隐藏的弹窗，用来添加和修改数据用的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

中继器里面放了一行表格，为了方便我们待会能快速找到对应的单元格填入数据，建议给每个单元格做好命名：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

中继器的字段如下，为了方便演示，我在中继器内放了100行数据：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

最后我们还需要几个相对应的全局变量，其中需要注意的是【add_or_update】这个变量，由于我这里设计的添加和编辑用的是同一个弹窗，所以需要一个变量来告诉系统当前正在做的操作是添加还是编辑：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

二、载入数据

载入数据非常简单，只需要给【中继器】添加【每项加载时】的事件，将各个字段的值填入到对应的单元格即可：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

但你会发现，这里并没有一次性加载全部的100条数据，而是只加载了其中的10条：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

这是因为我在中继器载入的时候，做了一个分页，每页的数据条数获取的是下方分页板块中的【每页数据条数】的默认值：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

【每页数据条数】除了默认的10条，里面还有其他的选项：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

为了实现修改选项时，能够根据所选择的选项改变每页展示的数据条数，需要给这个下拉框添加【选项改变时】的事件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

这样当我们切换下拉框的值时，上方列表会根据选项自动展示对应的数据条数：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

这里还有个问题，就是列表是动态的，因此分页的组件位置应该也是跟着列表动态变化的，所以在切换选项的时候，我们需要调整分页组件的位置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

这里我是在中继器高度的基础上增加100，刚好就是图中看到的效果，同样，在中继器载入的时候，我们根据下拉选项调整了列表的高度，所以也需要同步调整分页组件的位置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

这里在设置每页数量之后加了一个等待事件，是为了等待中继器数据加载完成并完成分页，如果中继器的数据还没有加载完成，就移动分页组件，可能会导致分页组件放置的位置不对。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

三、分页

接下来我们来看看分页组件的其他操作：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

【第一页】很简单，直接添加【设置当前显示页面】的事件，页面选择【值】，页码设为【1】：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

【上一页】、【下一页】、【最后一页】用的也是相同的事件，在【页面】选项中选择对应的选项即可：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

最后来看看这个页码指示器：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

这个指示器除了显示当前的总页数、所在的页数，还具有快捷跳转页面的功能：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

为了使这个指示器能动态显示总页数和所在页数，我们需要在中继器的每项加载时给这个指示器的输入框设置文本，文本内容如下截图，两个参数我在“进阶篇”中讲过，前面是显示当前所在页数，后面的是总页数：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

接着我们给这个指示器添加事件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

获得焦点时，清空内容，等待输入页码；
失去焦点时，显示所在页数和总页数
如果输入不为空且按下了【回车】键，则跳转到所输入的页码的页面

到这里整个分页的功能就做完了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

四、查询

查询按钮比较简单，只是得区分场景，由于我们提供了两个查询条件，但是查询时不一定都会输入，所以需要判断具体提供了多少个条件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

只提供了姓名，只按姓名查询
只提供了年级，只按年级查询
同时提供了姓名和年级，则按两个条件查询

注意添加筛选的时候，不要选择【移除其他筛选】。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

重置很简单，就是移除所有筛选条件，然后把两个查询条件清空或置为默认：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

五、添加和修改

删除我就不讲了，太简单，在“进阶篇”已经讲过了，接下来讲讲添加和修改。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

以下是添加和修改弹窗：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

点击添加时，显示弹窗，并把所有字段内容清空，下拉选项设置为默认值，并且给变量【add_or_update】设置为【add】，表示我们准备做添加操作：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

点击编辑的逻辑跟添加差不多，不过一般编辑时我们需要填入已有的信息，所以这里我们给几个字段填入当前行的数据，并且给变量【add_or_update】设置为【update】，表示我们准备做修改操作，同时需注意，这里我们还需要先取消所有行的标记（确保不会有其他行被标记），再标记当前行（确保能知道当前准备修改的行）：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/31102.html