通过中继器实现表格的增删改操作,示例如下:

1、拖拽以下元件到面板中,并分别命名好

2、添加一个中继器,删除里面本身的所有行

3、在中继器编辑页面添加与表格相同大小的6个矩形框并命名,注意是矩形框哦,不是表格

这里需要全选6个矩形框并组合,设置一个组合名


4、给中继器添加行名称:id,name,gender,position,email,operation

5、以上准备工作算是完成了。现在要给中继器添加交互,进行数据添加。
选择【每项加载时】,设置每个中继器中的表格数据等于什么。
这里也就是设置编号、姓名、性别、职位、邮箱的参数取值。特别注意的是,为了实现编号自增,编号的动作设置为[[item.index]]

6、然后为【添加按钮】增加交互设置,即点击添加就增加一行的意思

点击右下角的【添加行】进行配置添加什么行内容到表格中

点击每个参数后面的fx进行变量配置

到此,添加功能就完成啦。
接着,下一章节《【Axure实例】中继器增删改查1——改》
网友评论