[jQuery] jqgrid 간단한 사용법

 

jqgrid 고도화 링크

=> devlogofchris.tistory.com/60

function fn_init(){
        jpGrid = $("#list").jpGrid({
        	datatype	: 'json'							// 가져온 데이터의 형식 (XML/JSON/ROW)
        	,mtype		: "POST"							// ajax 호출 방식(GET/POST)
        	,loadtext	: "로딩중..."
			,rownumbers	: true								// row의 숫자를 표시해준다
			,rownumWidth: true								// rownumbers 옵션이 true인경우 row number 컬럼의 width를 결정한다.
			,viewrecords: true								// 그리드가 보여줄 총 페이지 현재 페이지등의 정보를 노출
			,url		: "/standardCd/selectMtrlCdInfo.do"	// 컨트롤러의 매핑값
			,colNames	: ['state','재질코드','재질명','삭제여부']	// 그리드 테이블 첫번쨰 로우 지정값 = 컬럼 이름
			,colModel	: 	[//컬럼 구조(index에 설정된 이름이 정렬시 정렬 기준열 이름으로 넘어감)
							{name:'state',	index:'state',	editable:'false',	hidden:true}
							,{name:'mtrlCd',	index:'mtrlCd',	editable:'true',	aline:'center',	width:70}
							,{name:'mtrlNm',	index:'mtrlNm',	editable:'true',	aline:'center',	width:580}
							,{name:'delYn',	index:'delYn',	editable:'true',	edittype:'select',	align:'center',	formatter: 'select' , editoptions:{value:"Y:Y;N:N"} , width: 50}
							]	// edittype: 편집가능한 필드의 타입을 정의
								<%--
							formatter: 'select' 설명
									select 타입은 실제 select가 아니며, 일부 editing 모듈과 edittype:'select' 에서 사용된다.
									이전 버전에서는 아래와 같이 key가 아닌 그리드의 select값을 전달했었다.
									<script>
									jQuery("#grid_id").jqGrid({
									...
									   colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ],
									...
									});
									</script>
									이경우 그리드 데이터의 myname 컬럼에 'One'이나 'Two' 가 셋팅되어야 했으나 아래와 같은 설정으로 key값에 '1' 또는 '2' 가 있어도 'One' 또는 'Two'가 보여지게 된다.
								--%>
			//// 그리드 더블 클릭 시 이벤트 ondblClickRow <=> // 마우스 클릭 이벤트: onSelectRow
			,ondblClickRow	:
			function(id,colId,val){
				$("#list").setColProp('mtrlCd'.{editable:false});		// 특정 cell 수정가능여부 바꿔주기 => $(#jpgrid_id).setColProp('data_fmt_cd'.{editable:true/false})
				$("#list").setColProp('delYn'.{editable:false});		// 특정 cell 수정가능여부 바꿔주기 => $(#jpgrid_id).setColProp('data_fmt_cd'.{editable:true/false})
				$("#list").jpGrid('editRow',id,{keys : false});			// 그리드 더블클릭시 에디트박스로 활성화되는데 이때 엔터를 누르면 이벤트가 발생한다. 이때 엔터이벤트를 없애려면 keys 를 false로 하면 엔터해도 아무반응없게 된다.
				$("#list").jpGrid('setCell',id,"state","U");			// 특정 cell value값 변경하기 => myGrid.jqGrid('setCell', rowId, 'myColumn', 'newValue');
			}
			,height      : 300					//	그리드의 높이를 설정 - 숫자 (픽셀단위)/퍼센트/auto
           ,autowidth   : true					// true 설정 시 그리드의 상위 Element의 width로 자동으로 계산됨.
          										// 그리드가 생성될때 처음에만 수행되며 상위 Element width 변경 시 setGridWidth 메소드를 이용하여 조정 가능
           ,jsonReader  : {root:"row", records:"records", repeatitems:false, id:"id"}
           ,rowNum      : 9999					// 한페이지에 보여질 데이터(레코드) 갯수
           ,emptyrecords: "데이터가 없습니다."       	// 레코드가 없을때 보여줄 문구
        });

 

=> 참고시 복사하여 Edit 프로그램에 붙여넣기하여 참고하세요. 티스토리에서는 주석때문에 밀리네요 ㅠ