C# - HtmlTemplate

 

[HtmlTemplate 예문]

using System;
using System.IO;
public class HtmlTemplate
{
    private string _html;
    public HtmlTemplate(string templatePath)
    {
        using (var reader = new StreamReader(templatePath))
            _html = reader.ReadToEnd();
    }
    public string Render(object values)
    {
        string output = _html;
        foreach (var p in values.GetType().GetProperties())
            output = output.Replace("[" + p.Name + "]", (p.GetValue(values, null) as string) ?? string.Empty);
        return output;
    }
}
public class Program
{
    void Main()
    {
        var template = new HtmlTemplate(@"C:\MyTemplate.txt");
        var output = template.Render(new {
            TITLE = "My Web Page",
            METAKEYWORDS = "Keyword1, Keyword2, Keyword3",
            BODY = "Body content goes here",
            ETC = "etc"
        });
        Console.WriteLine(output);
    }
}

Using this, all you have to do is create some HTML templates and fill them with replaceable tokens such as [TITLE], [METAKEYWORDS], etc. Then pass in anonymous objects that contain the values to replace the tokens with. You could also replace the value object with a dictionary or something similar.

출처 : https://stackoverflow.com/questions/897226/generating-html-using-a-template-from-a-net-application

Related projects

• dotliquid: .NET port of the liquid templating engine
• Fluid .NET liquid templating engine
• Nustache: Logic-less templates for .NET
• Handlebars.Net: .NET port of handlebars.js
• Textrude: UI and CLI tools to turn CSV/JSON/YAML models into code using Scriban templates
• NTypewriter: VS extension to turn C# code into documentation/TypeScript/anything using Scriban templates

예문 : https://scribanonline.azurewebsites.net

출처 : https://github.com/scriban/scriban

javascript - UI 라이브러리 (w2ui)

 

[w2ui]

https://w2ui.com/web/home

[한국 달력에 맞게 수정]

[출처] https://wickedmagic.tistory.com/507

var w2utils = (function () {
    var tmp = {}; // for some temp variables
    var obj = {
        version  : "1.4.3",
        settings : {
            "locale" : "ko-kr",
            "date_format" : "yyyy-mm-dd",
            "date_display" : "yyyy, Mon d",
            "time_format" : "hh:mi pm",
            "currencyPrefix" : "$",
            "currencySuffix" : "",
            "currencyPrecision" : 2,
            "groupSymbol" : ",",
            "decimalSymbol" : ".",
            "shortmonths" : ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
            "fullmonths" : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
            "shortdays" : ["월", "화", "수", "목", "금", "토", "일"],
            "fulldays" : ["월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"],
            "dataType" : 'HTTP',
            "phrases" : {}
        },

        ---- 이하 생략 ----

        getMonthHTML: function (month, year) {

            var td         = new Date();
            var months     = w2utils.settings.fullmonths;
            var days       = w2utils.settings.fulldays;
            var daysCount  = ['31', '28', '31', '30', '31', '30', '31', '31', '30', '31', '30', '31'];
            var today      = td.getFullYear() + '/' + (Number(td.getMonth()) + 1) + '/' + td.getDate();
            // normalize date
            year  = w2utils.isInt(year)  ? parseInt(year)  : td.getFullYear();
            month = w2utils.isInt(month) ? parseInt(month) : td.getMonth() + 1;
            if (month > 12) { month -= 12; year++; }
            if (month < 1 || month === 0)  { month += 12; year--; }
            if (year/4 == Math.floor(year/4)) { daysCount[1] = '29'; } else { daysCount[1] = '28'; }
            this.options.current = month + '/' + year;

            td = new Date(year, month - 1, 1);
            var weekDay = td.getDay() + 1;    // + 1을 더해서 출력일을 한칸 뒤로 미룬다.
            var tabDays = w2utils.settings.shortdays;
            var dayTitle = '';
            for ( var i = 0, len = tabDays.length; i < len; i++) {
                dayTitle += '<td>' + tabDays[i] + '</td>';
            }
            var html  =
                '<div class="w2ui-calendar-title title">'+
                '    <div class="w2ui-calendar-previous previous"> <div></div> </div>'+
                '    <div class="w2ui-calendar-next next"> <div></div> </div> '+

                        // 캘린더의 타이틀 부분을 변경한다.

                        // months[month - 1] +', '+ year +
                        year + '년, ' + months[month - 1] +
                '</div>'+
                '<table class="w2ui-calendar-days" cellspacing="0">'+
                '    <tr class="w2ui-day-title">' + dayTitle + '</tr>'+
                '    <tr>';

            var day = 1;
            for (var ci=1; ci<43; ci++) {
                if (weekDay === 0 && ci == 1) {
                    for (var ti=0; ti<6; ti++) html += '<td class="w2ui-day-empty">&nbsp;5</td>';
                    ci += 6;
                } else {
                    if (ci < weekDay || day > daysCount[month-1]) {
                        html += '<td class="w2ui-day-empty">&nbsp;</td>';
                        if ((ci) % 7 === 0) html += '</tr><tr>';
                        continue;
                    }
                }
                var dt  = year + '/' + month + '/' + day;

                var className = '';

                if (ci % 7 == 0)  className  = ' w2ui-saturday';       // 토요일 날짜를 맨 뒤로 이동한다.
                if (ci % 7 === 1) className  = ' w2ui-sunday';        // 일요일 날짜를 맨 앞으로 이동한다.
                if (dt == today)  className += ' w2ui-today';

                var dspDay  = day;
                var col     = '';
                var bgcol   = '';
                var tmp_dt  = w2utils.formatDate(dt, this.options.format);
                if (this.options.colored && this.options.colored[tmp_dt] !== undefined) { // if there is predefined colors for dates
                    tmp   = this.options.colored[tmp_dt].split(':');
                    bgcol = 'background-color: ' + tmp[0] + ';';
                    col   = 'color: ' + tmp[1] + ';';
                }
                html += '<td class="'+ (this.inRange(tmp_dt) ? 'w2ui-date ' : 'w2ui-blocked') + className + '" style="'+ col + bgcol + '" date="'+ tmp_dt +'">'+
                            dspDay +
                        '</td>';
                if (ci % 7 === 0 || (weekDay === 0 && ci == 1)) html += '</tr><tr>';
                day++;
            }
            html += '</tr></table>';
            return html;
        },

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
<link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
<style type="text/css">
.block {
    padding-top:20px;
    padding-bottom:10px;
    color:#999;
}
.w2ui-div {
    float:left;
    padding:4px;
    border:1px solid silver;
    border-radius:3px;
}
.w2ui-field input {
    width:90px;
}
.w2ui-field > div > span {
    margin-left:20px;
}
</style>
</head>
<body>
<div class="w2ui-div">
    <div class="block">
        <b>KR Format</b>
    </div>
    <div class="w2ui-field">
        <label>Date:</label>
        <div> <input type="kr-date"> </div>
    </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("input[type=kr-date]").w2field("date");
});
</script>
</body>
</html>

[텍스트 필드 시간]

[출처] https://wickedmagic.tistory.com/508

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
<link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
<style type="text/css">
.block {
    padding-top:20px;
    padding-bottom:10px;
    color:#999;
}
.w2ui-div {
    float:left;
    padding:4px;
    border:1px solid silver;
    border-radius:3px;
}
.w2ui-field input {
    width:90px;
}
.w2ui-field > div > span {
    margin-left:20px;
}
</style>
</head>
<body>
<div class="w2ui-div">
    <div class="block">
        <b>한국시간</b>
    </div>
    <div class="w2ui-field">
        <label>Time:</label>
        <div> <input type="kr-time"> </div>
    </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("input[type=kr-time]").w2field("time", {format:"h12"});
});
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
<link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
<style type="text/css">
.block {
    padding-top:20px;
    padding-bottom:10px;
    color:#999;
}
.w2ui-div {
    float:left;
    padding:4px;
    border:1px solid silver;
    border-radius:3px;
}
.w2ui-field input {about:newtab
    width:90px;
}
.w2ui-field > div > span {
    margin-left:20px;
}
</style>
</head>
<body>
<div class="w2ui-div">
    <div class="block">
        <b>한국시간</b>
    </div>
    <div class="w2ui-field">
        <label>Time:</label>
        <div> <input type="kr-timelimit"> <span class="legend">(08:00 am ~ 04:30 pm 까지)</span> </div>
    </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("input[type=kr-timelimit]").w2field("time", {format:"h12", start:"8:00 am", end:"4:30 pm"});
});
</script>
</body>
</html>

