155 lines
4.4 KiB
HTML
155 lines
4.4 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||
|
|
<title>SlickGrid Scrolling Benchmark</title>
|
||
|
|
<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
|
||
|
|
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
|
||
|
|
<link rel="stylesheet" href="../examples/examples.css" type="text/css" media="screen" charset="utf-8" />
|
||
|
|
<style>
|
||
|
|
.cell-title {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cell-effort-driven {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<script src="../lib/firebugx.js"></script>
|
||
|
|
<script src="../lib/jquery-1.7.min.js"></script>
|
||
|
|
<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
|
||
|
|
<script src="../lib/jquery.event.drag-2.2.js"></script>
|
||
|
|
|
||
|
|
<script src="../slick.core.js"></script>
|
||
|
|
<script src="../slick.grid.js"></script>
|
||
|
|
<script src="../slick.formatters.js"></script>
|
||
|
|
|
||
|
|
<button onclick="grid.debug()">Debug info</button>
|
||
|
|
<button onclick="startBench(100)">Run (+= 100px)</button>
|
||
|
|
<button onclick="startBench(300)">Run (+= 300px)</button>
|
||
|
|
<button onclick="startBench(550)">Run (+= 550px; simulate paging)</button>
|
||
|
|
<button onclick="startBench(1000)">Run (+= 1'000px)</button>
|
||
|
|
<button onclick="startBench(5000)">Run (+= 5'000px)</button>
|
||
|
|
<hr/>
|
||
|
|
|
||
|
|
<div id="myGrid" style="width:600px;height:600px;"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var grid;
|
||
|
|
var data = [];
|
||
|
|
var extraColumns = 100;
|
||
|
|
|
||
|
|
function testPostRender(cellNode, row, dataContext, colDef) {
|
||
|
|
cellNode.style.backgroundColor = 'yellow';
|
||
|
|
}
|
||
|
|
|
||
|
|
var columns = [
|
||
|
|
{id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title"},
|
||
|
|
{id:"duration", name:"Duration", field:"duration", selectable:false},
|
||
|
|
{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:Slick.Formatters.PercentCompleteBar},
|
||
|
|
{id:"start", name:"Start", field:"start", minWidth:60},
|
||
|
|
{id:"finish", name:"Finish", field:"finish", minWidth:60},
|
||
|
|
{id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:Slick.Formatters.Checkmark, asyncPostRender:testPostRender}
|
||
|
|
];
|
||
|
|
|
||
|
|
for (var i=0; i<extraColumns; i++) {
|
||
|
|
columns.push({id:"col" + i, name:"col" + i, field:"title"});
|
||
|
|
}
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
editable: false,
|
||
|
|
enableAddRow: false,
|
||
|
|
enableCellNavigation: true,
|
||
|
|
enableAsyncPostRender: true,
|
||
|
|
forceFitColumns: false
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
function generateRandomTask(index) {
|
||
|
|
return {
|
||
|
|
"id": "id_" + index,
|
||
|
|
"title": "Task " + index,
|
||
|
|
"duration": "5 days",
|
||
|
|
"percentComplete": Math.round(Math.random() * 100),
|
||
|
|
"start": "01/01/2014",
|
||
|
|
"finish": "01/05/2014",
|
||
|
|
"effortDriven": (index % 5 == 0)
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
$(function()
|
||
|
|
{
|
||
|
|
data.getLength = function() { return 5000; };
|
||
|
|
|
||
|
|
data.getItem = function(index) {
|
||
|
|
// lazy-generate
|
||
|
|
if (!data[index]) {
|
||
|
|
data[index] = generateRandomTask(index);
|
||
|
|
}
|
||
|
|
return data[index];
|
||
|
|
};
|
||
|
|
|
||
|
|
data.getItemMetadata = function (row) {
|
||
|
|
if (row % 2 === 1) {
|
||
|
|
return {
|
||
|
|
"columns": {
|
||
|
|
"duration": {
|
||
|
|
"colspan": 3
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// initialize the grid
|
||
|
|
grid = new Slick.Grid("#myGrid", data, columns, options);
|
||
|
|
|
||
|
|
$grid = $("#myGrid div.grid-canvas").parent();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
var $grid;
|
||
|
|
var lastScrollTop = 0;
|
||
|
|
var startTime;
|
||
|
|
var scrollAmount = 1000;
|
||
|
|
|
||
|
|
function queue(callback) {
|
||
|
|
var raf = window.requestAnimationFrame ||
|
||
|
|
window.mozRequestAnimationFrame ||
|
||
|
|
window.msRequestAnimationFrame ||
|
||
|
|
window.webkitRequestAnimationFrame;
|
||
|
|
if (raf) {
|
||
|
|
raf(callback);
|
||
|
|
} else {
|
||
|
|
window.setTimeout(callback, 10);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function startBench(scroll) {
|
||
|
|
scrollAmount = scroll;
|
||
|
|
lastScrollTop = 0;
|
||
|
|
$grid.scrollTop(0);
|
||
|
|
|
||
|
|
queue(function(){
|
||
|
|
startTime = new Date();
|
||
|
|
bench();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function bench() {
|
||
|
|
var scrollTop = $grid[0].scrollTop = lastScrollTop + scrollAmount;
|
||
|
|
|
||
|
|
if ($grid[0].scrollTop == lastScrollTop + scrollAmount) {
|
||
|
|
lastScrollTop = scrollTop;
|
||
|
|
queue(bench);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
alert((new Date() - startTime));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|