Ag-Grid - 如何按 2 列分組，但在同一行上有值

Question

不知道如何准確地用文字解釋這一點，但我認為舉幾個例子就會有道理

在第一個示例中，我僅按一列location分組。 在位置字段中，我在路徑中使用空格，即location: ['Home', ''], (1 個空格), location: ['Home', ' '], (2 個空格) 所以我可以有 2其他列作為主行的“詳細信息”（即在此示例中清潔器類型和清潔器重量）

看起來像這樣..

也許有更好的方法來做到這一點，但如果我只想按一列分組，這將在上面工作。

但是，我實際上想按兩列分組，但只有那些“嵌套”的 2 個詳細信息（子）記錄）

在上面，我也想按房間分組，但沒有房間作為嵌套行。

所以，在上面我有(location=Home, room=room1) ，但我也可能有(location=Home, room=room2) ，即我有room2

例如想要這個...

我已經嘗試了各種各樣的事情，但就是不能把這種觀點（我總是不需要嵌套結束），例如，這是我不想在這里輸入鏈接的描述

有沒有辦法做到這種觀點？

提前致謝！

Answer 1

我從這篇文章中找到了做到這一點的方法。

所以在這個例子中，你可以使用一個完全不同的屬性在網格中根本沒有顯示出來，讓getDataPath來控制分組，然后使用valueGetter將你想要的放在分組列中。

所以我可以有以下......

    var gridOptions = {
        columnDefs: [
            // we're using the auto group column by default!
            { field: 'room',resizable: true, },
            { field: 'cleanertype', resizable: true, },    
            { field: 'cleanerweight',aggFunc: 'sum', resizable: true, },
            { field: 'totalweight', resizable: true, },
        ],
        defaultColDef: {
            flex: 1,
        },

        autoGroupColumnDef: {
            headerName: 'location',
            sortable: true,
            resizable: true,
            filter: 'agTextColumnFilter',
            valueGetter: (params) => {
                return params.node.data.location; // <--- what to show in the group column
            },
            cellRendererParams: {
                suppressCount: true,
            },
        },
        rowData: rowData,
        treeData: true, // enable Tree Data mode
        animateRows: true,
        groupDefaultExpanded: -1, // expand all groups by default
        getDataPath: function (data) {
            return data.grouping;  // <= how to group/nest
        },
    };

和數據...

        var rowData = [
        // Home/room1
        {
            grouping: ['1'],
            location: 'Home',
            room: 'room1',
            cleanertype: '',    
            totalweight: 60
        },
        {
            grouping: ['1', '1'],    
            cleanertype: 'type1',
            cleanerweight:10,
        },
        {
            grouping: ['1', '2'],    
            cleanertype: 'type2',
            cleanerweight:10,
        },
        // Home/room2
        {
            grouping: ['2'],
            location: 'Home',
            room: 'room2',
            cleanertype: '',    
            totalweight: 60
        },
        {
            grouping: ['2', '1'],   
            cleanertype: 'type1',
            cleanerweight:10,
        },
        {
            grouping: ['2', '2'],    
            cleanertype: 'type2',
            cleanerweight:10,
        },

        {
            grouping: ['3'],
            location: 'Work',
            room: 'room1',
            cleanertype: '',
            cleanerweight: 30,
            totalweight: 60
        },
        {
            grouping: ['3', '1'],               
            cleanertype: 'general',
            cleanerweight:10,
        },

        {
            grouping: ['3', '2'],               
            cleanertype: 'heavyduty',
            cleanerweight: 10,
        },          
    ];

所以我使用grouping來控制分組/嵌套，並且工作完美，這正是我所追求的。

可以在此處查看工作示例。