[텍스트 박스 리스트]

[출처] https://wickedmagic.tistory.com/509

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
<link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
<style>
.w2ui-field input {
    width:200px;
}
.w2ui-field > div > span {
    margin-left:20px;
}
</style>
</head>
<body>
<div class="w2ui-field w2ui-span3">
    <label>List :</label>
    <div><input type="list"></div>
</div>
<script type="text/javascript">
    var people = [
          "George Washington"
        , "John Adams"
        , "Thomas Jefferson"
        , "James Buchanan"
        , "James Madison"
        , "Abraham Lincoln"
        , "James Monroe"
        , "Andrew Johnson"
        , "John Adams"
        , "Ulysses Grant"
        , "Andrew Jackson"
        , "Rutherford Hayes"
        , "Martin VanBuren"
        , "James Garfield"
        , "William Harrison"
        , "Chester Arthur"
        , "John Tyler"
        , "Grover"
        , "Cleveland"
        , "James Polk"
        , "Benjamin Harrison"
        , "Zachary Taylor"
        , "Grover Cleveland"
        , "Millard Fillmore"
        , "William McKinley"
        , "Franklin Pierce"
        , "Theodore Roosevelt"
        , "John Kennedy"
        , "William Howard"
        , "Lyndon Johnson"
        , "Woodrow Wilson"
        , "Richard Nixon"
        , "Warren Harding"
        , "Gerald Ford"
        , "Calvin Coolidge"
        , "James Carter"
        , "Herbert Hoover"
        , "Ronald Reagan"
        , "Franklin Roosevelt"
        , "George Bush"
        , "Harry Truman"
        , "William Clinton"
        , "Dwight Eisenhower"
        , "George W. Bush"
        , "Barack Obama"
    ];

    jQuery("input[type=list]").w2field("list", {items:people});
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
<link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
<style>
.w2ui-field input {
    width:200px;
}
.w2ui-field > div > span {
    margin-left:20px;
}
</style>
</head>
<body>
<div style="height:20px"></div>
<div class="w2ui-field w2ui-span3">
    <label>Combo :</label>
    <div> <input type="combo"> <span class="legend">You can type any text</span> </div>
