johan
/
twelve-heroes


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
							<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>1. Basic Example</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/nhnent/tui.grid/1.5.1/dist/grid.min.css" />
    <style>
        #grid {width: 600px; float:left; margin-right:20px;}
        #theme {width: 200px; float:left;}
        #custom-text {width: 300px; height:520px; font-size:12px;}
        h4 {margin: 5px 0;}
        .preset {margin-bottom:15px;}
        .custom p {margin: 5px 0}
    </style>
</head>
<body>
<h1><a href="https://github.com/nhnent/tui.grid" target="_blank">TUI Grid</a></h1>
<div class="code-html">
    <div id="grid"></div>
    <div id="theme">
        <div class="preset">
            <h4>Preset</h4>
            <button class="btn-theme" data-preset="default">default</button>
            <button class="btn-theme" data-preset="striped">striped</button>
            <button class="btn-theme" data-preset="clean">clean</button>
        </div>
        <div class="custom">
            <h4>Custom options</h4>
            <p><textarea id="custom-text">
{
    grid: {
        background: '#fff',
        border: '#ccc',
        text: '#444'
    },
    selection: {
        background: '#4daaf9',
        border: '#004082'
    },
    toolbar: {
        border: '#ccc',
        background: '#fff'
    },
    scrollbar: {
        background: '#f5f5f5',
        thumb: '#d9d9d9',
        active: '#c1c1c1'
    },
    cell: {
        normal: {
            background: '#fbfbfb',
            border: '#e0e0e0'
        },
        head: {
            background: '#eee',
            border: '#ccc'
        },
        editable: {
            background: '#fbfbfb'
        },
        selectedHead: {
            background: '#d8d8d8'
        },
        focused: {
            border: '#418ed4'
        },
        disabled: {
            text: '#b0b0b0'
        },
        evenRow: {
            background: '#fbfbfb'
        },
        currentRow: {
            background: '#e0ffe0'
        }
    }
}
        </textarea></p>
            <p><button class="btn-custom">Apply</button></p>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/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.1.2/backbone.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.code-snippet/1.2.0/code-snippet.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.component.pagination/1.0.3/pagination.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.grid/1.5.1/dist/grid.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.grid/1.5.1/examples/data/grid-row-2000.js"></script>
<script type="text/javascript" class="code-js">
    var grid = new tui.Grid({
        el: $('#grid'),
        headerHeight: 40,
        displayRowCount: 15,
        minimumColumnWidth: 100,
        rowHeight: 35,
        columnModelList: [
            {
                columnName: '_button',
                width: 30
            },
            {
                title: 'ID',
                columnName: 'c1',
                align: 'center',
                editOption: {
                    beforeContent: 'FE',
                    type: 'text'
                }
            },
            {
                title: 'Name',
                defaultValue: 2,
                columnName: 'c2',
                align: 'center',
                editOption: {
                    type: 'text',
                }
            },
            {
                title: 'Score',
                columnName: 'c3',
                align: 'center',
                editOption: {
                    type: 'text',
                    afterContent: ' Point',
                }
            }
        ]
    });
    var rowList = [];
    (function() {
        _.times(20, function(number) {
            rowList.push({
                c1: String(Math.random()).substring(2, 10),
                c3: Math.round(Math.random() * 10000)
            });
        })
    })();
    rowList[0].c2 = 'Mustafa Cosme';
    rowList[1].c2 = 'Gunnar Fausto';
    rowList[2].c2 = 'Junior Morgan';
    rowList[3].c2 = 'Tódor Ingo';
    rowList[4].c2 = 'Zezé Obadiah';
    rowList[5].c2 = 'Alfwin Damir';
    rowList[6].c2 = 'Feroz Fredrik';
    rowList[7].c2 = 'Archer Beniamino';
    rowList[8].c2 = 'Dado Shaul';
    rowList[9].c2 = 'Svetoslav Eder';
    rowList[10].c2 = 'Lauri Gligor';
    rowList[11].c2 = 'Ruben Bèr';
    rowList[12].c2 = 'Vicenç Hadrien';
    rowList[13].c2 = 'Borna Rochus';
    rowList[14].c2 = 'Kristijonas Tate';
    rowList[15].c2 = 'Georg Ormazd';
    rowList[16].c2 = 'Kumara Archimedes';
    rowList[17].c2 = 'Hershel Radomil';
    rowList[18].c2 = 'Toma Levan';
    rowList[19].c2 = 'Njord Thoko';
    grid.setRowList(rowList);
    grid.disableRow(6);
    var currentPresetName = 'default';
    $('.btn-theme').click(function() {
        var preset = $(this).data('preset');
        currentPresetName = preset;
        tui.Grid.applyTheme(preset);
    });
    $('.btn-custom').click(function() {
        var options = eval('(' + $('#custom-text').val() + ')');
        tui.Grid.applyTheme(currentPresetName, options);
    });
</script>
</html>