Axure中级教程：管理后台内容模板（中继器全交互详解）
本文作者为大家分享了一组Axure中继器常用交互模板，作者从预览原型，到所需原件，再到操作步骤都一一展开了分析，并对过程中需要注意的问题进行了介绍，希望对你有所启发。
上一期和大家分享了Axure交互大全：Axure全交互模板及视频教程，收到大家的好评，首先非常感谢大家。那今天就给大家分享多个交互联动的教程，主要是关于中继器里面全部动态交互，包括新增、删除、修改、查询、筛选、排序、分页、翻页、导入、导出等效果，该原型可以作为管理后台的内容模板，让我们快速完成一个界面，提高工作效率。
原型演示及下载地址：https://axhub.im/pro/93b752507d7005ba/#g=1
开始教学：
01 制作中继器表格
1.1 页面材料
矩形——根据实际的表格内容需求，如果需要6列，则放置6个矩形，自行调整矩形的宽高
修改按钮和删除按钮——后续制作动态交互使用
1.2 中继器表格内容
如下图所示，根据实际填写中继器表格内容
1.3 交互
我们要把中继器表格的内容传给中继器内的矩形
每项加载时——设置矩形的文本为[[Item.ColumnX]]，X代表列数，例如第一个矩形，我们设置其文本为[[Item.Column1]]，第二个矩形，就设置其文本为[[Item.Column2]]……以此类推
1.4 制作完成后的预览效果
02 新增行
2.1 页面材料
提交按钮一个、取消按钮一个、关闭按钮一个。
输入框——N个根据表格的内容的需求
下拉列表——N个，根据报个的内容需求
输入框和下拉列表根据需要，例如姓名，这种无法选择的就应该用输入框，性别这种能选择的最好就用下拉列表。
如下图所示摆放美观即可，然后将以上所有元件组合转为动态面板（新增面板），固定在浏览器居中位置，默认隐藏。
2.2 交互
这里要提到在表格上方有一个添加按钮，鼠标点击添加按钮是，显示新增面板。
取消和关闭按钮：鼠标单击时隐藏新增面板
提交按钮：鼠标单击提交按钮时，我们首先要添加行，然后隐藏动态面板
添加行内容：[[LVAR1]]是一个变量，如果是Column1，我们设置[[LVAR1]]=第一个输入框（下拉列表）的文本值，如果是Column2，我们设置[[LVAR1]]=第2个输入框（下拉列表）的文本值……以此类推
这样就基本完成了添加行的动作了，不过这里要科普一下，一般而言，在提交的时候先要判断必填项是否填写正确，如果正确才能提交，不正确的话需要提示用户重新填写。
03 修改行
3.1 页面材料
和新增行一致，可以复制新增面板，然后修改名称为修改面板。这里注意，一般而言，表格里面需要有一行是唯一编码的，例如员工号是唯一的，一旦创建不可修改，所以这里可以把第一个输入框禁用或者用矩形代替
3.2 交互
点击表格中的修改按钮：
我们要设置修改面板里面的输入框或下拉列表的值为列表对应行的内容，这里用设置文本的交互，如果是第一个输入框或下拉列表，我们设置其文本值为[[Item.Column1]]，第2个输入框或下拉列表，我们设置其文本值为[[Item.Column2]]……以此类推
设置文本后，显示修改面板即可
取消和关闭按钮：鼠标单击时隐藏修改面板
提交按钮：鼠标单击提交按钮时，我们首先要更新行，然后隐藏动态面板。
上文提到表格里面需要有一行是唯一编码的，案例中是行员工号，所以更新行的条件为[[LVAR1==Item.Column1]]，LVAR1是变量，我们选中员工号的输入框，Column1是表格里面员工号所在的列
更新内容：[[LVAR1]]是一个变量，如果是Column1，我们设置[[LVAR1]]=第一个输入框（下拉列表）的文本值，如果是Column2，我们设置[[LVAR1]]=第2个输入框（下拉列表）的文本值……以此类推
这样就基本完成了修改行的动作了。同样，在提交的时候先要判断必填项是否填写正确，如果正确才能提交，不正确的话需要提示用户重新填写。这个不在中继器交互的范畴就不展开了。
04 删除行
点击表格中的删除按钮，执行删除该行的交互即可。
05 查询
5.1 页面材料
输入框1个，搜索按钮一个，刷新按钮一个
5.2 交互
一般查询我们会用模糊查询，例如我们搜索姓名，输入张，就能把所有名字里含有张的人查询出来，这里就是模糊搜索，用筛选事件完成。
如果需要对列表的第一列进行搜索，[[Item.Column1.indexOf(LVAR1)>-1]]，Item.Column1指的是列表的第一列，LVAR1代表输入框的文字；如果对第二列进行搜索，则为[[Item.Column2.indexOf(LVAR1)>-1]]……以此类推
06 筛选
6.1 页面材料
下拉列表，这里可以用系统的下拉列表，如果觉得演示比较难看的也可以用自制的下拉列表。
6.2 交互
这里要分两种情况，如果选择全部，我们要移除该筛选
如果选择的不是全部，我们要添加筛选事件，[[Item.ColumnX==this.text]]。例如筛选第一行的时候，即[[Item.Column1==this.text]]，筛选第二行时，即[[Item.Column2==this.text]]……以此类推
07 排序
7.1 页面材料
一个向上的三角形，代表升序
一个向下的三角形，代表降序
7.2 交互
点击升序三角形时，添加排序，属性选择表格对应列，例如Column1代表第一列，Column2代表第2列……以此类推，排序类型可以根据需求选择number（数字），text（文本），（date）日期，顺序选择升序。
如果点击降序三角形，除了顺序选择切换，其他和升序三角形一致。
08 分页
8.1 页面材料
矩形n个，里面注明是多少条每页，例如10条/页，20条/页，50条/页，100条/页……
8.2 交互
点击分页矩形时，设置中继器每页项目数为矩形显示的数目即可。
09 翻页
9.1 页面材料
下一页和上一页的按钮，输入框和确认按钮
9.2 交互
鼠标点击下一页按钮时，设置中继器页面为next
鼠标点击上一页按钮时，设置中继器页面为previous
鼠标点击确认按钮时，设置中继器页面为value，输入具体页码为[[LVAR1]]，即输入的页面数
10 导入和导出
10.1 导入
这里只是模拟导入的效果，选择一个文本框，类型选择文件即可。
10.2 导出
这里也是做一个模拟效果，事前需要将文件上传，然后鼠标单击导出按钮时，打开已上传文件的url地址即可。
以上就是本期分享的全部内容，点下关注不迷路哦，谢谢观看。
Axure中级教程：管理后台内容模板（中继器全交互详解）相关推荐
- Axure经典案例下载（crm需求文档+web端交互组件+Axure移动端模板+管理后台框架模板）
crm需求文档+web端交互组件+Axure移动端模板+管理后台框架模板 作品展示2 作品展示3 作品展示4 交互演示地址及下载链接 https://www.pmdaniu.com/storages/ ...
- 50个高端大气上档次的管理后台界面模板(转)
译自: 50 Incredible Admin Page Templates 译自: 50个高端大气上档次的管理后台界面模板 请尊重版权,转载请注明来源,多谢-- 大部分网站都有一个管理面板或者管理界 ...
- 通用后台管理系统，管理后台框架模板演示地址
一.这个通用的后台管理系统,管理后台框架模板,主要包括如下功能: 1.功能模块 主要包括新闻管理.留言管理.广告管理.友情链接管理.图片管理.用户管理等. 具体包括搜索.列表展示.分页.图片上传.批量 ...
- ECShop 模板库项目功能详解
2019独角兽企业重金招聘Python工程师标准>>> 本文希望能给想了解ECShop库项目功能的人提供一些帮助.ec的高手就可以忽略了,有不同意见的朋友欢迎提意见. 许多刚接触 E ...
- python3 format函数_Python学习教程：Python3之字符串格式化format函数详解（上）
Python学习教程:Python3之字符串格式化format函数详解(上) 概述 在Python3中,字符串格式化操作通过format()方法或者f'string'实现.而相比于老版的字符串格式化方 ...
- format函数_Python学习教程：Python3之字符串格式化format函数详解（上）
Python学习教程:Python3之字符串格式化format函数详解(上) 概述 在Python3中,字符串格式化操作通过format()方法或者f'string'实现.而相比于老版的字符串格式化方 ...
- python语言的格式框架_django框架模板语言使用方法详解
本文实例讲述了django框架模板语言使用方法.分享给大家供大家参考,具体如下: 模板功能 作用:生成html界面内容,模版致力于界面如何显示,而不是程序逻辑.模板不仅仅是一个html文件,还包括了页 ...
- goland 方法注释_goland 设置注释模板的过程图文详解
网上找了一些办法 都没有说到关键点: 梳理一下设置步骤如下,以及避免的坑. 新建文件自动加注释: Preferences | Editor | File and Code Templates 打开go ...
- Kotlin——中级篇（二）： 属性与字段详解
在前面的章节中,详细的为大家讲解到了Kotlin中对类的类的定义.使用.初始化.初始化.类继承等内容,但是在一个类中,几乎上是不可能不出现属性与字段(field)的,这一篇文章就为大家奉上Kotlin ...
- protobuf前后端解析_前端后台以及游戏中使用google-protobuf详解
前端后台以及游戏中使用google-protobuf详解 [TOC] 0.什么是protoBuf protoBuf是一种灵活高效的独立于语言平台的结构化数据表示方法,与XML相比,protoBuf更小 ...
最新文章
- easyui-window窗口不遮挡_眼睛是心灵的窗口、佩戴舒适又时尚的米家防蓝光护目镜 Pro...
- 新年第一战| 数字中国创新大赛·大数据赛道等你来战
- wxWidgets：wxConfig 和相关类的演示
- linux ls命令全称,Linux ls命令的使用
- 使用foreach循环遍历集合元素
- JavaScriptCore全面解析
- android 图片拍照,Android获取图片拍照时间
- 剑指offer面试题34. 二叉树中和为某一值的路径(先序遍历)(回溯)
- 很高兴向大家推荐《jBPM4工作流应用开发指南》这本书
- AI综述专栏 | 多模态学习研究进展综述
- PyQt5教程-05-消息盒子
- SIM800C长短信学习笔记
- 2020的Android凉了？聊聊 Android 现状及出路！
- 麦克斯韦方程组在电力传动领域的应用（1）
- #Java学习#实验考试题
- css布局——GFC
- CookieSession会话技术
- 算法面试，是要考考你的基本盘
- 二叉树（python实现）
- 关于DELL电脑重装系统后设备管理器缺少驱动