axure中继器
时间: 2025-05-03 20:46:01 浏览: 23
### Axure 中继器使用方法详解
#### 什么是中继器?
中继器是一种动态列表容器,可以用来显示和管理一组具有相同结构的数据。它类似于数据库中的表格,每一行代表一条记录,每一列是一个字段。中继器支持数据的增删改查操作,并可以通过设置交互逻辑来实现复杂的功能[^5]。
---
#### 如何初始化中继器?
1. **定义字段**
在中继器属性面板中,单击“编辑字段”,添加所需的字段名(如 `name`、`price` 等),这些字段将作为中继器的列[^2]。
2. **填充初始数据**
可以为中继器预设一些默认数据,在“编辑项”模式下手动输入或导入 JSON 数据格式的内容[^4]。
3. **设计样式**
设置中继器内部组件的布局和外观,使其符合目标效果。例如调整字体大小、颜色以及边距等参数[^1]。
---
#### 增加新行
要向中继器添加一行数据,需执行以下步骤:
- 创建一个按钮或其他触发事件的对象;
- 配置其交互行为为“在中继器中插入项”,可以选择插入选项的位置(顶部/底部/当前选中位置之后);
- 如果希望自动填写某些固定值,则可以在同一动作里设定对应的字段内容。
示例代码如下所示:
```javascript
var newItem = {};
newItem["name"] = "产品A";
newItem["price"] = "$100";
repeaterName.insertItem(newItem, "atEnd");
```
---
#### 删除现有条目
删除某一行的操作相对简单明了:
- 设定条件判断哪一项被选取;
- 执行移除选定项目的命令即可完成清理工作。
具体脚本片段展示如下:
```javascript
if (selectedItems.length > 0){
repeaterName.removeItem(selectedIndex);
}
else{
alert("请选择至少一项!");
}
```
---
#### 修改已有项目的信息
更新特定单元格内的数值可通过双击进入编辑状态或者编写专门的小程序段来进行修改处理:
实例演示更改价格部分:
```javascript
for(var i=0;i<repeaterName.items.length;i++){
var currentItem=repeaterName.getItem(i);
if(currentItem.name=="旧品名"){
currentItem.price="$新的金额";
}
}
```
---
#### 计算汇总值
如果需要统计某一列所有成员之总和的话,那么就需要遍历整个集合并累加相应属性上的数字值得到最终结果[^3]。
以下是计算总价的一个例子:
```javascript
function calculateTotal(repeaterId,columnName){
let totalSum=0;
for(let item of eval(`rp_${repeaterId}.items`)){
totalSum+=parseFloat(item[columnName]);
}
return totalSum.toFixed(2); //保留两位小数
}
console.log(calculateTotal('myRepeater','amount'));
```
---
#### 添加序列编号
为了让每笔资料前都有独一无二的流水号呈现出来,我们通常会在渲染阶段动态生成该序号而不是将其保存至实际模型之中。
下面给出一段简单的做法说明:
```javascript
onLoad(function(){
rp_myRepeater.setItems(rp_myRepeater.items.map((item,index)=>({...item,no:index+1})));
});
```
---
### 注意事项
- 当涉及大量数据加载时应考虑性能优化措施以免影响用户体验。
- 对于复杂的业务场景建议合理规划好前后端分工界面减少重复劳动提高效率。
阅读全文
相关推荐