</div>
<script type="text/javascript">
    var people = [
          "George Washington"
        , "John Adams"
        , "Thomas Jefferson"
        , "James Buchanan"
        , "James Madison"
        , "Abraham Lincoln"
        , "James Monroe"
        , "Andrew Johnson"
        , "John Adams"
        , "Ulysses Grant"
        , "Andrew Jackson"
        , "Rutherford Hayes"
        , "Martin VanBuren"
        , "James Garfield"
        , "William Harrison"
        , "Chester Arthur"
        , "John Tyler"
        , "Grover"
        , "Cleveland"
        , "James Polk"
        , "Benjamin Harrison"
        , "Zachary Taylor"
        , "Grover Cleveland"
        , "Millard Fillmore"
        , "William McKinley"
        , "Franklin Pierce"
        , "Theodore Roosevelt"
        , "John Kennedy"
        , "William Howard"
        , "Lyndon Johnson"
        , "Woodrow Wilson"
        , "Richard Nixon"
        , "Warren Harding"
        , "Gerald Ford"
        , "Calvin Coolidge"
        , "James Carter"
        , "Herbert Hoover"
        , "Ronald Reagan"
        , "Franklin Roosevelt"
        , "George Bush"
        , "Harry Truman"
        , "William Clinton"
        , "Dwight Eisenhower"
        , "George W. Bush"
        , "Barack Obama"
    ];

    jQuery("input[type=combo]").w2field("combo", {items:people});   
</script>
</body>
</html>

[팝업창 띄우기]

[출처] https://wickedmagic.tistory.com/510

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="popup()">Open Popup</button>
<script type="text/javascript">
function popup() {
    w2popup.open({
          title:"Popup Title"
        , body:"<div class='w2ui-centered'>This is text inside the popup</div>"
        , buttons:"<button class='btn' onClick='w2popup.close();'>Close</button>"
        , showMax:true
    });
}
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="w2alert('경고창')">Show Alert</button>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="w2confirm('두개중 하나를 선택하시오.', '선택창', function(btn){console.log(btn);})">
    Show Confirm
</button>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="popup()">Open Popup</button>
<input type="text"/>
<script type="text/javascript">
function popup() {
    w2popup.open({
          title:"Popup Title"
        , body:"<div class='w2ui-centered'>This is text inside the popup</div>"
        , buttons:"<button class='btn' onClick='w2popup.close();'>Close</button>"
        , width:"500"
        , height:"300"
        , color:"#FFFFCC"
        , style:"background-color:#EEEEEE"
        , speed:"0.3"
        , opacity:"0.8"
        , modal:true
        , transition:null
        , showClose:true
        , showMax:true
        , onOpen:function(event){console.log("open");}
        , onClose:function(event){console.log("close");}
        , onMax:function(event){console.log("max");}
        , onMin:function(event){console.log("min");}
        , onToggle:function(event){console.log("toggle");}
        , onKeydown:function(event){console.log("keydown");}
    });
}
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="jQuery('#popup').w2popup()">Open Popup</button>
<div id="popup" style="display:none;width:600px;height:400px;overflow:hidden">
    <div rel="title">
        Popup Title
    </div>
    <div rel="body" style="padding:10px;line-height:150%">
        <div style="float:left;background-color:white;width:150px;height:80px;border:1px solid silver;margin:5px;"></div>
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
    </div>
    <div rel="buttons">
        <button class="btn" onclick="jQuery('#popup').w2popup('close')">Close</button>
    </div>
</div>
</body>
<script type="text/javascript">
</script>
</html>

[다른 페이지 URL로 팝업창 불러오기]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="w2popup.load({url:'twice.html', showMax:true})">Open Popup</button>
</body>
</html>

<body>
<div id="popup" style="display:none;width:600px;height:400px;overflow:hidden">
    <div rel="title">
        CHEER UP
    </div>
    <div rel="body" style="padding:10px;line-height:150%">
        <font color="#FF99FF">
            <b>[나연] 매일 울리는 벨벨벨 이젠 나를 배려 해줘 배터리 낭비하긴 싫어</b><br/>
        </font>
        [미나] 자꾸만 봐 자꾸 자꾸만 와 전화가 펑 터질 것만 같아<br/>
        [사나] 몰라 몰라 숨도 못 쉰대 나 때문에 힘들어 쿵 심장이 떨어진대 왜<br/>
        [미나] 걔 말은 나, 너무 예쁘대 자랑 하는건 아니구<br/>
        [쯔위] 아까는 못 받아서 미안해<br/>
        [사나] 친구를 만나느라 shy shy shy<br/>
        [쯔위] 만나긴 좀 그렇구 미안해<br/>
        [미나] 좀 있다 연락할게 later<br/>
        [모모] 조르지마 얼마 가지 않아 부르게 해줄게 Baby<br/>
        [정연] 아직은 좀 일러 내 맘 같긴 일러 하지만 더 보여줄래<br/>
        [지효] Cheer up baby Cheer up baby 좀 더 힘을 내<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        여자가 쉽게 맘을 주면 안돼 그래야 니가 날 더 좋아하게 될걸<br/>
        <font color="#FF99FF">
            <b>[나연] 태연하게 연기할래 아무렇지 않게 내가 널 좋아하는 맘 모르게<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            just get it together and then baby Cheer up</b>
        </font>
    </div>
    <div rel="buttons">
        <button class="btn" onClick="jQuery('#popup').w2popup('close')">Close</button>
    </div>
