[jQuery] jqGrid 사용법, 설정 (jqgrid cdn example)

관리자 템플릿으로 사용하기 좋은 jqgrid를 소개드립니다.
저는 무료로 사용 할수 있는 v4.6으로 사용했습니다.
cdn으로 v4.6을 로드해 줍니다. 이 외에도 jquery-ui.css 와 jquery min.js도 로드합니다. (필수)

table의 id를 지정해서 jqgrid의 리스트로 만듭니다. 하단의 div 영역은 pager 부븐이고 jqgrid의 옵션에
pager 부분에 작성해줍니다.

jqgrid의 리스트 내용은 예제이며, json형태의 배열입니다. (var mydata)

jqgrid 옵션

datatype :  리스트에 뿌려줄 데이터 타입을 설정합니다. json과 local을 많이 사용합니다.
colNames :  리스트 header 부분 (배열로 설정)
colModel : data의 매핑 자료입니다. row에 대한 상세 설정도 가능합니다. (width, align 등등..)
autowidth : true / false
rownumbers : true / false (순번 노출)
multiselect : true / false (checkbox 노출)
pager : 리스트 pager 명칭 (작성 안 할 시 pager 노출 안됨)
rowNum : 리스트 개수
rowList : 리스트 세팅 값

화면이 resize 될 때 jqgrid의 width값도 변형되도록 추가했습니다.

 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" />
 <!-- jqGrid CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" type="text/css" />
<!-- The actual JQuery code -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<!-- The JQuery UI code -->
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js" /></script>
<!-- The jqGrid language file code-->
<script type="text/javascript" src="//cdn.jsdelivr.net/jqgrid/4.6.0/i18n/grid.locale-kr.js" /></script>
<!-- The atual jqGrid code -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.src.js" /></script>
<script>
$(document).ready(function() {
	var mydata = [
	   {date:"2007-10-01",name:"test",id:"id",product:"상품1",amount:"10.00",total:"210.00"},
	   {date:"2007-10-02",name:"test2",id:"id2",product:"상품1",amount:"20.00",total:"320.00"},
	   {date:"2007-09-01",name:"test3",id:"id3",product:"상품1",amount:"30.00",total:"430.00"},
	   {date:"2007-10-04",name:"test",id:"id",product:"상품1",amount:"10.00",total:"210.00"},
	   {date:"2007-10-05",name:"test2",id:"id2",product:"상품1",amount:"20.00",total:"320.00"},
	   {date:"2007-09-06",name:"test3",id:"id3",product:"상품2",amount:"30.00",total:"430.00"},
	   {date:"2007-10-04",name:"test",id:"id",product:"상품2",amount:"10.00",total:"210.00"},
	   {date:"2007-10-03",name:"test2",id:"id2",product:"상품2",amount:"20.00",total:"320.00"},
	   {date:"2007-09-01",name:"test3",id:"id3",product:"상품2",amount:"30.00",total:"430.00"},
	   {date:"2007-10-01",name:"test",id:"id",product:"상품2",amount:"10.00",total:"210.00"},
	   {date:"2007-10-02",name:"test2",id:"id2",product:"상품2",amount:"20.00",total:"320.00"},
	   {date:"2007-09-01",name:"test3",id:"id3",product:"상품2",amount:"30.00",total:"430.00"},
	   {date:"2007-10-04",name:"test",id:"id",product:"상품2",amount:"10.00",total:"210.00"},
	   {date:"2007-10-05",name:"test2",id:"id2",product:"상품2",amount:"20.00",total:"320.00"},
	   {date:"2007-09-06",name:"test3",id:"id3",product:"상품2",amount:"30.00",total:"430.00"},
	   {date:"2007-10-04",name:"test",id:"id",product:"상품2",amount:"10.00",total:"210.00"},
	   {date:"2007-10-03",name:"test2",id:"id2",product:"상품2",amount:"20.00",total:"320.00"},
	   {date:"2007-09-01",name:"test3",id:"id3",product:"상품2",amount:"30.00",total:"430.00"},
	  {date:"2007-09-01",name:"test4",id:"id4",product:"상품2",amount:"30.00",total:"430.00"}
	];

	$("#list").jqGrid({
		datatype: "local",
		data: mydata,
		colNames:['날짜', '아이디', '이름','상품','가격','합계'],
		colModel:[
			{name:'date', index:'date', width:90, align: "center"},
			{name:'name', index:'name', width:100 , align: "center" },
			{name:'id', index:'id', width:150, align: "center" ,sortable:false },
			{name:'product', index:'product', width:80, align: "center"},
			{name:'amount', index:'amount', width:80, align: "center"},
			{name:'total', index:'total', width:80, align: "center"}
		],
		autowidth: true,
		rownumbers : true,
		multiselect:true,
		pager:'#pager',
		rowNum: 10,
		rowList: [10, 20, 50],
		sortname: 'id',
		sortorder: 'asc',
		height: 250,
	});

	$(window).on('resize.jqGrid', function() {
		$("#list").jqGrid('setGridWidth', $("#list").parent().parent().parent().parent().parent().width());
	})
	$(".jarviswidget-fullscreen-btn").click(function(){
		setTimeout(function() {
			$("#list").jqGrid('setGridWidth', $("#list").parent().parent().parent().parent().parent().width());
		}, 100);
	});
});
</script>
<table id="list"></table>
<div id="pager"></div>

 

[jQuery] jqGrid 사용법, 설정 (jqgrid cdn example)

[jQuery] jqGrid formatter 버튼 만들기 (jqGrid colModel formatter)

[jQuery] jqGrid multiselect (checkbox) 체크 된 값 가져오기

 

[jQuery] jqGrid header colspan (헤더 병합), setGroupHeaders