0
点赞
收藏
分享

微信扫一扫

Axure中继器简单增删改查

三次方 2022-04-07 阅读 74

中继器就是用来加载数据的,最常见的就是中继器做表格

1.中继器表格创建

先拖拽一个表格,删除表体,只显示表头,并且修改表头名称要显示的字段名称 

然后拖拽一个中继器,和表头对齐显示

双击画布上的中继器,进入中继器,将中继器delete删除

删除后,还是处于中继器中,不会退出

再次拖拽一个表格,与表头对齐,可以对中继器表格进行列的增加和删除 

将表格删除至只剩一行,然后双击灰色面板,退出中继器(点击绿色部分,即可查看表数据信息,右侧会映射一个列表,可以进行数据的编辑,可以称之为“后台数据库”)

 

点击中继器,绿色部分,右侧会显示表格内容

编辑右侧的表格,修改表头名称和增加表格内容

 

 此时预览页面,页面是不显示新增的表格内容的,相当于数据都存在后台数据库,但是没有给前端赋值,所以不显示,所以需要给中继器增加一个load加载事件,设置文本即可

点击中继器,右侧点击交互,新建交互,事件选择加载时,设置文本

点击设置文本时,需要选择目标单元格,单元格名称默认都显示为单元格,如果选择时不好选择,需要双击中继器,选中表格,右侧可以设置单元格名称,编辑后,就可区分清楚了

 

面板点击中继器组件,右侧选择每项加载时设置文本

~~1:【设置为】文本、被选项、元件文字等,按照组件类别选择即可

~~2:【值】选择右侧函数标记,设置值的规则

--规则设置:

>>变量填写规则:[["变量名"]]

>>局部变量:我这里称为“过程变量”,说白了这里就是去画板的组件上取值

点击fx函数,点击插入变量或函数,选择对应的值,表达式显示:[[item.后台数据库列名]]

各列对应的字段一一对应设置 

操作后执行预览,查看预览效果 

 

预览页面刚开始可能表格下方会有空白缝隙,设置分页和交替颜色,再次查看可能就显示正常了,暂未查找到原因 

这样由中继器显示的表格就配置完成了。 

2.中继器表格增加数据

新增按钮增加交互条件,一个是新增弹框的动态面板,一个是重新加载表格数据

(动态面板创建是基于弹框内容的组合交互,先把弹框内容组合选中,右键设为动态面板,设为隐藏,点击state修改动态面板名称:新增,方便后续交互查找,取消按钮也和动态面板做交互,点击取消按钮时,隐藏该动态面板)

点击添加按钮时,隐藏该新增动态面板,同时点击添加行,选择中继器,点击添加行按钮

页面显示添加行到中继器弹框,点击Fx进入编辑值页面

在编辑值页面,先点击添加局部变量,选择变量值,并且将变量名称写在[[ ]],点击确定按钮

性别选项不是文本框,不是输入文字,所有需要切换选择状态,选择为被选项

后续每个字段都需要设置对应的变量值,设置后点击完成按钮完成交互条件,交互会显示中继器添加一行的操作 

 新增按钮设置交互,一是单击时,显示新增动态面板,并且加载每个变量的变量值,单击时,继续添加动作,设置文本,选择要加载的目标名称,是中继器对应的各个字段名称,点击值后面显示的fx进入编辑值页面,

点击fx进入编辑值页面,点击插入变量或函数

选择对应要取的变量值

完成交互,点击预览,查看预览效果

复选框交互条件

先在外部表格左侧增加一列,拖拽一个复选框,编辑文字为全选,选中该复选框,设置交互条件,如图显示

双击进入中继器页面,中继器表格左侧也增加一列,和外部表格对齐显示,也拖拽一个复选框,对齐显示,并且选中该复选框,如果中继器表格增加新的一列,fx函数值编辑页面需要重新选择赋值,设置交互条件,如图显示

3.中继器表格删除数据

添加删除按钮,添加交互条件,单击时,设置选中复选框和选项都不勾选

单击时,选择删除行,选择中继器,选择行规则,点击fx函数,进入编辑页面

按照交互命令配置交互,配置好后预览查看页面

 

勾选全选按钮,列表所有数据都是勾选状态

 

点击删除按钮,页面删除所有数据

 

预览后,先勾选全部数据,再勾选 掉部分数据,剩余要删除的数据,点击删除

删除后显示未删除的表格数据

 

 4.编辑中继器表格内容

表格右侧增加一列,操作列

中继器表格右侧添加一列,并且显示编辑操作按钮

 

先设置一个编辑页面动态面板,参照新增页面动态面板,设为隐藏

 

编辑-动态面板提交按钮设置交互条件

单击时,隐藏编辑动态面板,更新行,选择中继器,选择已标记,选择列按钮,点击fx编辑函数页面,选择变量值 

 设置后点击完成即可

取消按钮也设置交互条件,点击取消按钮时,隐藏编辑-动态面板

 点击中继器页面,选中编辑单元格,单元格增加交互条件,单击时,显示编辑-动态面板,标记当前行,并且设置文本

 预览查看效果

 

 

 

 

数据编辑成功。 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

举报

相关推荐

0 条评论