tui-grid
Version:
TOAST UI Grid : Powerful data grid control supported by TOAST UI
139 lines (127 loc) • 3.4 kB
HTML
<html lang="ko">
<head>
<meta charset="utf-8">
<title>그리드 기본 예제</title>
<link rel="stylesheet" type="text/css" href="../dist/grid.css" />
<link rel="stylesheet" type="text/css" href="../lib/tui-pagination/dist/tui-pagination.css" />
</head>
<body>
<div id="wrapper">
<div id="grid"></div>
</div>
<button id="btn-load">serach</button>
</body>
<script src="../lib/jquery/jquery.js"></script>
<script src="../lib/underscore/underscore.js"></script>
<script src="../lib/backbone/backbone.js"></script>
<script src="../lib/tui-code-snippet/code-snippet.js"></script>
<script src="../lib/tui-pagination/dist/tui-pagination.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="../dist/grid.js"></script>
<script type="text/javascript">
var rowList = [];
(function() {
_.times(500, function(number) {
rowList.push({
c1: 'test',
c2: 'test',
c3: 'test',
c4: 'test',
c5: 'test',
c6: 'test',
c7: 'test',
c8: 'test',
c9: 'test',
c10: 'test'
});
})
})();
$.mockjax({
url: 'api/readData',
responseTime: 0,
response: function(settings) {
var page = settings.data.page;
var perPage = settings.data.perPage;
var start = (page - 1) * perPage;
var end = start + perPage;
this.responseText = JSON.stringify({
result: true,
data: {
contents: rowList,
pagination: {
page: page,
totalCount: 20
}
}
});
}
});
</script>
<script>
var grid = new tui.Grid({
el: $('#grid'),
scrollX: false,
scrollY: true,
bodyHeight: 500,
virtualScrolling: true,
rowHeight: 27,
heightResizable: true,
columns: [
{
name: 'c1',
title: 'c1'
},
{
name: 'c2',
title: 'c2'
},
{
name: 'c3',
title: 'c3'
},
{
name: 'c4',
title: 'c4'
},
{
name: 'c5',
title: 'c5'
},
{
name: 'c6',
title: 'c6'
},
{
name: 'c7',
title: 'c7'
},
{
name: 'c8',
title: 'c8'
},
{
name: 'c9',
title: 'c9'
},
{
name: 'c10',
title: 'c10'
}
],
data: []
});
$('#btn-load').on('click', function() {
grid.use('Net', {
perPage: 100,
readDataMethod: 'GET',
api: {
readData: 'api/readData'
}
});
});
grid.on('selection', function(ev) {
console.log(ev);
});
</script>
</html>