<!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>
|