Jquery 可以用两个列名对剑道网格列进行分组吗？

我使用的是剑道网格，我必须根据定义了聚合的两个列名对列进行分组

例：

columns对象如下所示

 group: {
                field: 'Type',
                aggregates: [
                    { field: "week1", aggregate: "sum" },
                    { field: "week2", aggregate: "sum" },
                    { field: "week3", aggregate: "sum" },
                    { field: "week4", aggregate: "sum" },
                    { field: "week5", aggregate: "sum" },
       ]
}

Eating -> ProjectOne
Decoration -> ProjectTwo

现在我想用'HFB'属性和

 group: {
                field: 'Type',
                aggregates: [
                    { field: "week1", aggregate: "sum" },
                    { field: "week2", aggregate: "sum" },
                    { field: "week3", aggregate: "sum" },
                    { field: "week4", aggregate: "sum" },
                    { field: "week5", aggregate: "sum" },
       ]
}

Eating -> ProjectOne
Decoration -> ProjectTwo

---

我尝试将columns数组更改为object，并将数组中的值更改为object，但无效，因为聚合是一个数组。

您必须为每个分组变量指定聚合数组（并将分组从object更改为array，以指定两列的组嵌套）然后在

groupFooterTemplate

中渲染它们。当有多个分组列时，网格显示两个相邻的页脚行（第二行重复第一行）会产生副作用。第二行可以使用相邻的CSS选择器

tr.k-group-footer+tr.k-group-footer{display:none}

隐藏

网格示例（图像）：

示例代码（）：

我将周数据值从包含数字的字符串更改为仅包含数字

  <div id="grid"></div>
  <style>
    tr.k-group-footer + tr.k-group-footer { display: none }
  </style>
  <script>
    data = [
{
            'Name': "Test",
            'Type': 'ProjectOne',
            'HFB': 'Eating',
            'week1': 10,
            'week2': 20,
            'week3': 30,
            'week4': 40,
            'week5': 50,
},
{
            'Name': "Test",
            'Type': 'ProjectOne',
            'HFB': 'Eating',
            'week1': 10,
            'week2': 11,
            'week3': 12,
            'week4': 13,
            'week5': 14,
},
{
            'Name': "Test",
            'Type': 'ProjectTwo',
            'HFB': 'Decoration',
            'week1': 21,
            'week2': 22,
            'week3': 23,
            'week4': 24,
            'week5': 25,
},
{
            'Name': "Test",
            'Type': 'ProjectTwo',
            'HFB': 'Decoration',
            'week1': 10,
            'week2': 10,
            'week3': 10,
            'week4': 10,
            'week5': 10,
}    
];

// https://stackoverflow.com/questions/62930100/
//   is-it-possible-to-group-kendo-grid-columns-with-two-column-names
    
    
    $(document).ready(function() {
      $("#grid").kendoGrid({  
        dataSource: {
          data: data,
          group: [
                        { field: "HFB",
                aggregates: [
                { field: "week1", aggregate: "sum" },
                { field: "week2", aggregate: "sum" },
                { field: "week3", aggregate: "sum" },
                { field: "week4", aggregate: "sum" },
                { field: "week5", aggregate: "sum" }
                    ]
            }, 
                        { field: "Type",
                aggregates: [
                { field: "week1", aggregate: "sum" },
                { field: "week2", aggregate: "sum" },
                { field: "week3", aggregate: "sum" },
                { field: "week4", aggregate: "sum" },
                { field: "week5", aggregate: "sum" }
                    ]
            }
          ],
        },
        columns: [
          { field: 'Name', width: '5em' },
/*        'Type', */
/*              'HFB', */
          {field: 'week1', groupFooterTemplate: "#=sum#", width: "4em" },
          {field: 'week2', groupFooterTemplate: "#=sum#", width: "4em" },
          {field: 'week3', groupFooterTemplate: "#=sum#", width: "4em" },
          {field: 'week4', groupFooterTemplate: "#=sum#", width: "4em" },
          {field: 'week5', groupFooterTemplate: "#=sum#", width: "4em" },
          {field: 'sizebalance', title: ' ' }
        ],
        height: 750,
        scrollable: true,
        sortable: true,
        groupable: true,
      });
    });    
  </script>

