时间戳

首页 > 解决方案 > 如何按 2 列分组，但值在同一行

javascript - 如何按 2 列分组，但值在同一行

问题描述

不知道如何用语言准确地解释这一点，但我认为有几个例子会很有意义

在第一个示例中，我仅按一列location进行分组。在位置字段中，我在路径中使用空格，即location: ['Home', ''],（1 个空格）、location: ['Home', ' '],（2 个空格），因此我可以将 2 个其他列作为主行的“详细信息”（即在此示例中为清洁器类型和清洁器重量）

它看起来像这样：

在此处输入图像描述

也许有更好的方法可以做到这一点，但如果我只想按一列分组，这将在上面起作用。

但是，我实际上想按两列分组，但只有这 2 个详细（子）记录“嵌套”）。

在上面，我也想按房间分组，但没有房间作为嵌套行。

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

例如会这样：

在此处输入图像描述

我已经尝试了各种各样的事情，但就是无法得到这个视图（我总是以不需要的嵌套结束），例如这是我不想要的：

链接

有没有办法做这种观点？

标签： javascriptag-grid

解决方案

我从这篇文章中找到了做到这一点的方法。

所以在这个例子中，你可以使用一个完全不同的属性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用来控制分组/嵌套，并且工作得很好，这正是我所追求的。

可以在这里查看工作示例。

推荐阅读