tui-grid
Version:
TOAST UI Grid : Powerful data grid control supported by TOAST UI
109 lines (104 loc) • 3.99 kB
HTML
<html lang="ko">
<head>
<meta charset="utf-8">
<title>11. Customizing Row headers</title>
<link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
<link rel="stylesheet" type="text/css" href="../dist/tui-grid.css" />
<link rel="stylesheet" type="text/css" href="./css/checkbox.css" />
</head>
<body>
<div class="description">
Use the 'template' option to customize the checkbox in the row header content.<br>
The CSS handling used in this example works only in modern browsers.<br>
In order to support IE8 or later, applying a background image on the customized checkbox.
</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" src="./data/basic-dummy.js"></script>
<script type="text/javascript" class="code-js">
var grid = new tui.Grid({
el: $('#grid'),
data: gridData,
scrollX: false,
scrollY: false,
rowHeight: 40,
header: {
height: 40
},
rowHeaders: [
{
type: 'checkbox',
/**
* Customizing when the type of row header is 'checkbox' or 'radio'
* @param {object} props
* @param {string} props.className - Selector to fire the custom event
* @param {string} props.type - Type of the original element
* @param {number} props.name - Name of the original element
* @param {boolean} props.disabled - Disabled state of the original element
* @param {boolean} props.checked - Checked state of the original element
*/
template: function(props) {
tmpl = '<div class="Checkbox_checkbox">';
tmpl += '<label>';
tmpl += '<input class="Checkbox_input <%=className%>" type="checkbox" name="<%=name%>" ';
tmpl += '<%= disabled ? "disabled" : "" %> ';
tmpl += '<%= checked ? "checked" : "" %> />';
tmpl += '<div class="Checkbox_indicator"></div>';
tmpl += '</label>';
tmpl += '</div>';
return _.template(tmpl)(props); // underscore template function
}
},
{
type: 'rowNum',
title: 'No.',
/**
* Customizing when row header type is 'rowNum'
* @param {object} props
* @param {string} props.content - Original data
*/
template: function(props) {
tmpl = '<span>No.<%=content%></span>';
return _.template(tmpl)(props); // underscore template function
}
}
],
columns: [
{
title: 'Name',
name: 'name'
},
{
title: 'Artist',
name: 'artist'
},
{
title: 'Type',
name: 'type'
},
{
title: 'Release',
name: 'release'
},
{
title: 'Genre',
name: 'genre'
}
]
});
grid.on('check', function(ev) {
console.log('check', ev);
});
grid.on('uncheck', function(ev) {
console.log('uncheck', ev);
});
</script>
</html>