tr.k-group-footer+tr.k-group-footer{display:none}
数据=[
{
'名称'：“测试”，
“类型”：“项目一”，
‘HFB’：‘吃’，
“1周”：10，
“周2”：20，
“第三周”：30岁，
“第四周”：40岁，
“第五周”：50，
},
{
'名称'：“测试”，
“类型”：“项目一”，
‘HFB’：‘吃’，
“1周”：10，
“week2”：11，
“第三周”：12，
“第4周”：13，
“第5周”：14，
},
{
'名称'：“测试”，
'Type'：'ProjectTwo'，
“HFB”：“装饰”，
“第一周”：21，
“week2”：22岁，
“第三周”：23，
“第4周”：24，
“第5周”：25，
},
{
'名称'：“测试”，
'Type'：'ProjectTwo'，
“HFB”：“装饰”，
“1周”：10，
“周2”：10，
“第三周”：10，
“第4周”：10，
“第5周”：10，
}    
];
// https://stackoverflow.com/questions/62930100/
//可以用两个列名对剑道网格列进行分组吗
$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid（{
数据源：{
数据：数据，
组：[
{字段：“HFB”，
骨料：[
{字段：“week1”，聚合：“sum”}，
{字段：“week2”，聚合：“sum”}，
{字段：“week3”，聚合：“sum”}，
{字段：“week4”，聚合：“sum”}，
{字段：“week5”，聚合：“sum”}
]
}, 
{字段：“类型”，
骨料：[
{字段：“week1”，聚合：“sum”}，
{字段：“week2”，聚合：“sum”}，
{字段：“week3”，聚合：“sum”}，
{字段：“week4”，聚合：“sum”}，
{字段：“week5”，聚合：“sum”}
]
}
],
},
栏目：[
{字段：'Name'，宽度：'5em'}，
/*“类型”*/
/*“HFB”*/
{字段：'week1'，groupFooterTemplate:“#=sum#”，宽度：“4em”}，
{字段：'week2'，groupFooterTemplate:“#=sum#”，宽度：“4em”}，
{字段：'week3'，groupFooterTemplate:“#=sum#”，宽度：“4em”}，
{字段：'week4'，groupFooterTemplate:“#=sum#”，宽度：“4em”}，
{字段：'week5'，groupFooterTemplate:“#=sum#”，宽度：“4em”}，
{字段：'sizebalance'，标题：'}
],
身高：750，
可滚动：对，
可排序：是的，
分组：对，
});
});    

如果CSS不用于隐藏额外的页脚行，则页脚行的图像。

---

您可以使用

column.groupHeaderColumnTemplate

在每个分组层上进行适当的聚合

示例（）：

这个例子使用了一些技巧

• 包含序列号的隐藏范围
• 隐藏添加到网格的列，以便设置

  标题

  和

  组标题模板

以获取数据顺序中的月份组。默认情况下，网格将按升序对组进行排序

  <style>
  .hidden {display:none}
  </style>
  <div id="grid"></div>
  <script>
    data = [
      { region: 'A', month: 'Jan', week: 1, sales:  10 },
      { region: 'A', month: 'Jan', week: 2, sales:  10 },
      { region: 'A', month: 'Jan', week: 3, sales:  10 },
      { region: 'A', month: 'Jan', week: 4, sales:  10 },
      { region: 'A', month: 'Feb', week: 1, sales:  10 },
      { region: 'A', month: 'Feb', week: 2, sales:  20 },
      { region: 'A', month: 'Feb', week: 3, sales:  30 },
      { region: 'A', month: 'Feb', week: 4, sales:  40 },
      { region: 'A', month: 'Mar', week: 1, sales:  10 },
      { region: 'A', month: 'Mar', week: 2, sales:  50 },
      { region: 'A', month: 'Mar', week: 3, sales:  60 },
      { region: 'A', month: 'Mar', week: 4, sales:  60 },
      { region: 'B', month: 'Jan', week: 1, sales:  10 },
      { region: 'B', month: 'Jan', week: 2, sales:  20 },
      { region: 'B', month: 'Jan', week: 3, sales:  30 },
      { region: 'B', month: 'Jan', week: 4, sales:  40 },
      { region: 'B', month: 'Feb', week: 1, sales:  10 },
      { region: 'B', month: 'Feb', week: 2, sales:  60 },
      { region: 'B', month: 'Feb', week: 3, sales:  70 },
      { region: 'B', month: 'Feb', week: 4, sales:  80 },
      { region: 'B', month: 'Mar', week: 1, sales:  10 },
      { region: 'B', month: 'Mar', week: 2, sales: 100 },
      { region: 'B', month: 'Mar', week: 3, sales: 110 },
      { region: 'B', month: 'Mar', week: 4, sales: 120 },
     ];
    
     function z7(n) {
       return ("0000000" + n).slice(-7);
     }
    
     var month = 'zzz', ix = 0;
    
     for (var index = 0; index<data.length; index++) {
       var item = data[index];
       if (item.month != month) {
         month = item.month;
         ix++;
       }
       item.monthgroup = "<span class=hidden>" + z7(ix) + "</span>" + month;
     }
    
     $("#grid").kendoGrid({  
        dataSource: {
          data: data,
          group: [
                        { field: "region", aggregates: [ {field:"sales", aggregate:"sum" }] },
                        { field: "monthgroup",  aggregates: [ {field:"sales", aggregate:"sum" }] },
          ],
          sort: { field: 'mon' }
        },
        columns: [
          { field: 'monthgroup', title: 'month', groupHeaderTemplate: "#=value#" },
          { field: 'week', width: '5em' },
          { field: 'sales', width: '6em', groupHeaderColumnTemplate: "#=sum#" },
          { field: 'sizebalance', title: ' ' }
        ],
        height: 750,
        scrollable: true,
        groupable: true,
      });  
    
      var grid = $("#grid").data("kendoGrid");
            grid.hideColumn(0);
  </script>

.hidden{显示：无}
数据=[
{地区：'A'，月份：'1'，周：1，销售额：10}，
{地区：'A'，月份：'1'，周：2，销售额：10}，
{地区：'A'，月份：'1'，周：3，销售额：10}，
{地区：'A'，月份：'1'，周：4，销售额：10}，
{地区：'A'，月份：'2'，周：1，销售额：10}，
{地区：'A'，月份：'2'，周：2，销售额：20}，
{地区：'A'，月份：'2'，周：3，销售额：30}，
{地区：'A'，月份：'2'，周：4，销售额：40}，
{地区：'A'，月份：'3'，周：1，销售额：10}，
{地区：'A'，月份：'3'，周：2，销售额：50}，
{地区：'A'，月份：'3'，周：3，销售额：60}，
{地区：'A'，月份：'3'，周：4，销售额：60}，
{地区：'B'，月份：'1'，周：1，销售额：10}，
{地区：'B'，月份：'1'，周：2，销售额：20}，
{地区：'B'，月份：'1'，周：3，销售额：30}，
{地区：'B'，月份：'1'，周：4，销售额：40}，
{地区：'B'，月份：'2'，周：1，销售额：10}，
{地区：'B'，月份：'2'，周：2，销售额：60}，
{地区：'B'，月份：'2'，周：3，销售额：70}，
{地区：'B'，月份：'2'，周：4，销售额：80}，
{地区：'B'，月份：'3'，周：1，销售额：10}，
{地区：'B'，月份：'3'，周：2，销售额：100}，
{地区：'B'，月份：'3'，周：3，销售额：110}，
{地区：'B'，月份：'3'，周：4，销售额：120}，
];
函数z7（n）{
返回（“0000000”+n）.slice（-7）；
}
变量月份='zzz'，ix=0；
对于（var指数=0；indexYeah）