tui-grid
Version:
TOAST UI Grid : Powerful data grid control supported by TOAST UI
91 lines (87 loc) • 2.76 kB
HTML
<html lang="ko">
<head>
<meta charset="utf-8">
<title>9. Using Summary</title>
<link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
<link rel="stylesheet" type="text/css" href="../dist/tui-grid.css" />
</head>
<body>
<div class="description">
You can see the tutorial <a href="https://github.com/nhnent/tui.grid/blob/master/docs/using-summary.md" target="_blank">here</a>.
The "footer" option to use summary feature is deprecated since 2.5.0 version and
this option is replaced by the "summary" option.
</div>
<div class="code-html contents">
<div id="grid"></div>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.js"></script>
<script type="text/javascript" src="../dist/tui-grid.js"></script>
<script type="text/javascript" class="code-js">
var grid = new tui.Grid({
el: $('#grid'),
scrollX: false,
bodyHeight: 300,
rowHeaders: ['rowNum'],
columnOptions: {
width: 100
},
columns: [
{
title: 'User ID',
name: 'c1',
align: 'center',
editOptions: {
type: 'text'
}
},
{
title: 'Score',
name: 'c2',
className: 'clickable',
editOptions: {
type: 'text'
}
},
{
title: 'Item Count',
name: 'c3',
editOptions: {
type: 'text'
}
}
],
summary: {
height: 40,
position: 'bottom', // or 'top'
columnContent: {
c2: {
template: function(valueMap) {
return 'MAX: ' + valueMap.max + '<br>MIN: ' + valueMap.min;
}
},
c3: {
template: function(valueMap) {
return 'TOTAL: ' + valueMap.sum + '<br>AVG: ' + valueMap.avg.toFixed(2);
}
}
}
}
});
var gridData = [];
(function() {
_.times(120, function(number) {
gridData.push({
c1: 'User' + (number + 1),
c2: ((number + 5) % 8) * 100 + number,
c3: ((number + 3) % 7) * 60
});
});
})();
grid.setData(gridData);
</script>
</html>