如何多列分组可以slickgrid做什么?(How multiple column grouping

2019-09-17 11:50发布

我是个新手,slickgrid。 我已经通过slickgrid的几个例子消失了,与基本良好。 我有我需要根据多个列分组,但slickgrid分组基于单个列的情况。

如何multilpe在扩大和对每个组折叠功能slickgrid做列分组?

任何人谁是意识到这种情况的解决方案,请在因为即时通讯新slickgrid一种基本的方法解释。

我的要求是一样的分组行本身在这个环节slickgrid编组,例如 。 这个例子是基于分组的一列。 我的要求是集团基于多列

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"},
  ]}
];

然后修改列生成代码来检查嵌套“列”字段的存在,并用它来产生列标题?

只是一个想法:)。 希望这是一些帮助。



Answer 3:

其实,漂亮的网分组不仅限于一列。
调查数据视图的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;
      }
  );


文章来源: How multiple column grouping can be done in slickgrid?