</div>
</body>

※ 팝업 이벤트 옵션

title	팝업창의 제목 설정
body	팝업창의 내용 구성
buttons	팝업창의 HTML 버튼 구성
modal	모달 영역의 기능 설정, true인 경우 팝업창 이외의 영역 클릭 및 선택 불가, false인 경우 팝업창 이외의 영역 클릭시 팝업창이 닫힘
width	팝업창의 넓이를 설정한다.
height	팝업창의 높이를 설정한다.
style	CSS태그를 입력하면 body 영역에 지정한 CSS에 태그가 반영되어 스타일을 변경 할 수 있다.
color	팝업창이 오픈되었을때 모달 영역에 나타나는 색상을 지정한다.
opacity	팝업창이 오픈되었을때 모달 영역의 백그라운드의 투명도를 지정한다.
speed	팝업창이 오픈되었을때 속도를 조절한다.
transition	팝업창의 내용변경 이벤트
showClose	팝업창 닫기 × 아이콘 나타내기(true인 경우 × 아이콘이 존재하고, false인 경우 × 아이콘이 존재하지 않는다.)
showMax	팝업창 화면 크기 조절 □ 아이콘 나타내기(true인 경우 □ 아이콘이 존재하고, false인 경우 □ 아이콘이 존재하지 않는다.)
keyboard	팝업창을 키보드 ESC 버튼으로 팝업창 닫기(true 종료, false 팝업창 오픈)
onOpen	팝업창이 오픈 될때 실행되는 이벤트 지정
onClose	팝업창이 종료 될때 실행되는 이벤트 지정
onMax	팝업창이 작아질때 실행되는 이벤트
onMin	팝업창이 작아질때 실행되는 이벤트
onToggle	팝업창이 최대/최소 크기로 변경될때마다 실행되는 이벤트
onKeyboard	팝업창을 키보드 ESC 버튼을 눌러 종료하였을경우 실행되는 이벤트

[팝업창 닫기 버튼]

[출처] https://wickedmagic.tistory.com/511

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="jQuery('#popup').w2popup()">Open Popup</button>
<div id="popup" style="display:none;width:500px;height:300px;overflow:hidden">
    <div rel="title">
        닫기 버튼
    </div>
    <div rel="body" style="padding:10px;line-height:150%;top:40%;text-align:center;">
        닫기 버튼 테스트
    </div>
    <div rel="buttons">
        <button class="btn" onclick="jQuery('#popup').w2popup('close')">Close</button>
    </div>
</div>
</body>
</html>

[로딩중 화면 띄우기]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="jQuery('#popup').w2popup()">Open Popup</button>
<div id="popup" style="display:none;width:500px;height:300px;overflow:hidden">
    <div rel="title">
        로딩중 표시
    </div>
    <div rel="body" style="padding:10px;line-height:150%;top:40%;text-align:center;">
        로딩중 표시
    </div>
    <div rel="buttons">
        <button class="btn" onclick="lock('')">로딩중</button>
    </div>
</div>
<script type="text/javascript">
function lock(msg) {
    w2popup.lock(msg, true);
    setTimeout(function () {
        w2popup.unlock();
    }, 2000);
}
</script>
</body>
</html>

[로딩중 화면 텍스트 나타내기]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="jQuery('#popup').w2popup()">Open Popup</button>
<div id="popup" style="display:none;width:500px;height:300px;overflow:hidden">
    <div rel="title">
        로딩중 표시
    </div>
    <div rel="body" style="padding:10px;line-height:150%;top:40%;text-align:center;">
        로딩중 표시
    </div>
    <div rel="buttons">
        <button class="btn" onclick="lock('로딩중')">로딩중</button>
    </div>
</div>
<script type="text/javascript">
function lock(msg) {
    w2popup.lock(msg, true);
    setTimeout(function () {
        w2popup.unlock();
    }, 2000);
}
</script>
</body>
</html>

[팝업창 슬라이드 메시지 나타내기]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="jQuery('#popup').w2popup()">Open Popup</button>
<div id="popup" style="display:none;width:500px;height:300px;overflow:hidden">
    <div rel="title">
        슬라이드 메시지 나타내기
    </div>
    <div rel="body" style="padding:10px;line-height:150%;top:40%;text-align:center;">
        이 위로 슬라이드 메시지가 나타납니다.
    </div>
    <div rel="buttons">
        <button class="btn" onclick="showMessage()">슬라이드 메시지</button>
    </div>
</div>
<script type="text/javascript">
function showMessage() {
    w2popup.message({
          width : 400
        , height : 180
        , html :
              "<div style='padding:60px;text-align:center'>메롱~!!</div>"
            + "<div style='text-align:center'><button class='btn' onclick='w2popup.message()'>닫기</button>"
    });
}
</script>
</body>
</html>

[그리드 선택 열 그룹화 하기]

