03-中继器的增删改查操作

一、使用中继器进行增删改查操作

一、增删改查的前期准备
二、新增功能
三、删除功能
四、修改功能
五、查询功能

• Axure中继器结构与原理详解推荐先花几分钟看一下这个：Axure中继器结构与原理详解

• 接下来我们进入激动人心的时刻实操环节：先放个成果图（第一次接触，功能都实现了，虽然很简陋笑哭）
  

一、增删改查的前期准备

1、添加表格

• 从元件库中拖一个中继器过来，双击中继器进去
  

• 将表格和中继器对奇，并删除多余的两行，
• 将第三列删除文本后添加编辑和删除按钮，
• 从元件库中拖一个复选框按钮在最左边
  如图所示：
  
  
  

2、添加模态框

从元件库中分别拖入方框1、标题一、单行文本输入框、两个按钮，最后加以调整样式大小，如下图所示

3、添加搜索框，查询按钮、批量删除和新增按钮，方法同上：

二、新增功能

1、绘制模态框，默认隐藏。

• 用户点击新增按钮，模态框显示，用户输入数据，点击确定按钮，填充数据到数据集中(注意设置局部变量)，模态框关闭

• 用户再次点击新增按钮，模态框的时候，模态框内有上次填充的值，需要清空，给新增按钮的点击交互里添加动作【设置文本】，设置要清空的元件的值为空。

在新增按钮上绑定如下图事件：

2、确定按钮绑定的事件

如果模态框标题为新增信息，则打开新增模态框

新增信息打开新增行，插入函数

三、删除功能

五个功能之中最简单的一个功能，没有之一
双击进入中继器，在删除按钮上绑定单击事件——删除行操作

四、编辑功能

• 编辑模态框的编辑确定按钮，新增用例，IF元件文字为编辑信息，则更新行，隐藏模态框，最后取消标记行，防止遗留标记
  
  

• 取消按钮
  

五、查询功能

使用过滤器实现

最后，祝愿大家看完都能有所收获，感谢大家