如何在slickgrid中完成多列分組？

Question

我是一個新手來滑溜溜的。我已經經歷了幾個slickgrid的例子，並與基礎知識。我有一個場景，我需要基於多列進行分組，但slickgrid分組基於單列。

如何在slickgrid中使用每個組的展開和摺疊功能完成多列列分組？

任何人都知道這個解決方案，請以基本的方式解釋，因爲我是新來的slickgrid。

我的要求就像在這個鏈接slickgrid-grouping-example中分組行。這個例子是基於一列進行分組的。我的要求是基於多列組

Answer 1

我想你正在尋找這樣的功能嗎？

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

上述例子從ExtJS的網格和jQuery.easyUI插件。

這似乎是目前在SlickGrid中不可用的東西（我不是SlickGrid專業版，這正是我從某些Google搜索推斷出的）。你很可能必須自己編寫代碼。

（那是當然的，如果你不想要切換到上面提到的電網之一）。）

深入到源，找到它生成的列和列標題的地方，開始工作吧。你可以檢查上面提到的其他網格，以獲得關於實現這個的一些指導（關於使用的HTML標記和CSS）。

您很可能必須修改'columns'數組的定義方式，以在列分組標題中包含數據。

是這樣的：

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 2

實際上，光滑的網格分組不僅限於一列。
查看用於groupBy方法的DataView API。它具有以下特徵：

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

所以你有興趣在什麼是第一個參數。它可以是一個表示單個列名稱的字符串，通過OR進行分組它可以是一個函數。 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; 
     } 
); 

Answer 3

我知道這個問題是年紀大了，但我做了這個功能可能不是不久前得到了在拉入請求在我的名下Github上的SlickGrid projet隊列。你可以嘗試一下並給我一些反饋。我修改了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);  
} 

希望它可以幫助你們，現在它確實具有全部功能，我愛這網=）