中继器的使用

一、界面设计

最上面是查询条件和添加按钮，中间的表格是一个中继器，最下面是分页操作，还有一个隐藏的弹窗，用来添加和修改数据用的。

中继器里面放了一行表格，为了方便能快速找到对应的单元格填入数据，建议给每个单元格做好命名：

中继器的字段如下，为了方便演示，中继器内放100行数据：

还需要几个相对应的全局变量，其中需要注意的是【add_or_update】这个变量，由于设计的添加和编辑用的是同一个弹窗，所以需要一个变量来告诉系统当前正在做的操作是添加还是编辑：

二、载入数据

载入数据，只需要给【中继器】添加【每项加载时】的事件，将各个字段的值填入到对应的单元格即可：

这时发现，这里并没有一次性加载全部的100条数据，而是只加载了其中的10条：

这是因为在中继器载入的时候，做了一个分页，每页的数据条数获取的是下方分页板块中的【每页数据条数】的默认值：

【每页数据条数】除了默认的10条，里面还有其他的选项：

为了实现修改选项时，能够根据所选择的选项改变每页展示的数据条数，需要给这个下拉框添加【选项改变时】的事件：

这样当切换下拉框的值时，上方列表会根据选项自动展示对应的数据条数：

这里还有个问题，就是列表是动态的，因此分页的组件位置应该也是跟着列表动态变化的，所以在切换选项的时候，需要调整分页组件的位置：

这里在中继器高度的基础上增加100，刚好就是图中看到的效果，同样，在中继器载入的时候，根据下拉选项调整了列表的高度，所以也需要同步调整分页组件的位置：

这里在设置每页数量之后加了一个等待事件，是为了等待中继器数据加载完成并完成分页，如果中继器的数据还没有加载完成，就移动分页组件，可能会导致分页组件放置的位置不对。