<!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_all" style="width:100%;height:470px;"></div>
<br/>
<div id="grid_details" style="width:100%;height:150px;"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#grid_all").w2grid({
name : "grid_all"
, header : "TWICE & LOVELYZ"
, show: { header:true, columnHeaders: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:"1992-07-06" }
, { recid:2, name:"유지애", autonym:"유지애", position:"서브보컬", birthday:"1993-05-21" }
, { recid:3, name:"서지수", autonym:"서지수", position:"서브보컬, 메인댄서", birthday:"1994-02-11" }
, { recid:4, name:"이미주", autonym:"이미주", position:"서브보컬, 메인댄서", birthday:"1994-09-23" }
, { recid:5, name:"Kei", autonym:"김지연", position:"메인보컬, 리드댄서, 애교", birthday:"1995-03-20" }
, { recid:6, name:"나연", autonym:"임나연", position:"리드샌서, 리드보컬", birthday:"1995-09-22" }
, { recid:7, name:"Jin", autonym:"박명은", position:"메인보컬", birthday:"1996-06-12" }
, { recid:8, name:"정연", autonym:"유정연", position:"리드보컬", birthday:"1996-11-01" }
, { recid:9, name:"모모", autonym:"히라이 모모", position:"서브보컬, 메인댄서", birthday:"1996-11-09" }
, { recid:10, name:"사나", autonym:"미나토자키 사나", position:"서브보컬", birthday:"1996-12-29" }
, { recid:11, name:"지효", autonym:"박지효", position:"리더, 메인보컬", birthday:"1997-02-01" }
, { recid:12, name:"미나", autonym:"묘이 미나", position:"서브보컬, 메인댄서", birthday:"1997-03-24" }
, { recid:13, name:"류수정", autonym:"류수정", position:"리드보컬", birthday:"1997-11-19" }
, { recid:14, name:"다현", autonym:"김다현", position:"리드래퍼, 서브보컬", birthday:"1998-05-28" }
, { recid:15, name:"정예인", autonym:"정예인", position:"서브보컬, 리드댄서", birthday:"1998-06-04" }
, { recid:16, name:"채영", autonym:"손채영", position:"메인래퍼, 서브보컬", birthday:"1999-04-23" }
, { recid:17, name:"쯔위", autonym:"저우 쯔위", position:"서브보컬, 리드댄서", birthday:"1999-06-14" }
]
, onDblClick : function(event) {
w2ui["grid_details"].clear();
var record = this.get(event.recid);
w2ui["grid_details"].add([
{ recid:0, name:"ID : ", value:record.recid }
, { recid:1, name:"Name : ", value:record.name }
, { recid:2, name:"Autonym : ", value:record.autonym }
, { recid:3, name:"Position : ", value:record.position }
, { recid:4, name:"Birthday : ", value:record.birthday }
]);
}
});
jQuery("#grid_details").w2grid({
name : "grid_details"
, header : "Details"
, show : { header:true, columnHeaders:false }
, columns : [
{ field:"name", caption:"name", size:"100px", style:"background-color:#EFEFEF;border-bottom:1px solid white;padding-right:5px;", attr:"align=right" }
, { field:"value", caption:"value", size:"100%" }
]
});
});
</script>
</body>
</html>
|
