地方资讯

Axure中级教程:管理后台内容模板(中继器全交互详解)

  www.twq6.cn傲视遮天: 江洋大盗肆虐全城 傲视遮天灭匪夺宝活动,上一期和大家分享了Axure交互大全:Axure全交互模板及视频教程,收到大家的好评,首先非常感谢大家。那今天就给大家分享多个交互联动的教程,主要是关于中继器里面全部动态交互,包括新增、删除、修改、查询、筛选、排序、分页、翻页、导入、导出等效果,该原型可以作为管理后台的内容模板,让我们快速完成一个界面,提高工作效率。

  矩形——根据实际的表格内容需求,如果需要6列,则放置6个矩形,自行调整矩形的宽高

  每项加载时——设置矩形的文本为umnX]],X代表列数,例如第一个矩形,我们设置其文本为[[Item.Column1]],第二个矩形,就设置其文本为[[Item.Column2]]……以此类推

  输入框和下拉列表根据需要,例如姓名,这种无法选择的就应该用输入框,性别这种能选择的最好就用下拉列表。

  如下图所示摆放美观即可,然后将以上所有元件组合转为动态面板(新增面板),固定在浏览器居中位置,默认隐藏。

  这样就基本完成了添加行的动作了,不过这里要科普一下,一般而言,在提交的时候先要判断必填项是否填写正确,如果正确才能提交,不正确的话需要提示用户重新填写。

  和新增行一致,可以复制新增面板,然后修改名称为修改面板。这里注意,一般而言,表格里面需要有一行是唯一编码的,例如员工号是唯一的,一旦创建不可修改,所以这里可以把第一个输入框禁用或者用矩形代替

  我们要设置修改面板里面的输入框或下拉列表的值为列表对应行的内容,这里用设置文本的交互,如果是第一个输入框或下拉列表,我们设置其文本值为umn1]],第2个输入框或下拉列表,我们设置其文本值为[[Item.Column2]]……以此类推

  上文提到表格里面需要有一行是唯一编码的,案例中是行员工号,所以更新行的条件为umn1]],LVAR1是变量,我们选中员工号的输入框,Column1是表格里面员工号所在的列

  更新内容:[[LVAR1]]是一个变量,如果是Column1,我们设置[[LVAR1]]=第一个输入框(下拉列表)的文本值,如果是Column2,我们设置[[LVAR1]]=第2个输入框(下拉列表)的文本值……以此类推

  这样就基本完成了修改行的动作了。同样,在提交的时候先要判断必填项是否填写正确,如果正确才能提交,不正确的话需要提示用户重新填写。这个不在中继器交互的范畴就不展开了。

  一般查询我们会用模糊查询,例如我们搜索姓名,输入张,就能把所有名字里含有张的人查询出来,这里就是模糊搜索,用筛选事件完成。

  下拉列表,这里可以用系统的下拉列表,如果觉得演示比较难看的也可以用自制的下拉列表。

  点击升序三角形时,添加排序,属性选择表格对应列,例如Column1代表第一列,Column2代表第2列……以此类推,排序类型可以根据需求选择number(数字),text(文本),(date)日期,顺序选择升序。

  矩形n个,里面注明是多少条每页,例如10条/页,20条/页,50条/页,100条/页……

  这里也是做一个模拟效果,事前需要将文件上传,然后鼠标单击导出按钮时,打开已上传文件的url地址即可。

  本文由 @做产品但不是经理 原创发布于人人都是产品经理,未经作者许可,禁止转载。

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。