uncategorized

jqGrid상세사용법

jqGrid 상세사용법.

jqGrid의 기초적인 사용법에 이어서 상세사용법을 포스팅하도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$("#id").jqGrid({
	url : "데이터를 받아올 url",
	datatype : "받아올 datatype",
	colNames : ['셀의 이름1', '셀의 이름2'....],
	colModel : [
		{
			name : '받아올 변수의 이름',
			index : 'jqGird안에서 접근할 이름',
			width : cell의 너비,
			align : 'text의 정렬' => left,center,right
		},
		{
			name : '받아올 변수의 이름1',
			index : 'jqGird안에서 접근할 이름1',
			width : cell의 너비,
				align : 'text의 정렬' => left,center,right
			}
			.
			.
			.
			.
		],
	loadtext : "로딩중 표시할 텍스트",
	caption : "그리드의 제목",
	postData : {
			//데이터를 받아올 때 넘길 변수를 설정해줍니다.
			data1 : "data1";
			data2 : "data2";
			.
			.
			.
			.
		}
});

앞서 포스팅했던 기초적인 사용법입니다. jqGrid안의 keyword를 하나씩 설명해드리겠습니다.
일단 request를 보낸 URL에서 다시 response를 받을때는 보통 json 형식으로 많이 보내기때문에 json형식 기준으로 포스팅을 하겠습니다.
Controller에서 보낸 json 형식의 데이터의 키값을 임의로 “python”,”java”,”php” 이 세개로 하겠습니다.

url

앞서 말씀드린거와 같이 request를 보낼 url을 선언해줍니다. Java코딩 기준으로 RequestMapping으로 설정해놓은 value값이 되겠습니다.

datatype

이것도 역시 받아올 데이터타입을 선언해줍니다. json타입이면 ‘json’, xml파일이면 ‘xml’로 설정해줍니다.
여기서 주의할점은 대소문자 구분입니다. 카멜케이스에 익숙해져 dataType으로 선언한다면 읽어들이지 못합니다.

colNames

colName.png

colNames는 위 사진의 빨간부분을 설정해줍니다. 즉 테이블의 셀의 제목을 설정해줍니다.
제가 임의로 키값을 설정한걸로 선언한다면

1
colNames : ['파이썬','자바','피에이치피']

이렇게 선언이 됩니다.
colNamse는 자신이 원하는 제목으로 설정해도 무방합니다.

colModel

데이터의 변수명을 설정해줍니다. Controller에서 list를 Json 형식으로 변환하여 들어오면 뿌려줄 변수명을 설정해주면 라이브러리에서 grid를 그려줍니다.
지금 상황에서는

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
colModel : [
		{ 
		  name : 'python',
		  index : 'python',
		  width : 100,
		  align : 'left'		
		},
		{ 
		  name : 'java',
		  index : 'java',
		  width : 100,
		  align : 'center'		
		},
		{ 
		  name : 'php',
		  index : 'php',
		  width : 50,
		  align : 'right'		
		}
	]

이런식으로 선언이 됩니다.
-name : response받은 변수와 이름을 맞춥니다.
-index : jqGrid에서 접근할 이름입니다. 미지정시 name을 따라갑니다
-width : 셀의 너비를 선언합니다
-align : 텍스트의 정렬조건입니다.
-key : 유일한 rowId값을 위해 id를 지정할 수 있습니다. 반드시 하나의 컬럼에만 지정해야하고, 유일한 값이어야 합니다
-hidden : true값을 줘서 컬럼을 숨길 수 있습니다. default값은 false입니다.
이밖에 colModel에서는 다른기능들이 있습니다.
이중에 formatter라는 기능이 있는데, 데이터를 뿌릴 떄 데이터를 변환하여 보여줄 수 있습니다.
formatter에 대해 설명하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//formatter 예제
formatter : function(cellValue,rowObject,options) {
	//cellValue는 현재 셀의 값을 그대로 가져옵니다.
	//rowObject는 현재 셀이 포함되어있는 row를 가져옵니다.
	//options는 해당 데이터를 date포맷이나 다른 포맷으로 변경할 수 있습니다.
}
colModel : [
	{ 
	 name : 'python',
	 index : 'python',
	 width : 100,
	 align : 'left',
	 formatter : 
		function(cellValue,rowObject,options) {
				//원래 값은 "python1" 일때
				return cellValue.replace("1","");
				//화면에 보여지는 값은 python
		  	}	
	},
	{ 
	  name : 'java',
	  index : 'java',
	  width : 100,
	  align : 'center'	,
	  formatter : 
		function(cellValue,rowObject,options) {
				//원래 값은 "java1" 일때
				return rowObject.java.replace("1","");
				//화면에 보여지는 값은 java
		  	}		
	}
	]

multiselect

멀티셀렉트를 사용할지 결정합니다. true로 지정 시, 컬럼의 맨앞에 체크박스가 생기며 여러 로우를 선택할 수 있습니다.

caption

Caption 영역에 제목을 표시합니다.

height,width

그리드의 가로,세로 길이를 지정할 수 있습니다. 픽셀단위이며, 퍼센티지로는 지정할 수 없습니다.

Share