DevExpress (JS) - dxDataGrid 具有自定义汇总值的分组项目

Question

我有一个具有 4 级分组的 dxDataGrid。我还有 'groupedItems' 的 'summary' 配置，用于对各个字段求和并为每个组创建某种汇总数据。但是，默认情况下，devExpress 会在所有组级别（我不想要）中冒泡这个 SUM，相反，我只想对我的第 4 组和第 3 组使用 'summary' 行为，然后使用自定义逻辑（一个函数或其他东西），我可以在其中计算第二组的汇总值。

我目前在网格上显示第 4 组和第 3 组汇总数据没有问题。但是，我看不到任何可以启用的自定义选项，以便为特定列组（在我的例子中，实践）提供自定义摘要。

我目前正在使用 DevExpress Extreme (JS) v16.1.6。但是，如果这在 Kendo UI 等不同技术中可行，那么知道如何在那里做会很好，因为我计划从 DevExpress 迁移到 Kendo UI 在不久的将来。

我附上了一张截图，这样你们可以更好地想象我的问题。 Example

这是我的 DataGrid JS 代码。

dxDataGrid: {
            dataSource: myDataSource, //AJAX Call
            grouping: { 
                autoExpandAll: false 
            },
            rowAlternationEnabled: true,
            allowColumnResizing: true,
            columnAutoWidth: true, 
            sorting: { mode: 'multiple' },
            searchPanel: { visible: true, width: 240, placeholder: 'Search...' },
            filterRow: { visible: true },
            loadPanel: { enabled: true },
            export: { enabled: true, fileName: 'My Test Report' },
            paging: { enabled: true },
            grouping: {
                autoExpandAll: false
            },
            groupPanel: {
                visible: true,
                allowColumnDragging: false
            },
            pager: {
                showPageSizeSelector: true,
                showNavigationButtons: true,
                showInfo: true
            },
            onCellPrepared: function(e) {

                if (e.rowType === 'group' && e.row.groupIndex <= 1 && e.columnIndex > e.row.groupIndex + 1) {
                   // e.cellElement.text(''); //This is bad, need to Find a solution now
                }
                else if (e.column.dataField === 'TotalPacCostPercentage') {

                    var pacPercentage = parseFloat(e.value) * 100;

                    if (pacPercentage >= 25 && pacPercentage <= 75) {
                        e.cellElement.addClass('medium-risk');
                    }
                    else if (pacPercentage > 75) {
                        e.cellElement.addClass('high-risk');
                    }
                }
            },
            columns: [
                { dataField: 'CountyName', caption: 'County', groupIndex: 0},
                { dataField: 'PracticeNameAndTin', caption: 'Practice', groupIndex: 1 },
                { dataField: 'ProviderDisplayName', caption: 'Provider', groupIndex: 2 },
                { dataField: 'CcsGroupName', caption: 'CCS Group', groupIndex: 3 },
                { dataField: 'CcsName', caption: 'CCS Name', allowGrouping: false },
                { dataField: 'ClaimTypeName', caption: 'Claim Type', allowGrouping: false },
                { dataField: 'PlaceOfServiceName', caption: 'Place of Service', allowGrouping: false },
                { dataField: 'PreTriggerCost', caption: 'Average Pre-Trigger', format: 'currency', allowGrouping: false  },
                { dataField: 'PreTriggerPacCostPercentage', caption: 'Pre-Trigger PAC %', format: 'percent', allowGrouping: false },
                { dataField: 'TriggerCost', caption: 'Average Trigger', format: 'currency', allowGrouping: false },
                { dataField: 'TriggerPacCostPercentage', caption: 'Trigger PAC %', format: 'percent', allowGrouping: false },
                { dataField: 'PostTriggerCost', caption: 'Average Post-Trigger', format: 'currency', allowGrouping: false },
                { dataField: 'PostTriggerPacCostPercentage', caption: 'Post-Trigger PAC %', format: 'percent', allowGrouping: false },
                { dataField: 'TotalCost', caption: 'Average Cost', format: 'currency', allowGrouping: false },
                { dataField: 'TotalPacCostPercentage', caption: 'PAC %', format: 'percent', allowGrouping: false }
            ],
            summary: {
                groupItems: [
                    { column: 'PreTriggerCost', summaryType: 'sum', valueFormat: 'currency', displayFormat: '{0}', alignByColumn: true },
                    { column: 'TriggerCost', summaryType: 'sum', valueFormat: 'currency', displayFormat: '{0}', alignByColumn: true },
                    { column: 'PostTriggerCost', summaryType: 'sum', valueFormat: 'currency', displayFormat: '{0}', alignByColumn: true },
                    { column: 'TotalCost', summaryType: 'sum', valueFormat: 'currency', displayFormat: '{0}', alignByColumn: true },
                ]
            }
        }

Answer 1

你有下面的summary types

"sum" 对列中的所有值求和。
"min" 计算列中的最小值。
"max" 计算列中的最大值。
"avg" 计算列中所有值的平均值。
"count" 计算列中的项目数。
"custom" 允许您使用 calculateCustomSummary 选项指定自定义聚合函数

对于自定义，您可以 create a custom function 如下所示：

$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        totalItems: [
            { summaryType: 'custom', name: 'CustomSummary1' },
            { summaryType: 'custom', name: 'CustomSummary2' }
        ],
        calculateCustomSummary: function (options) {
            // Calculating "CustomSummary1"
            if (options.name == 'CustomSummary1') {
                if (options.summaryProcess == 'start') {
                    // Initializing "totalValue" here
                }
                if (options.summaryProcess == 'calculate') {
                    // Modifying "totalValue" here
                }
                if (options.summaryProcess == 'finalize') {
                    // Assigning the final value to "totalValue" here
                }
            }

            // Calculating "CustomSummary2"
            if (options.name == 'CustomSummary2') {
                // ...
                // Same "if" statements here
            }
        }
    }
});

DevExpress (JS) - dxDataGrid 具有自定义汇总值的分组项目

DevExpress (JS) - dxDataGrid Grouped items with custom summarized values

javascript

devexpress

kendo-ui

kendo-grid

dx-data-grid