How multiple column grouping can be done in slickg

问题:

Im a newbie to slickgrid. I have gone through few examples of slickgrid and good with basics. I have a scenario where i need grouping based on multiple columns but slickgrid grouping is based on a single column.

How can multilpe column grouping done in slickgrid with expand and collapse functionality on each group?

Anyone who is aware of the solution for this,kindly explain in a basic way since im new to slickgrid.

My requirement is like grouping the rows itself as in this link slickgrid-grouping-example. This example is for grouping based on one column. My requirement is to group based on multiple columns

回答1:

I know the question is getting old but I made this functionality possible not long ago and got a pull request in the queue of SlickGrid projet on Github under my name. You could maybe try it out and give me some feedback. I modified 3 files to do so, including the example file. At this point, I do not know if my commit will be accepted or not, so try it at your own risk, though I'm very confident about my solution as I am already using it at work. Here is the link to it: https://github.com/mleibman/SlickGrid/pull/522/files

Here is an example of 3 multiple columns grouping, this code portion comes from the example-grouping.html file which I modified as well. Defining multiple grouping works with arrays, very similar to previous implementation, just wrap it in arrays when defining multiple grouping.

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

Hope it helps you guys, now it really does have all features, I love this grid =)

回答2:

I suppose you are looking for functionality like this ?

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

The above examples are from ExtJS grid and jQuery.easyUI plugins.

This seems to be something that is not available in SlickGrid at present ( I'm no SlickGrid pro, this is just what I inferred from some Googling ). You will most probably have to code it yourself.

(That is of course, if you don't want to switch to one of the grids mentioned above ;).)

Dig into the source, find the place where it generates the columns and column headers and start working on it. You can check the other grids mentioned above for some guidance on implementing this ( as regards to HTML markup and CSS used ).

You will most probably have to modify the way the 'columns' arrays is defined, to include data on the column grouping headers.

Something like:

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

Then modify the column generation code to check for the existence of a nested 'columns' field and use that to generate the column headers ?

Just an idea :). Hope that was of some help.

回答3:

Actually, slick grid grouping is not restricted to only one column.
Look into DataView API for groupBy method. It has the following signature:

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

So what you are interested in is the first parameter. It can be a String representing a single column name to group by OR it can be a function. TA-DA!
To make a long story short, here is how to group by more than one column:

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