<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>SlickGrid Model Benchmark</title> </head> <body> <script src="../lib/jquery-1.7.min.js"></script> <script src="../slick.core.js"></script> <script src="../slick.dataview.js"></script> <script src="../slick.groupitemmetadataprovider.js"></script> <script> function filter(item, args) { // simulate a more expensive filer var matches = 0; if (item.title.indexOf("ask") != -1) matches++; for (var j = 0; j < 5; j++) matches += Math.random(); if (item.percentComplete >= args) { return true; } return false; } var data = []; for (var i = 0; i < 300000; i++) { var d = (data[i] = {}); d["id"] = i; d["title"] = "Task " + i; d["percentComplete"] = i % 100; d["duration"] = Math.round(Math.random() * 14); } var dv = new Slick.Data.DataView({inlineFilters: true}); dv.beginUpdate(); dv.setItems(data); dv.setFilter(filter); dv.setFilterArgs(0); //dv.setPagingOptions({pageSize:25}); dv.setGrouping([ { getter: "duration", formatter: function (g) { return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>"; }, aggregators: [ new Slick.Data.Aggregators.Avg("percentComplete"), new Slick.Data.Aggregators.Sum("cost") ], aggregateCollapsed: true, aggregateChildGroups: true }, { getter: "effortDriven", formatter: function (g) { return "Effort-Driven: " + (g.value ? "True" : "False") + " <span style='color:green'>(" + g.count + " items)</span>"; }, aggregators: [ new Slick.Data.Aggregators.Avg("percentComplete"), new Slick.Data.Aggregators.Sum("cost") ], aggregateCollapsed: false } ]); dv.endUpdate(); console.time("total"); console.time("narrow"); for (var i = 0; i <= 100; i += 5) { dv.setFilterArgs(i); dv.setRefreshHints({ ignoreDiffsBefore:200, ignoreDiffsAfter:300, isFilterNarrowing:true }); dv.refresh(); //console.log(dv.getLength()); } console.timeEnd("narrow"); console.time("expand"); for (var i = 100; i > 0; i -= 5) { dv.setFilterArgs(i); dv.setRefreshHints({ ignoreDiffsBefore:200, ignoreDiffsAfter:300, isFilterExpanding:true }); dv.refresh(); //console.log(dv.getLength()); } console.timeEnd("expand"); console.timeEnd("total"); </script> </body> </html>