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

Question

我是一个slickgrid的新手。我已经学习了几个slickgrid的例子，对基础知识有所了解。但是我遇到了这样一种情况：我需要根据多列进行分组，但是slickgrid只能根据单个列进行分组。

如何在slickgrid中实现多列分组，并且每个分组都可以展开和折叠？

如果有人知道解决方案，请用简单的方式解释，因为我是slickgrid的新手。

我的要求就像这个链接中的行分组一样：slickgrid-grouping-example。 这个例子是基于一列进行分组的，而我的要求是基于多列进行分组。

- Sowmmea

---

我正在尝试进行多级分组。如何使用展开/折叠功能进行多级分组？ - Sowmmea

Answer 1

我知道这个问题已经有一段时间了，但我不久前使这个功能成为可能，并在Github的SlickGrid项目下我的名字下得到了一个拉取请求。你可以尝试一下并给我一些反馈。我修改了3个文件，包括示例文件。此时，我不知道我的提交是否会被接受，所以请自行决定是否尝试，尽管我对我的解决方案非常有信心，因为我已经在工作中使用它。

这是链接：https://github.com/mleibman/SlickGrid/pull/522/files 这是三个多列分组的示例，这段代码来自我也修改过的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);     
}

希望这篇文章能帮到你们，现在它已经具备所有功能了，我真的很喜欢这个网格 =)

- ghiscoding

Answer 2

我想你是在寻找这样的功能吧？

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

上述示例来自ExtJS grid和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"},
  ]}
];

然后修改列生成代码，检查是否存在嵌套的“columns”字段，并使用它来生成列标题？只是一个想法 : )。希望这对您有所帮助。

- Thomas Antony

---

谢谢！我的要求类似于在此链接中分组行 slickgrid-grouping-example。此示例是基于一列进行分组的。我的要求是基于多列进行分组。 - Sowmmea

Answer 3

实际上，Slick Grid 分组并不仅限于一个列。请查看 DataView API 的 groupBy 方法。它具有以下签名:

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

所以你感兴趣的是第一个参数。它可以是代表要按其分组的单个列名的字符串，也可以是函数。TA-DA！
简而言之，以下是如何按多个列进行分组：

  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;
      }
  );

- Pinny

---

他想要列分组而不是行分组。 - idbehold

idbehold，我非常确定他想要根据多列的值对行进行分组。他提供的示例是根据某一列的值对行进行分组，而且据我所知，slickgrid 没有任何类似于“列分组”的功能。列的顺序在定义网格本身时就已经定义好了。 - mmitchell