DevExpress（JS）-帶有自定義匯總值的dxDataGrid分組項目

Question

我有一個帶有4個分組級別的dxDataGrid。 我還為“ groupedItems”配置了“摘要”配置，以求和各個字段，並為每個組創建某種摘要數據。 但是，默認情況下，devExpress會在所有組級別中增加該SUM（這是我不希望的），相反，我只想對第4和第3組使用“摘要”行為，然后使用自定義邏輯（函數等），我可以在其中計算第二組的匯總值。

我目前有第4組和第3組的匯總數據，可以毫無問題地顯示在網格上。 但是，我看不到可以啟用的任何自定義選項，以便為特定的列組（在我的情況下為“練習”）具有自定義的“摘要”。

我目前正在使用DevExpress Extreme（JS）v16.1.6。 但是，如果這在Kendo UI等其他技術中可行，那么很高興知道在那里如何做，因為我計划在不久的將來從DevExpress遷移到Kendo UI。

我已經附上了屏幕截圖，以便你們可以更好地可視化我的問題。 例

這是我的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

您有以下摘要類型

• “ sum ”匯總一列中的所有值。
• “ min ”計算列中的最小值。
• “ max ”計算列中的最大值。
• “ avg ”計算列中所有值的平均值。
• “ count ”計算一列中的項目數。
• “ custom ”允許您使用calculateCustomSummary選項指定自定義聚合函數

對於自定義，您可以創建一個自定義函數 ，如下所示：

$("#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
            }
        }
    }
});