OutSystems如何实现动态列表格展示统计数据？

本文阅读导航 展开

最近在做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;

第二步：编写Action准备数据源并拼接成JSON

在当前的示例中，我手动为表格手动拼接了第一列的利率和数量信息，如下图所示。

剩下的操作就是从数据库里面取出数据，然后循环生成表格的每列对象即可，同时将对应列的值也生成保存到所使用的DynamicTable这个组件内置的对象里面，DynamicTable会在下面介绍。完整的流程图如下所示：

第三步：使用DynamicTable呈现数据即可

在Forge里面搜索 DynamicTable-Reactive 就可以找到所需要的控件，不过提供的Demo展示的效果如下图所示：

以下是官方Demo运行起来的效果。

最终效果，与Demo有点区别，简单修改一下样式，字体即可。

总结

OutSystems里面实现动态列的要点是先取出数据，然后再用合适的控件展示相应的结果就可以了，为什么需要动态的列来展示呢？那是因为列数不固定，对于数据库查询的行转列，列转行这种需求所获取到的数据，使用动态表格或者其它控件来呈现数据是最佳的选择，这种需求对于有经验的开发人员来说，打印报表经常会出现这种，处理方式原理是一样的。

加入电报群