如何在slickgrid中进行多列分组？

Question

我是slickgrid的新手。我已经看过一些关于slickgrid的例子，并且很好地掌握了基础知识。我有一个场景，我需要基于多个列进行分组，但是slickgrid分组是基于单个列的。

如何在slickgrid中进行多列分组，并在每个组上具有展开和折叠功能？

任何知道解决方案的人，请以基本的方式解释，因为我是slickgrid的新手。

我的需求类似于对行本身进行分组，就像在这个链接slickgrid-grouping-example中一样。此示例用于基于一列的分组。我的要求是基于多列进行分组

Answer 1

我知道这个问题已经过时了，但不久前我实现了这个功能，并在Github上的SlickGrid项目队列中收到了一个拉取请求。你也许可以尝试一下，然后给我一些反馈。为此，我修改了3个文件，包括示例文件。在这一点上，我不知道我的提交是否会被接受，所以尝试它的风险自负，尽管我对我的解决方案非常有信心，因为我已经在工作中使用它。这是它的链接：https://github.com/mleibman/SlickGrid/pull/522/files

这是一个3个多列分组的例子，这部分代码来自我修改过的example-grouping.html文件。定义多个分组与数组一起工作，与前面的实现非常相似，只是在定义多个分组时将其包装在数组中。

function groupByDurationPercentageStart() {
  dataView.groupBy(
    ["duration", "percentComplete", "start"],
    [
      (function (g) {
        return "Duration:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
      }),
      (function (g) {
        return "Complete:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
      }),
      (function (g) {
        return "Start Date:  " + g.value + "  <span style='color:green'>(" + g.count + " items)</span>";
      })
    ],
    [
      function (a, b) {
        return a.value - b.value;
      },
      function (a, b) {
        return a.value - b.value;
      },
      function (a, b) { // string sorting
        var x = a.value, y = b.value;
        return x == y ? 0 : (x > y ? 1 : -1);
      }
    ]
  ); 
  dataView.setAggregators([
    new Slick.Data.Aggregators.Avg("percentComplete"),
    new Slick.Data.Aggregators.Sum("cost")
  ], true, false);     
}

希望它能帮助你们，现在它真的有了所有的功能，我喜欢这个网格=)

Answer 2

我想你正在寻找像这样的功能？

http://bit.ly/JTlf0z或http://bit.ly/KuncBU

上面的例子来自ExtJS网格和jQuery.easyUI插件。

这似乎是目前在SlickGrid中不可用的东西(我不是SlickGrid专家，这只是我从谷歌中推断出来的)。您很可能需要自己编写代码。

(当然，如果您不想切换到上面提到的网格之一；)。

深入研究源代码，找到它生成列和列标题的位置，然后开始处理它。您可以查看上面提到的其他网格，以获得实现此功能的一些指导(关于所使用的HTML标记和CSS )。

您很可能需要修改“列”数组的定义方式，以便在列分组标题中包含数据。

类似于：

var columns = [
  {title:'Group 1', columns:[
    {id: "field1", name: "Field 1", field: "field1"},
    {id: "field2", name: "Field 2", field: "field2"},
  ]},
  {id: "field3", name: "Field 3", field: "field3"},
  {title:'Group 2', columns:[
    {id: "field4", name: "Field 4", field: "field4"},
    {id: "field5", name: "Field 5", field: "field5"},
    {id: "field6", name: "Field 6", field: "field6"},
  ]}
];

然后修改列生成代码，以检查嵌套的“column”字段是否存在，并使用该字段生成列标题？

这只是一个想法:)。希望这能帮上忙。

Answer 3

实际上，精巧的网格分组并不仅限于一列。

查看用于groupBy方法的DataView API。它有以下签名：

function groupBy(valueGetter, valueFormatter, sortComparer){...}

所以你感兴趣的是第一个参数。它可以是表示要分组的单个列名的字符串，也可以是一个函数。太棒了！

长话短说，下面是如何按多个列进行分组：

  dataView.groupBy(
      //Grouping value
      function (row) {
          return row["groupColumn1"]+":"+row["groupColumn2"]+":"+row["groupColumn3"];
      },
      //Group display
      function (group) {
       var values = g.value.split(":", 3); //3 is number of grouping columns*
       return "Col1: "+values[0]+", Col2: "+values[1]+", Col3:" + values[2];
      },
      //Group comparator/sorting
      function (a, b) {
          return a.value - b.value;
      }
  );