135 lines
3.3 KiB
HTML
135 lines
3.3 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
|
||
|
|
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
|
||
|
|
<link rel="stylesheet" href="examples.css" type="text/css"/>
|
||
|
|
<style>
|
||
|
|
.totals {
|
||
|
|
font-weight: bold;
|
||
|
|
color: gray;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div style="position:relative">
|
||
|
|
<div style="width:600px;">
|
||
|
|
<div id="myGrid" style="width:100%;height:500px;"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="options-panel">
|
||
|
|
<h2>Demonstrates:</h2>
|
||
|
|
<ul>
|
||
|
|
<li>Implementing a data provider to create a totals row at the end of the grid.</li>
|
||
|
|
<li>This is a simplification of what the DataView does. </li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<h2>View Source:</h2>
|
||
|
|
<ul>
|
||
|
|
<li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-totals-via-data-provider.html" target="_sourcewindow"> View the source for this example on Github</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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.editors.js"></script>
|
||
|
|
<script src="../slick.grid.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var grid;
|
||
|
|
var data = [];
|
||
|
|
var options = {
|
||
|
|
enableCellNavigation: true,
|
||
|
|
headerRowHeight: 30,
|
||
|
|
editable: true
|
||
|
|
};
|
||
|
|
|
||
|
|
var columns = [];
|
||
|
|
for (var i = 0; i < 10; i++) {
|
||
|
|
columns.push({
|
||
|
|
id: i,
|
||
|
|
name: String.fromCharCode("A".charCodeAt(0) + i),
|
||
|
|
field: i,
|
||
|
|
width: 60,
|
||
|
|
editor: Slick.Editors.Integer
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function TotalsDataProvider(data, columns) {
|
||
|
|
var totals = {};
|
||
|
|
var totalsMetadata = {
|
||
|
|
// Style the totals row differently.
|
||
|
|
cssClasses: "totals",
|
||
|
|
columns: {}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Make the totals not editable.
|
||
|
|
for (var i = 0; i < columns.length; i++) {
|
||
|
|
totalsMetadata.columns[i] = { editor: null };
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
this.getLength = function() {
|
||
|
|
return data.length + 1;
|
||
|
|
};
|
||
|
|
|
||
|
|
this.getItem = function(index) {
|
||
|
|
return (index < data.length) ? data[index] : totals;
|
||
|
|
};
|
||
|
|
|
||
|
|
this.updateTotals = function() {
|
||
|
|
var columnIdx = columns.length;
|
||
|
|
while (columnIdx--) {
|
||
|
|
var columnId = columns[columnIdx].id;
|
||
|
|
var total = 0;
|
||
|
|
var i = data.length;
|
||
|
|
while (i--) {
|
||
|
|
total += (parseInt(data[i][columnId], 10) || 0);
|
||
|
|
}
|
||
|
|
totals[columnId] = "Sum: " + total;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
this.getItemMetadata = function(index) {
|
||
|
|
return (index != data.length) ? null : totalsMetadata;
|
||
|
|
};
|
||
|
|
|
||
|
|
this.updateTotals();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
for (var i = 0; i < 10; i++) {
|
||
|
|
var d = (data[i] = {});
|
||
|
|
d["id"] = i;
|
||
|
|
for (var j = 0; j < columns.length; j++) {
|
||
|
|
d[j] = Math.round(Math.random() * 10);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var dataProvider = new TotalsDataProvider(data, columns);
|
||
|
|
|
||
|
|
grid = new Slick.Grid("#myGrid", dataProvider, columns, options);
|
||
|
|
|
||
|
|
grid.onCellChange.subscribe(function(e, args) {
|
||
|
|
// The data has changed - recalculate the totals.
|
||
|
|
dataProvider.updateTotals();
|
||
|
|
|
||
|
|
// Rerender the totals row (last row).
|
||
|
|
grid.invalidateRow(dataProvider.getLength() - 1);
|
||
|
|
grid.render();
|
||
|
|
});
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|