<link rel = "stylesheet" type ="text/css" media ="screen" href = "css/ui-lightness/jquery-ui-1.10.4.custom.css">
<link rel = "stylesheet" type ="text/css" media ="screen" href = "css/ui.jqgrid.css">
<link rel = "stylesheet" type ="text/css" media ="screen" href = "css/ui.multiselect.css">
<script src = "js/jquery-1.11.0.min.js" ></script>
<script src = "js/jquery-ui-1.10.4.custom.js" ></script>
<script src = "js/i18n/grid.locale-en.js" ></script>
<script src = "plugins/ui.multiselect.js" ></script>
<script src = "js/jquery.jqGrid.min.js" ></script>
<script src = "src/grid.celledit.js" ></script>
<script>
$(function(){
'use strict';
var mydata = [
{id:"1" , hiredate:"2016-04-09" , iname:"홍길동" } ,
{id:"2" , hiredate:"2016-03-21" , iname:"박태환" } ,
{id:"3" , hiredate:"2016-04-09" , iname:"김끙" }
];
jQuery("#list").jqGrid({
datatype:"local",
data: mydata,
colNames: ['id' , 'Date' , 'Name'],
colModel: [{name:'id' , index :'id' , align:'center' ,width: 50 , sorttype:'number'},
{name:'hiredate' , index :'hiredate' , align:'center' , width: 80 , sorttype:'date'},
{name:'iname' , index :'iname' , align:'center', width: 100 }],
rowNum:5,
rowList:[5,10,15],
width:'100%',
pager:'#pager',
gridveiw:true,
rownumbers:true,
multiselect:true,
sortname:'id',
viewrecords:true,
scrolloffset:0,
sortorder:'asc',
caption:'JQ GRID',
height:'100%',
shrinkToFit:true,
loadonce:true
});
$("#list").jqGrid('navGrid' , '#pager' , {excel:true, add:true, edit:true, view:true, del:true, search:true, refresh:true});
})
</script>
</head>
<body>
<div style="clear:left">
<table id ="list"></table>
<div id = "pager"></div>
</div>
</body>
</html>
그럼 요로컴 만들어 진다.. ㅎㅎ
댓글 없음:
댓글 쓰기