最近在做OutSystems开发时,遇到一个功能就是要实现动态列的表格来展示数据,那么OutSystems如何实现动态列表格展示统计数据呢?取出展示数据倒不是很难,直接用SQL或者Aggregate都可以,不过江湖人士倒是喜欢用SQL,好在OutSystems提供了用SQL查询的功能;动态表将全部基于您填充结构的数据量。您确实需要创建一个包含标头值 Lines 和 alues 的结构,将其序列化为 JSON,并将其发送到 Web 块,该组件将生成您的动态表。
OutSystems如何实现动态列表格
在实现这个功能时,找遍了OutSystems里面自带的控件似乎没有可用的控件,于是通过Google搜索到类似的需求,在官方论坛发现了如下所示的可用控件,稍微改一下就可以用了,下面是原始的链接地址:
DynamicTable – Reactive – Overview (O11) | OutSystems
第一步:获取动态数据源,通常是group by后的结果
下图是数据库里面的分组查询结果数据,根据业务自行查询数据即可。
DECLARE @sk NVARCHAR(32), @dID INT = 9527; SELECT CONVERT(VARCHAR, FinalRate) + '%' AS FinalRate, COUNT(1) AS TotalInvestors FROM ( SELECT b.InterestRate, ISNULL(c.PromoCodeRate, 0) AS PromoCodeRate, ISNULL(d.PromoRate, 0) AS PromoRate, a.DealID, b.InterestRate + (CASE WHEN a.CreatedAt < CONVERT(DATETIME, '2018-04-04') THEN 0 ELSE ISNULL(c.PromoCodeRate, 0) END) + ISNULL(d.PromoRate, 0) AS FinalRate, a.CreatedAt FROM Deals a INNER JOIN Users u ON a.InvestorID = u.UserID INNER JOIN UserStats ue ON u.UserID = ue.UserID INNER JOIN DealDetails b ON a.DealID = b.DealID AND b.DealID = @dID LEFT JOIN PromoCodes c ON a.PromoCodeID = c.PromoCodeID LEFT JOIN Promos d ON a.DealID = d.DealID WHERE a.IsDeleted = 0 AND b.InterestRate > 0 ) AS a GROUP BY FinalRate;
![OutSystems如何实现动态列表格展示统计数据? 1 OutSystems如何实现动态列表格展示统计数据? 1](https://jhrs.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
第二步:编写Action准备数据源并拼接成JSON
在当前的示例中,我手动为表格手动拼接了第一列的利率和数量信息,如下图所示。
![OutSystems如何实现动态列表格展示统计数据? 2 OutSystems如何实现动态列表格展示统计数据? 2](https://jhrs.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![OutSystems如何实现动态列表格展示统计数据? 3 dynamic data](https://jhrs.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![OutSystems如何实现动态列表格展示统计数据? 4 OutSystems如何实现动态列表格展示统计数据? 3](https://jhrs.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![OutSystems如何实现动态列表格展示统计数据? 5 OutSystems如何实现动态列表格展示统计数据? 4](https://jhrs.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
剩下的操作就是从数据库里面取出数据,然后循环生成表格的每列对象即可,同时将对应列的值也生成保存到所使用的DynamicTable这个组件内置的对象里面,DynamicTable会在下面介绍。完整的流程图如下所示:
![OutSystems如何实现动态列表格展示统计数据? 6 OutSystems如何实现动态列表格展示统计数据?](https://jhrs.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
第三步:使用DynamicTable呈现数据即可
在Forge里面搜索 DynamicTable-Reactive 就可以找到所需要的控件,不过提供的Demo展示的效果如下图所示:
![OutSystems如何实现动态列表格展示统计数据? 7 OutSystems如何实现动态列表格展示统计数据? 5](https://jhrs.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
以下是官方Demo运行起来的效果。
![OutSystems如何实现动态列表格展示统计数据? 8 OutSystems如何实现动态列表格展示统计数据? 6](https://jhrs.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
最终效果,与Demo有点区别,简单修改一下样式,字体即可。
![OutSystems如何实现动态列表格展示统计数据? 9 OutSystems如何实现动态列表格展示统计数据? 7](https://jhrs.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
总结
OutSystems里面实现动态列的要点是先取出数据,然后再用合适的控件展示相应的结果就可以了,为什么需要动态的列来展示呢?那是因为列数不固定,对于数据库查询的行转列,列转行这种需求所获取到的数据,使用动态表格或者其它控件来呈现数据是最佳的选择,这种需求对于有经验的开发人员来说,打印报表经常会出现这种,处理方式原理是一样的。
【江湖人士】(jhrs.com)原创文章,作者:江小编,如若转载,请注明出处:https://jhrs.com/2024/49332.html
扫码加入电报群,让你获得国外网赚一手信息。