站点图标 江湖人士

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

dynamic data

dynamic data

最近在做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如何实现动态列表格展示统计数据? 1OutSystems如何实现动态列表格展示统计数据? 1

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

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

OutSystems如何实现动态列表格展示统计数据? 2OutSystems如何实现动态列表格展示统计数据? 2
dynamic datadynamic data

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

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

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

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

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

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

总结

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

退出移动版