前端学习之路之Axure RP 9 中继器的高级使用（增删改查）（4）

目录

实现新增功能： 

实现编辑功能：

实现删除功能：

实现模糊查询功能：

---

首先从元件库中拖出一个中继器，双击中继器然后删除原来自带的方框：

这个边框就是中继器的范围，我们从元件库中拖入一个方框，将方框放进中继器范围中并拉到合适的大小，并从元件库中拖一个图像和一个标题进入该方框中：

 接下来点击关闭并在样式中将中继器布局和间距适当的修改：

 在中继器样式中添加数据：

 点击中继器的交互，将name和image绑定到对应的地方：

增添相应的图标或功能框：

 接下来我们来实现增删改查功能：

首先拖入一个动态模板，将动态模版设为隐藏，双击动态模板，设置两个状态，一个用来实现新增功能，一个用来实现编辑功能：

 

实现新增功能： 

给新建按钮设置交互，使点击按钮会显示出动态模版：

 点击动态模版，给取消按钮和确定按钮设置交互事件：

设置局部变量使获得输入框输入的内容：

 

 这样新增功能就实现了，点击预览看一下实际效果：

实现编辑功能：

给编辑图标设置交互，使它能获取中继器中的name：

 在动态模版中给确定按钮设置交互，获得被标记的name并将它修改后更新进中继器中的数据：

 点击预览查看效果：

实现删除功能：

实现单个删除和批量删除：

先拖入一个动态模版，创建好删除确认的模态框：

为单个删除设置下图的交互：

 

 为复选框和批量删除设置交互：

 

 这样即可实现单个删除和批量删除功能，我们预览一下效果：

 点击删除图标：

 单个删除成功。

选择多个复选框，点击批量删除：

批量删除成功。 

实现模糊查询功能：

在查询按钮设置这样的交互：

这里用到了indexOf()的方法

 预览查看效果：

 内容如有错误，欢迎大家在评论区指出，谢谢各位的浏览。