一、使用中继器实现表格数据显示

1、拖一个表格过来,然后删掉表体,只保留一个表头

axure数据容器_数据库

2、然后修改表头名称,之后拖一个中继器过来,与表头对齐:

 

axure数据容器_数据库_02

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

axure数据容器_数据_03

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

axure数据容器_取值_04

4、然后左侧拖一个表格过来,与表头对齐即可(这里可以对中继器中表格进行列的增加和删除)

axure数据容器_数据_05

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

axure数据容器_数据库_06

6、可以在右侧“后台数据库”录入一些数据,然后F5预览
---此时预览,表格内是没有数据的(就像是“后台数据库”有数据,但是没有给前端页面传值一个意思):

axure数据容器_axure数据容器_07

7、那么如何才能有值呢?只需要在中继器上加一个load事件,设置文本即可,操作如下:

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

axure数据容器_数据_08

8、当我们点击设置文本时,需要选择设置的目标单元格:

----因为之前没有命名,默认都是(单元格),不好区分,所以需要进行命名操作,如下图:

--双击进入中继器>>选中单元格>>命名>>之后再次设置文本时候就可以看到我们设置的目标单元格了

axure数据容器_数据库_09

9、进行文本的设置(该步骤为概念讲解,直接看步骤10即可):

--面板点击中继器组件,,右侧选择load时设置文本

--说明1:【设置为】文本或者被选项或者元件文字等等,按照组件类别选择即可

--说明2:【值】选择右侧函数标记,进行值得规则设置

--规则设置:

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

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

axure数据容器_数据库_10

10、这里我们给中继器表初始化值,不需要用到9步骤的那些,只需要将值给中继器“后台数据库”对应的列即可,设置如下:

--[[item.后台数据库列名]]:表达式规则这样写即可,然后将其他几个列一一设置完毕即可:例如:[[item.name]]、[[item.sex]]、[[item.age]]

axure数据容器_axure数据容器_11

11、等设置完毕后,F5预览效果,即可看到中继器实现的表格已经有数据了:

axure数据容器_取值_12

至此,使用中继器实现表格数据显示已经结束,接下来做:中继器-实现表格数据添加