tui-grid
Version:
TOAST UI Grid : Powerful data grid control supported by TOAST UI
135 lines (131 loc) • 3.68 kB
HTML
<html lang="ko">
<head>
<meta charset="utf-8">
<title>6. Using _extraData</title>
<link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
<link rel="stylesheet" type="text/css" href="../dist/tui-grid.css" />
<style type="text/css">
.red.tui-grid-cell{background-color: #f8e0e0;}
.blue.tui-grid-cell{background-color: #cef6f5;}
</style>
</head>
<body>
<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,
scrollY: false,
rowHeaders: ['checkbox'],
columns: [
{
title: 'Name',
name: 'name'
},
{
title: 'Artist',
name: 'artist'
},
{
title: 'Type',
name: 'type'
},
{
title: 'Release',
name: 'release'
},
{
title: 'Genre',
name: 'genre'
}
]
});
var gridData = [
{
name: 'Beautiful Lies',
artist: 'Birdy',
release: '2016.03.26',
type: 'Deluxe',
genre: 'Pop'
},
{
name: 'X',
artist: 'Ed Sheeran',
release: '2014.06.24',
type: 'Deluxe',
genre: 'Pop',
_extraData: {
rowState: 'DISABLED' // A current row is disabled
}
},
{
name: 'Moves Like Jagger',
release: '2011.08.08',
artist: 'Maroon5',
type: 'Single',
genre: 'Pop,Rock',
_extraData: {
rowState: 'DISABLED_CHECK' // A checkbox is disabled only
}
},
{
name: 'A Head Full Of Dreams',
artist: 'Coldplay',
release: '2015.12.04',
type: 'Deluxe',
genre: 'Rock',
_extraData: {
rowState: 'CHECKED', // A checkbox is already checked while rendering
className: { // Add class name on a row
row: ['red']
}
}
},
{
name: '19',
artist: 'Adele',
release: '2008.01.27',
type: 'EP',
genre: 'Pop,R&B',
_extraData: {
rowSpan: { // Merge rows
artist: 3,
genre: 2
}
}
},
{
name: '21',
artist: 'Adele',
release: '2011.01.21',
type: 'Deluxe',
genre: 'Pop,R&B'
},
{
name: '25',
artist: 'Adele',
release: '2015.11.20',
type: 'EP',
genre: 'Pop',
_extraData: {
className: { // Add class name on each columns
column: {
type: ['blue'],
genre: ['blue']
}
}
}
}
];
grid.setData(gridData);
</script>
</html>