1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<!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>
|
