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);
});