The first step, in order to get the control running is to include all the required scripts for the grid, and its datasource control. This is demonstrated in the code sample below:
<head>
<meta charset=utf-8 />
<title>JavaScript Grid Virtualization Performance with 1000000 (1 million) data
rows | Shield UI Demos</title>
<link rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/
latest/css/shieldui-all.min.css" />
<link id="gridcss" rel="stylesheet" type="text/css" href="//www.shieldui.com/
shared/components/latest/css/light-mint/all.min.css" />
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/
js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/
js/shieldui-all.min.js"></script>
</head>
The
next step is to include a div element anywhere on the page. This
element will host the grid javascript widget. It may look something like
this:
<body>
<div id="grid"></div>
</body>
The next step
is to configure the datasource for the control. To keep things simple,
we generate dummy data. The setup of the datasource control is
demonstrated in the code sample below
var gridSource = window.ds = new shield.DataSource({
remote: {
operations: ["skip", "take"],
read: function (params, success, error) {
var skip = gridSource.skip || 0,
take = gridSource.take || 20,
data = [],
i, j;
for (i = skip; i < skip + take; i++) {
var item = {};
for (j = 0; j < columns; j++) {
item["col" + j] = "row " + i + " cell " + j;
}
data.push(item);
}
success({
data: data,
total: 1000000
});
}
},
schema: {
data: "data",
total: "total"
}
});
Once we have done this, we are ready to pass this datasource to the grid control. Its declaration looks like this:
$("#grid").shieldGrid({
dataSource: gridSource,
height: 400,
scrolling: {
virtual: true
},
columns: (function () {
var cols = [];
for (var i = 0; i < columns; i++) {
cols.push({
field: "col" + i,
width: 140
});
}
return cols;
})()
});
Thanks to the
optimized virtual scrolling mechanism, the control can bind to such a
large set of data. A complete, working sample is available in the
following location. Feel free to review the code further.
Няма коментари:
Публикуване на коментар