Axure Repeater实现表格的分页,添加,查询,删除,编辑

第二次接触axure,发现了axure的好多新的功能。

  1. 文字的超链接:呵呵,之前都是通过控制FontStyle(color属性和下划线)

  1. 输入框类型验证

 

  1. 输入框提示

 

  1. Button Shape,自定义按钮。


  1. repeater控件

Repeat从字面上理解就是重复,下面我们来讲一下如何使用repeater控件实现对数据的增删改查

 

Repeater最初拖到页面中是

双击进入单个重复项的编辑窗口,不要被编辑窗口中的小矩形框限制住思维。我们首先看到的应该是页面下方的

  1. repeater绑定数据

我们将页面中的矩形框删除,填入6label,并调整间距和高宽。对6label合理命名。在页面下方的Repeater Dataset 填写数据

我们现在已经在一个重复项中拖入了6label,并为拖入主页面中repeater,设置了数据集,现在我们要将每个重复项绑定到数据集中的每一条记录中,如果数据集中有4条记录,那么主页中的repeater就会显示4行。

现在我们理清对应关系,就是一条记录对应一个重复项。每个重复项中的一个label,对应一条记录中的一个字段,我们接下来绑定这种对应关系。

 

 

 在页面下方的Repeater Item Interactions中选择

 


 

 

浏览器中的显示效果

 

  1.  实现分页

表格一般都带有分页,repeater也封装了分页,在单个重复项的编辑窗口下方进行相应的分页设置

 

那么如何在页面中控制repeater的分页呢?在页面中拖入两个label,和四个控制分页("第一页,上一页,下一页,最后一页")的图片。

先为这四个按钮添加OnClicke事件

为两个lablel赋值。

 

 

 

分页效果(为了查看分页效果,我们设为每页1条记录)在这里没有做到点击4个按钮控制当前页号(第?页)的改变,请读者自行设计。

 

  1. 实现查询

  1. 搜索按钮的单击事件

 

 

 

  1. 实现添加

 

  1. repeater添加行的每个字段赋上文本框对应的值。

  1. 删除已选中行

这个功能的实现思路与网页使用是一致的,先选中,后删除.

只需两个事件,标记repeater中的单击行(这个事件是在repeater的单个重复项窗口操作的)

删除标记行(删除按钮的OnClick事件)

 

  1. 编辑事件

编辑事件,我实现的有点复杂,大家有好的方法可以跟我说

第一步同删除是一样的,都是标记单击行(在repeater的单个重复项的编辑窗口)

第二步的编辑窗口是一致的,我们利用变量,将标记行的每个字段值用变量保存下来。

 

第三步为编辑弹框的文本框赋值(主页面的编辑窗口)

按钮的OnClick事件

选择对应的全局变量

此处保存的操作,跟添加里的保存是一样的,不赘述。

 

 

 

 

### 如何在 Axure 中设计表格 #### 1. 利用中继器创建基础表格 Axure 的 **中继器** 是一种强大的组件,可以用来动态生成列表或表格。通过绑定数据源到中继器,可以根据实际数据量自动生成对应的行数[^1]。 以下是基本步骤: - 创建一个新的中继器并设置其项布局为网格模式。 - 将每一列的内容映射至相应的字段名。 - 设置每行列宽和高度以适配内容显示。 ```html <!-- 示例 HTML 结构 --> <div class="table"> <div class="row header"> <span>姓名</span> <span>年龄</span> <span>地址</span> </div> <!-- 动态生成的行 --> <div class="row" repeater-item> <span>{{Item.Name}}</span> <span>{{Item.Age}}</span> <span>{{Item.Address}}</span> </div> </div> ``` #### 2. 实现分页功能 对于大数据量的情况,可以通过计算总记录数与每页显示条目数量的比例来自动生成页码,并利用条件逻辑控制当前页面所展示的具体数据范围。 具体实现如下: - 添加一个全局变量 `CurrentPage` 来存储当前所在页号。 - 计算起始索引位置 `(CurrentPage - 1) * PageSize` 和结束索引位置 `CurrentPage * PageSize`。 - 配置过滤规则使仅满足上述区间的项目被渲染出来。 #### 3. 构建树形结构表 如果需要呈现具有层次关系的信息,则可借助嵌套中继器来达成目标。外层负责管理顶级节点而内层则处理子级详情部分[^2]。 示例代码片段展示了父子关联方式: ```javascript // 假设 JSON 数据形式如下 [ { "id": 1, "name": "部门A", "children": [ {"subId": 101, "subName": "员工X"}, {"subId": 102, "subName": "员工Y"} ] } ] // JavaScript 控制展开折叠状态 function toggleChildren(rowElement){ const childContainer = rowElement.querySelector('.child-container'); if(childContainer.style.display === 'none'){ childContainer.style.display = ''; }else{ childContainer.style.display = 'none'; } } ``` #### 4. 应用固定列技术优化大宽度表格体验 针对超长横向滚动场景下的重点信息保留需求,可通过组合运用动态面板配合绝对定位技巧完成特定几列始终可视的效果[^3]。 主要思路概述: - 把整个表格拆分为两大部分——左侧锁定区域与右侧自由滑动域; - 当用户拖拽水平滚轴时同步调整这两块内部元素的位置参数从而营造视觉上的连贯性; --- ### 总结 以上介绍了几种常见的基于 Axure 平台构建复杂业务报表的方法论,涵盖了从简单静态罗列直至支持交互式探索型分析界面的设计实践路径[^4]。
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值