tui-grid
Version:
TOAST UI Grid : Powerful data grid control supported by TOAST UI
82 lines (76 loc) • 2.84 kB
HTML
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2. Formatter</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">
Each "Cover Image", "Name", "Artist", "Release" column's data is changed by "formatter".
</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'),
scrollX: false,
scrollY: false,
columns: [
{
title: 'Cover Image',
name: 'id',
align: 'center',
formatter: function(value) {
var albumId = value.toString();
var imageId = albumId.substring(0, albumId.length - 2);
var url = 'http://image.bugsm.co.kr/album/images/200/' + imageId + '/' + albumId + '.jpg'
return '<img src="' + url + '" width="40" height="40" />';
}
},
{
title: 'Name',
name: 'name',
formatter: function(value, rowData) {
var albumId = rowData.id;
var url = 'http://music.bugs.co.kr/album/' + albumId;
return '<a href="' + url + '" target="_blank">' + value + '</a>';
}
},
{
title: 'Artist',
name: 'artist',
formatter: function(value) {
var url = 'http://search.bugs.co.kr/artist?q=' + value;
return '<a href="' + url + '" target="_blank">' + value + '</a>';
}
},
{
title: 'Type',
name: 'type'
},
{
title: 'Release',
name: 'release',
formatter: function(value) {
return value.replace(/\./g, '-');
}
},
{
title: 'Genre',
name: 'genre'
}
]
});
grid.setData(gridData);
</script>
</html>