summaryrefslogtreecommitdiffstats
path: root/examples/example-grouping.html
diff options
context:
space:
mode:
authormleibman <michael.leibman@gmail.com>2011-01-02 01:46:14 -0800
committermleibman <michael.leibman@gmail.com>2011-01-02 01:46:14 -0800
commit189f6a4b47a61f354262d4697046f66a3a3c9ada (patch)
tree3f9465c72941e7cca30580ca9820fee25ca53159 /examples/example-grouping.html
parent29801364543e273d842e6cee04535e8d33a52b3d (diff)
downloadSlickGrid-189f6a4b47a61f354262d4697046f66a3a3c9ada.zip
SlickGrid-189f6a4b47a61f354262d4697046f66a3a3c9ada.tar.gz
SlickGrid-189f6a4b47a61f354262d4697046f66a3a3c9ada.tar.bz2
Added direct totals ref to Group.
Added internal markers (__nonDataRow, __group, __groupTotals) to NonDataRow, Group & GroupTotals for use instead of "instanceof", which is very slow. Brought back DataView.fastSort and sort direction in DataView.sort and rewrote the grouping logic to always sort groups first and then merge in the items in the original order. The downside is that we can no longer group items and have them retain the original order (which I thought was very cool), but the old approach just didn't work with fastSort and, without it, IE<9 was useless beyond 10K items or so because of its deficient sort implementation. There is one upside - group comparer now gets the group instance and not a grouping value, meaning that we can sort groups on things like counts and aggregation results. Median performance is down, but IE (the lowest common denominator) is much faster. Refactored the DataView recalc code for clarity. Other minor changes in DataView.
Diffstat (limited to 'examples/example-grouping.html')
-rw-r--r--examples/example-grouping.html65
1 files changed, 52 insertions, 13 deletions
diff --git a/examples/example-grouping.html b/examples/example-grouping.html
index 545432b..4bc26d3 100644
--- a/examples/example-grouping.html
+++ b/examples/example-grouping.html
@@ -41,8 +41,9 @@
<br/><br/>
<hr/>
<button onclick="clearGrouping()">Clear grouping</button><br/>
- <button onclick="groupByDurationNoSort()">Group by duration & preserve sort order</button><br/>
- <button onclick="groupByDuration()">Group by duration & sort groups</button><br/>
+ <button onclick="groupByDuration()">Group by duration & sort groups by value</button><br/>
+ <button onclick="groupByDurationOrderByCount()">Group by duration & sort groups by count</button><br/>
+ <button onclick="groupByDurationOrderByCountGroupCollapsed()">Group by duration & sort groups by count, group collapsed</button><br/>
<br/>
<button onclick="collapseAllGroups()">Collapse all groups</button><br/>
<button onclick="expandAllGroups()">Expand all groups</button><br/>
@@ -117,7 +118,7 @@
function comparer(a,b) {
var x = a[sortcol], y = b[sortcol];
- return (sortdir) * (x == y ? 0 : (x > y ? 1 : -1));
+ return (x == y ? 0 : (x > y ? 1 : -1));
}
function collapseAllGroups() {
@@ -140,34 +141,50 @@
dataView.groupBy(null);
}
- function groupByDurationNoSort() {
+ function groupByDuration() {
dataView.groupBy(
"duration",
function (g) {
return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
},
- null
+ function (a, b) {
+ return a.value - b.value;
+ }
);
dataView.setAggregators([
new Slick.Data.Aggregators.Avg("percentComplete")
- ], true);
+ ], false);
}
- function groupByDuration() {
+ function groupByDurationOrderByCount() {
dataView.groupBy(
"duration",
function (g) {
return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
},
function (a, b) {
- return a - b;
+ return a.count - b.count;
}
);
dataView.setAggregators([
new Slick.Data.Aggregators.Avg("percentComplete")
- ], true);
+ ], false);
}
+ function groupByDurationOrderByCountGroupCollapsed() {
+ dataView.groupBy(
+ "duration",
+ function (g) {
+ return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
+ },
+ function (a, b) {
+ return a.count - b.count;
+ }
+ );
+ dataView.setAggregators([
+ new Slick.Data.Aggregators.Avg("percentComplete")
+ ], true);
+ }
$(".grid-header .ui-icon")
.addClass("ui-state-default ui-corner-all")
@@ -181,7 +198,7 @@
$(function()
{
// prepare the data
- for (var i=0; i<10000; i++) {
+ for (var i=0; i<50000; i++) {
var d = (data[i] = {});
d["id"] = "id_" + i;
@@ -219,7 +236,29 @@
grid.onSort.subscribe(function(e, args) {
sortdir = args.sortAsc ? 1 : -1;
sortcol = args.sortCol.field;
- dataView.sort(comparer);
+
+ if ($.browser.msie && $.browser.version <= 8) {
+ // using temporary Object.prototype.toString override
+ // more limited and does lexicographic sort only by default, but can be much faster
+
+ var percentCompleteValueFn = function() {
+ var val = this["percentComplete"];
+ if (val < 10)
+ return "00" + val;
+ else if (val < 100)
+ return "0" + val;
+ else
+ return val;
+ };
+
+ // use numeric sort of % and lexicographic for everything else
+ dataView.fastSort((sortcol=="percentComplete")?percentCompleteValueFn:sortcol,args.sortAsc);
+ }
+ else {
+ // using native sort with comparer
+ // preferred method but can be very slow in IE with huge datasets
+ dataView.sort(comparer, args.sortAsc);
+ }
});
// wire up model events to drive the grid
@@ -275,12 +314,12 @@
return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
},
function (a, b) {
- return a - b;
+ return a.value - b.value;
}
);
dataView.setAggregators([
new Slick.Data.Aggregators.Avg("percentComplete")
- ], true);
+ ], false);
dataView.collapseGroup(0);
dataView.endUpdate();