[출처] https://wickedmagic.tistory.com/512

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<div id="grid" style="width:100%;height:920px;"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#grid").w2grid({
          name : "grid"
        , searches: [               
              { field:"lname", caption:"Last Name", type:"text" }
            , { field:"fname", caption:"First Name", type:"text" }
            , { field:"email", caption:"Email", type:"text" }
        ]
        , show : { footer: true }
        , sortData : [ { field:"recid", direction:"asc" } ]
        , columnGroups : [
              { caption:"번호", span:1 }        // 병합되지 않고 공간을 차지한다.
            , { caption:"소속", span:2 }        // 그룹, 회사가 병합된다.
            , { caption:"", master:true }        // 병합
            , { caption:"", master:true }        // 병합
            , { caption:"개인정보", span:3 }    // 생일, 나이, 혈액형이 병합된다.
            , { caption:"", master:true }        // 병합
        ]
        , columns: [               
              { field:"recid", caption:"", size:"50px", sortable:true, attr:"align=center", resizable:true }
            , { field:"group", caption:"그룹", size:"30%", sortable:true, resizable:true }
            , { field:"company", caption:"회사", size:"15%", sortable:true, resizable:true }
            , { field:"name", caption:"이름", size:"15%", sortable:true, resizable:true }
            , { field:"position", caption:"포지션", size:"15%", sortable:true, resizable:true }
            , { field:"birthday", caption:"생일", size:"15%", sortable:true, resizable:true }
            , { field:"age", caption:"나이", size:"10%", sortable:true, resizable:true }
            , { field:"blood", caption:"혈액형", size:"10%", sortable:true, resizable:true }
            , { field:"anote", caption:"비고", size:"90px", sortable:true, attr:"align=center", resizable:true }
        ]
        , records: [
              { recid:1, company:"JYP", group:"트와이스", name:"나연", autonym:"임나연", position:"리드댄서, 리드보컬, 맏내, 비주얼", birthday:"1995-09-22", age:"21", blood:"A형", anote:"♥" }
            , { recid:2, company:"JYP", group:"트와이스", name:"정연", autonym:"유정연", position:"리드보컬", birthday:"1996-11-01", age:"20", blood:"O형"  }
            , { recid:3, company:"JYP", group:"트와이스", name:"모모", autonym:"히라이 모모", position:"서브보컬, 메인댄서", birthday:"1996-11-09", age:"20", blood:"A형", anote:"★" }
            , { recid:4, company:"JYP", group:"트와이스", name:"사나", autonym:"미나토자키 사나", position:"서브보컬", birthday:"1996-12-29", age:"20", blood:"B형", anote:"♥" }
            , { recid:5, company:"JYP", group:"트와이스", name:"지효", autonym:"박지효", position:"리더, 메인보컬", birthday:"1997-02-01", age:"19", blood:"O형" }
            , { recid:6, company:"JYP", group:"트와이스", name:"미나", autonym:"묘이 미나", position:"서브보컬, 메인댄서", birthday:"1997-03-24", age:"19", blood:"A형" }
            , { recid:7, company:"JYP", group:"트와이스", name:"다현", autonym:"김다현", position:"리드래퍼, 서브보컬", birthday:"1998-05-28", age:"18", blood:"O형" }
            , { recid:8, company:"JYP", group:"트와이스", name:"채영", autonym:"손채영", position:"메인래퍼, 서브보컬",  birthday:"1999-04-23", age:"17", blood:"B형" }
            , { recid:9, company:"JYP", group:"트와이스", name:"쯔위", autonym:"저우 쯔위", position:"서브보컬, 리드댄서", birthday:"1999-06-14", age:"17", blood:"A형" }
            , { recid:10, company:"울림", group:"러블리즈", name:"베이비소울", autonym:"이수정", position:"리더, 리드보컬", birthday:"1992-07-06", age:"24", blood:"O형", anote:"★" }
            , { recid:11, company:"울림", group:"러블리즈", name:"유지애", autonym:"유지애", position:"서브보컬", birthday:"1993-05-21", age:"23", blood:"A형"  }
            , { recid:12, company:"울림", group:"러블리즈", name:"서지수", autonym:"서지수", position:"서브보컬, 메인댄서", birthday:"1994-02-11", age:"22", blood:"O형" }
            , { recid:13, company:"울림", group:"러블리즈", name:"이미주", autonym:"이미주", position:"서브보컬, 메인댄서", birthday:"1994-09-23", age:"22", blood:"O형" }
            , { recid:14, company:"울림", group:"러블리즈", name:"Kei", autonym:"김지연", position:"메인보컬, 리드댄서, 애교", birthday:"1995-03-20", age:"21", blood:"O형", anote:"♥" }
            , { recid:15, company:"울림", group:"러블리즈", name:"Jin", autonym:"박명은", position:"메인보컬", birthday:"1996-06-12", age:"20", blood:"B형" }
            , { recid:16, company:"울림", group:"러블리즈", name:"류수정", autonym:"류수정", position:"리드보컬", birthday:"1997-11-19", age:"19", blood:"B형" }
            , { recid:17, company:"울림", group:"러블리즈", name:"정예인", autonym:"정예인", position:"서브보컬, 리드댄서",  birthday:"1998-06-04", age:"18", blood:"B형" }
            , { recid:18, company:"쏘스뮤직", group:"여자친구", name:"소원", autonym:"김소정", position:"리더, 서브보컬", birthday:"1995-12-07", age:"21", blood:"A형" }
            , { recid:19, company:"쏘스뮤직", group:"여자친구", name:"예린", autonym:"정예린", position:"서브보컬, 리드댄서", birthday:"1996-08-19", age:"20", blood:"O형" }
            , { recid:20, company:"쏘스뮤직", group:"여자친구", name:"은하", autonym:"정은비", position:"리드보컬", birthday:"1997-05-30", age:"19", blood:"O형" }
            , { recid:21, company:"쏘스뮤직", group:"여자친구", name:"유주", autonym:"최유나", position:"메인보컬", birthday:"1997-10-04", age:"19", blood:"B형" }
            , { recid:22, company:"쏘스뮤직", group:"여자친구", name:"신비", autonym:"황은비", position:"메인댄서, 서브보컬", birthday:"1998-06-03", age:"18", blood:"AB형" }
            , { recid:23, company:"쏘스뮤직", group:"여자친구", name:"엄지", autonym:"김예원", position:"서브보컬", birthday:"1998-08-19", age:"18", blood:"O형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"아이린", autonym:"배주현", position:"리더", birthday:"1991-03-29", age:"25", blood:"A형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"슬기", autonym:"강슬기", position:"-", birthday:"1994-02-10", age:"22", blood:"A형", anote:"★" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"웬디", autonym:"손승완", position:"-", birthday:"1994-02-21", age:"22", blood:"O형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"조이", autonym:"박수영", position:"-", birthday:"1996-09-03", age:"20", blood:"A형" }
            , { recid:23, company:"SM", group:"레드밸벳", name:"예림", autonym:"김예림", position:"-", birthday:"1999-03-05", age:"19", blood:"O형" }
            , { recid:23, company:"RBW", group:"마마무", name:"솔라", autonym:"김용선", position:"리더, 보컬", birthday:"1991-02-21", age:"25", blood:"B형" }
            , { recid:23, company:"RBW", group:"마마무", name:"문별", autonym:"문별이", position:"메인래퍼, 메인댄서", birthday:"1992-12-22", age:"24", blood:"B형" }
            , { recid:23, company:"RBW", group:"마마무", name:"휘인", autonym:"정휘인", position:"메인보컬, 댄서", birthday:"1995-04-17", age:"21", blood:"B형", anote:"★" }
            , { recid:23, company:"RBW", group:"마마무", name:"화사", autonym:"안혜진", position:"보컬, 랩", birthday:"1995-07-23", age:"21", blood:"A형" }
        ]
    });
});
</script>
</body>
</html>

