3

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

4

3 に答える 3

4

質問が古くなっていることは知っていますが、この機能を少し前に可能にし、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);     
}

皆さんのお役に立てば幸いです。今では本当にすべての機能を備えています。このグリッドが大好きです =)

于 2013-02-15T16:02:22.377 に答える
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"},
  ]}
];

次に、列生成コードを変更して、ネストされた「列」フィールドの存在を確認し、それを使用して列ヘッダーを生成しますか?

ただのアイデア:)。それが助けになったことを願っています。

于 2012-06-05T17:37:58.057 に答える
2

実際、洗練されたグリッドのグループ化は 1 つの列だけに制限されていません。
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;
      }
  );
于 2012-10-17T23:12:25.403 に答える