[그리드 타이틀을 가운데 정렬]

div.w2ui-col-header {
    text-align:center;
}

[그리드 상세 검색 기능]

[출처] https://wickedmagic.tistory.com/514

※ w2ui 그리드 조회 검색 타입.

타입	연산자	설명
text	is, begins, contains, ends	· 가장 기본적으로 특정 문자열이 존재하는지 검색한다.
int	is, in, not in, betwwen	· 특정 숫자값을 조회할때 사용한다.  · 숫자만 입력가능
float	is, between	소수점(수정예정)
hex	is
money	is, between	· 통화형식으로 데이터를 찾는다.  · 기본값은 $달러로 되어있다.  · 숫자만 입력가능
currency	is, between	· 통화형식으로 데이터를 찾는다.  · 기본값은 $달러로 되어있다.  · 숫자만 입력가능
percent	is, between	· 백분율(%) 데이터를 찾는다.  · 숫자만 입력가능
alphanumeric	is, begins, contains, ends	· 문자와 숫자 구분없
date	is, between	· 특정날자의 데이터를 조회한다.
time	is, between	· 특정시간의 데이터를 조회한다.
list	is	· 사용자가 정의한 미리 배열로 지정한 리스트 목록과 일치하는 데이터를 조회한다.
combo	is, begins, contains, ends
enum	in

※ 연산자

 -. is : 조회 값이 해당열의 텍스와 완전 일치하는 값들만 조회한다.

 -. begins : 조회 값이 해당열의 텍스트 맨 앞에 들어가 있는 값들만 조회한다.

 -. contains : 조회 값이 해당열의 텍스트에 일치하는 값이 있으면 조회한다.

 -. ends : 조회 값이 해당열의 텍스트 맨 끝에 들어가 있는 값들만 조회한다.

 -. in : 조회 값이 해당열의 데이터가 일치하는 값들만 조회한다.

 -. not in : 조회 값이 해당열의 데이터가 일치하지 않는 값들만 조회한다.

 -. betwwen : 해당열의 데이터 중에서 입력한 두개의 조회값에 포함되는 값만 조회한다.

[그리드 상세검색 한글 변환하기]

[출처] https://wickedmagic.tistory.com/515

getSearchesHTML: function () {
            var html = '<table cellspacing="0">';
            var showBtn = false;
            for (var i = 0; i < this.searches.length; i++) {
                var s = this.searches[i];
                s.type = String(s.type).toLowerCase();
                if (s.hidden) continue;
                var btn = '';
                if (showBtn == false) {
                    btn = '<button class="btn close-btn" onclick="obj = w2ui[\''+ this.name +'\']; if (obj) { obj.searchClose(); }">X</button';
                    showBtn = true;
                }
                if (typeof s.inTag   == 'undefined') s.inTag     = '';
                if (typeof s.outTag  == 'undefined') s.outTag     = '';
                if (typeof s.type    == 'undefined') s.type     = 'text';
                if (['text', 'alphanumeric', 'combo'].indexOf(s.type) != -1) {
                    var operator =  '<select id="grid_'+ this.name +'_operator_'+ i +'" onclick="event.stopPropagation();">'+
                        '    <option value="is">'+ w2utils.lang('~인(is)') +'</option>'+
                        '    <option value="begins">'+ w2utils.lang('시작단어~(begins)') +'</option>'+
                        '    <option value="contains">'+ w2utils.lang('~내용~(contains)') +'</option>'+
                        '    <option value="ends">'+ w2utils.lang('~마지막단어(ends)') +'</option>'+
                        '</select>';
                }
                if (['int', 'float', 'money', 'currency', 'percent', 'date', 'time'].indexOf(s.type) != -1) {
                    var operator =  '<select id="grid_'+ this.name +'_operator_'+ i +'" '+
                        '        onchange="w2ui[\''+ this.name + '\'].initOperator(this, '+ i +');" onclick="event.stopPropagation();">'+
                        '    <option value="is">'+ w2utils.lang('~인(is)') +'</option>'+
                        (['int'].indexOf(s.type) != -1 ? '<option value="~인(in)">'+ w2utils.lang('이면서(in)') +'</option>' : '') +
                        (['int'].indexOf(s.type) != -1 ? '<option value="~이 아닌(not in)">'+ w2utils.lang('제외한(not in)') +'</option>' : '') +
                        '<option value="between">'+ w2utils.lang('~중에서(between)') +'</option>'+
                        '</select>';
                }
                if (['select', 'list', 'hex'].indexOf(s.type) != -1) {
                    var operator =  '<select id="grid_'+ this.name +'_operator_'+ i +'" onclick="event.stopPropagation();">'+
                        '    <option value="is">'+ w2utils.lang('is') +'</option>'+
                        '</select>';
                }
                if (['enum'].indexOf(s.type) != -1) {
                    var operator =  '<select id="grid_'+ this.name +'_operator_'+ i +'" onclick="event.stopPropagation();">'+
                        '    <option value="~인(in)">'+ w2utils.lang('in') +'</option>'+
                        '    <option value="~이 아닌(not in)">'+ w2utils.lang('not in') +'</option>'+
                        '</select>';
                }
                html += '<tr>'+
                        '    <td class="close-btn">'+ btn +'</td>' +
                        '    <td class="caption">'+ s.caption +'</td>' +
                        '    <td class="operator">'+ operator +'</td>'+
                        '    <td class="value">';

[그리드 checkbox 사용하기]

[출처] https://wickedmagic.tistory.com/517

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<div id="grid" style="width:100%;height:350px;"></div>
<br/>
<button class="btn" onClick="w2ui.grid.selectAll();">전체 선택</button>
<button class="btn" onClick="w2ui.grid.selectNone();">전체 해제</button>
<button class="btn" onClick="w2ui.grid.select(1);">특정 열 선택</button>
<button class="btn" onClick="w2ui.grid.select(1, 3, 4);">특정 열 여러개 선택</button>
<button class="btn" onClick="w2ui.grid.unselect(1);">특정 열 해제</button>
<button class="btn" onClick="w2alert(w2ui.grid.getSelection());">선택 열 팝업</button>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#grid").w2grid({
          name : "grid"
        , show : {
            selectColumn:true
        }
        , columns : [
              { field:"name", caption:"이름", size:"30%" }
            , { field:"autonym", caption:"본명", size:"30%" }
            , { field:"position", caption:"포지션", size:"40%" }
            , { field:"birthday", caption:"생일", size:"120px" }
        ]
        , records: [
              { recid:1, name:"나연", autonym:"임나연", position:"리드댄서, 리드보컬", birthday:"1995-09-22" }
            , { recid:2, name:"정연", autonym:"유정연", position:"리드보컬", birthday:"1966-11-01" }
            , { recid:3, name:"모모", autonym:"히라이 모모", position:"서브보컬, 메인댄서", birthday:"1996-11-09" }
            , { recid:4, name:"사나", autonym:"미나토자키 사나", position:"서브보컬", birthday:"1996-12-29" }
            , { recid:5, name:"지효", autonym:"박지효", position:"리더, 메인보컬", birthday:"1997-02-01" }
            , { recid:6, name:"미나", autonym:"묘이 미나", position:"서브보컬, 메인댄서", birthday:"1997-03-24" }
            , { recid:7, name:"다현", autonym:"김다현", position:"리드래퍼, 서브보컬", birthday:"1998-05-28" }
            , { recid:8, name:"채영", autonym:"손채영", position:"메인래퍼, 서브보컬",  birthday:"1999-04-23" }
            , { recid:9, name:"쯔위", autonym:"저우 쯔위", position:"서브보컬, 리드댄서", birthday:"1999-06-14" }
        ]
    });
});
</script>
</body>
</html>

함수호출	설명
selectAll( )	· 해당 그리드의 모든 열을 선택한다.
selectNone( )	· 해당 그리드의 모든 열의 선택을 해제한다.
select( )	· 지정한 특정 열만을 선택한다.  · 콤마( , )를 사용하여 구분함으로서 한번에 여러개를 선택하는것도 가능하다.
unselect( )	· 지정한 특정 열의 선택을 해제한다.  · 콤마( , )를 사용하여 구분함으로서 한번에 여러개를 해제하는것도 가능하다.

[그리드 내용 수정하기]

[출처] https://wickedmagic.tistory.com/521

w2ui의 그리드에서 editable:속성 을 지정하는것으로 그리드의 내용을 수정할 수 있다.

editable 속성	설 명
checkbox	체크박스를 생성하고 화면에 나타낸다.  true몇 체크, false면 해제이다.
text	선택한 공간의 내용을 수정한다.
int	선택한 공간의 내용을 수정한다.  숫자만 수정이 가능하다.
money	해당공간에 돈의 단위를 수정 할 수 있게 한다.  기본 단위는 $달러 이다.
percent	해당공간의 백분율을 수정할 수 있게 한다.
color	RGB 컬러를 선택할 수 있다.
date	해당 컬럼의 날짜를 수정할 때 사용한다.
time	해당 컬럼의 시간을 수정할 때 사용한다.
list	해당 컬럼을 수정할 경우 예로 보여줄 리스트 항목을 보여준다.  리스트 항목에 없는 내용또한 작성할 수 있다.
select	해당 내용의

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<div id="grid" style="width:100%;height:450px;"></div>
<script type="text/javascript">
var group = [
      { id:1, text:"트와이스" }
    , { id:2, text:"러블리즈" }
    , { id:3, text:"여자친구" }
    , { id:4, text:"마마무" }
    , { id:5, text:"걸스데이" }
    , { id:6, text:"AOA" }
    , { id:7, text:"달샤벳" }
    , { id:8, text:"에이핑크" }
    , { id:9, text:"미스에이" }
];

jQuery(document).ready(function() {
    jQuery("#grid").w2grid({
          name : "grid"
        , multiSearch:true
        , columns : [
              { field:"check", caption:"check", size:"60px", editable:{ type:"checkbox" } }
            , { field:"text", caption:"문자", size:"120px", editable:{ type:"text" } }
            , { field:"int", caption:"숫자", size:"80px", render:"int", editable:{ type:"int", min:0, max:32756 } }
            , { field:"money", caption:"돈", size:"80px", render:"money", editable:{ type:"money" } }
            , { field:"percent", caption:"확률", size:"80px", render:"percent:1", editable:{ type:"percent", precision:1 } }
            , { field:"color", caption:"색상", size:"80px", editable:{ type:"color" } }
            , { field:"date", caption:"날짜", size:"90px", render:"date", style:"text-align:right", editable:{ type:"date" } }
            , { field:"time", caption:"시간", size:"70px", editable:{ type:"time"} }
            , { field:"list", caption:"리스트", size:"50%", editable:{ type:"list", items:group, showAll:true }
                , render:function(record, index, col_index) {
                    var html = this.getCellValue(index, col_index);
                    return html.text || "";
                }
            }
            , { field:"select", caption:"select", size:"100px", editable:{ type:"select", items:people }
                , render:function(record, index, col_index) {
                    var html = "";
                    for(var g in :group) {
                        if(group[g].id == this.getCellValue(index, col_index)) {
                            html = group[g].text;
                        }
                    }
                    return html;
                }
            }
        ]
        , records: [
              { recid:1, check:true, text:"사나팬", int:100, money:100, percent:55, date:"1996-12-29", time:"12:29 pm"
                , list:{ id:1, text:"트와이스" }
            }
            , { recid:2, check:true, text:"혜리팬", int:180, money:170, percent:65, date:"1994-06-09", time:"06:09 am" }
            , { recid:3, check:false, text:"나연팬", int:200, money:454.40, percent:15, date:"1995-09-22", time:"09:22 pm"
                , list:{ id:1, text:"트와이스" }
            }
            , { recid:4, check:true, text:"모모팬", int:300, money:1040, percent:98, date:"1996-11-09", time:"11:09 am" }
            , { recid:5, check:true, text:"Kei팬", int:350, money:140, percent:58, date:"1995-03-20", time:"03:20 pm"
                , list:{ id:3, text:"러블리즈" }
            }
            , { recid:6, check:true, text:"초롱팬", int:930, money:930, percent:42, date:"1991-03-03", time:"03:03 pm" }
            , { recid:7, check:true, text:"보미팬", int:280, money:450, percent:82, date:"1993-08-03", time:"08:03 am"
                , list:{ id:8, text:"에이핑크" }
            }
            , { recid:8, check:true, text:"예린팬", int:120, money:270, percent:61, date:"1996-08-19", time:"08:19 pm" }
            , { recid:9, check:true, text:"수지팬", int:900, money:980, percent:98, date:"1994-10-10", time:"10:10 pm" }
            , { recid:10, check:false, text:"우희팬", int:600, money:3400, percent:100, date:"1991-11-21", time:"11:21 am"
                , list:{ id:6, text:"AOA" }
            }
            , { recid:11, check:false, text:"민아팬", int:500, money:790, percent:39, date:"1993-05-13", time:"05:13 pm"
                , list:{ id:5, text:"걸스데이" }
            }
            , { recid:12, check:false, text:"휘인팬", int:550, money:4040, percent:12, date:"1995-04-22", time:"04:22 pm"
                , list:{ id:4, text:"마마무" }
            }
            , { recid:13, check:true, text:"모모팬", int:300, money:1040, percent:98, date:"1996-11-09", time:"11:09 am" }
            , { recid:14, check:false, text:"민아팬", int:600, money:3400, percent:100, date:"1993-09-21", time:"09:21 am"
                , list:{ id:6, text:"AOA" }
            }
            , { recid:15, check:false, text:"세리팬", int:400, money:500, percent:78, date:"1990-09-16", time:"09:16 am"
                , list:{ id:7, text:"달샤벳" }
            }
        ]
    });
});
</script>
</body>
</html>