JQGRID 사용

JqGrid는 엑셀형식으로 화면을 처리하기위해서 사용된다.

직접 테이블을 짜는 것보다 JqGrid를 사용하는것이 좀 더 간편할 수 도 있을것 같다.

 

JqGrid 버전과 Jqeury 버전을 맞춰주어야 에러가 발생하지 않는것 같다.

Jqgrid 설치하기 : 네이버 블로그 (naver.com)

Jqgrid 설치하기

사용하기전에 JqGrid가 유료로 정책이 바뀌었기 때문에 버전을 확인하여야한다. 현재 4.7.1 버전까지 무료인거으로 보여진다.

[jqGrid] 버전에 따른 유/무료 라이선스 정책 (1004lucifer.blogspot.com)

[jqGrid] 버전에 따른 유/무료 라이선스 정책

 

사용 예시 참고 사이트: jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드 :: 알짜배기 프로그래머 (tistory.com)

jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드

[JavaScript] jqGrid 사용하기 1 - 플러그인 다운로드 및 환경 설정 :: 나만의 기록들 (tistory.com)

[JavaScript] jqGrid 사용하기 1 - 플러그인 다운로드 및 환경 설정

 

JqGrid 크기 동적 조절하는 방법

$(document).ready(function() {
	var dataArr = [ 
		{ID:"1",javascript:"80",python:"60",jsp:"50",aaaa:10},
		{ID:"2",javascript:"57",python:"80",jsp:"50"},
		{ID:"3",javascript:"90",python:"40",jsp:"85"},
		{ID:"4",javascript:"67",python:"84",jsp:"76"},
		{ID:"5",javascript:"35",python:"83",jsp:"85"},
		{ID:"6",javascript:"90",python:"67",jsp:"56"},
		{ID:"7",javascript:"80",python:"60",jsp:"50"},
		{ID:"8",javascript:"45",python:"67",jsp:"100"},
		{ID:"9",javascript:"90",python:"40",jsp:"68"},
		{ID:"10",javascript:"67",python:"57",jsp:"76"},
		{ID:"11",javascript:"36",python:"83",jsp:"35"},
		{ID:"12",javascript:"76",python:"35",jsp:"98"},
		];
	
	$("#jqGrid").jqGrid({ 
		datatype: "local",
		data: dataArr,
		height: 250,
		width: 500,
		colNames : ['선택','ID','자바스크립트','파이썬','JSP','aaaa'],
		
		colModel:[
			{name: 'checkBox',
			index: 'checkBox',
			width: 70,
			align:'center'
			},
			
			{name:"ID",
			index:"ID", 
			width:15, 
			align:'center', 
			hidden:false 
			}, 
			
			{name : 'javascript', 
			index : 'javascript', 
			width : 70, 
			align : 'left', 
			hidden:false, }, 
			
			{name : 'python', 
			index : 'python', 
			width : 70, 
			align : 'center', 
			hidden:false }, 
			
			{name : 'jsp', 
			index : 'jsp', 
			width : 70, 
			resizable : true,
			align : 'right',
			hidden:false },
			
			{name : 'aaaa', 
			index : 'aaaa', 
			width : 70, 
			resizable : true,
			align : 'right',
			hidden:false }],
			
			//loadtext: "로딩중일때 표시되는 텍스트!", 
			caption: "jQuery Grid: jqGrid 샘플", 
			pager:"#gridpager", 
			rowNum:5,
			multiselect:true,
			mtype:"POST",
            // 크기 자동조절 하기위해서 옵션 선택
			autowidth: true

	});

// jqGrid 동적 사이즈 변경 
	$(window).on('resize.jqGrid', function () {
   		jQuery("#jqGrid").jqGrid( 'setGridWidth', $("#div_Grid").width())
   	})

 

<div class="row" id="div_Grid" style="width: 100% ">
		<div>
		 	<table id = "jqGrid"></table>
		 	<div id="gridpager"></div>
		</div>
	</div>

 

참고 사이트: jqgrid 반응형으로 가로(width) 조절하기 :: 행배 (tistory.com)

jqgrid 반응형으로 가로(width) 조절하기

 

가로 스크롤 치리하기 위한 옵션

shrinkToFit :false

 

https://not-null.tistory.com/31

[jqGrid] 가로 스크롤

 

JqGrid 셀 수정 방법

원하는 컬럼에 속성추가: editable:true

 

바로바로 서버로 보내서 수정하는 방법

JqGrid속성에 아래 속성 추가

cellEdit:true,

//cellsubmit:'remote',
//cellurl:'/test/update',

 

버튼으로 한번에 보낼 경우 아래 속성 추가

cellEdit:true,

cellsubmit : 'clientArray',

 

참고 사이트

http://1004lucifer.blogspot.com/2019/05/jqgrid-cell.html

[jqGrid] Cell 편집 설명

 

특정셀 수정 조절하는 방법

https://pjsprogram.tistory.com/30?category=681991 

jqgrid 특정 셀 editable 유무 설정하기

jQuery("#jqGrid").setColProp('컬럼 name',{editable:false});

 

jqGird 속성 변경 참고 사이트

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=auheia&logNo=220619110428 

jqGrid 관련 기능 정리

 

jqGrid 데모 사이트

http://trirand.com/blog/jqgrid/jqgrid.html

jqGrid Demos

 

컬럼 색상 변경

 col = [컬럼 name으로 배열 선언];
	        	   
for(var i=0; i<col.length; i++){
// 별도로 사용가능
	   $("#jqGrid").jqGrid('setLabel',col[i], '', {'background':'#D4F4FA'});   
   }

 

jqGrid 데이터 가져오기

jqGrid 데이터를 가져오기 위해서는 rowid 값을 가져와야 한다.

마지막 열 ID 값을 가져오는 코드

var rowid = $("#jqGrid").getGridParam("selrow");

다중 선택 열 ID 값을 모두 가져오는 코드

var rowid2 = $("#jqGrid").getGridParam("selarrrow");

선택한 rowData를 가져오는 코드

var selRowData = $("#jqGrid").getRowData(rowid);

https://mine-it-record.tistory.com/285

[JavaScript] jqGrid 사용하기 3 - 선택한 row의 id 및 값(RowData) 가져오기 (feat. selrow, selarrrow, getRowData)

 

jqGrid에서 다중선택 기능을 이용하여 배열형태로 id값을 가져와서

해당 id에 해당하는 rowData를 가져오는 방법

// jqGird는 jqGrid를 가져올때 사용되는 table ID 값

//체크한 row의 id값 가져오기 배열형태
var rowid2 = $("#jqGrid").getGridParam("selarrrow");

// 반복문을 이용해서 Id에 해당하는 Row data값을 가져온다.
// 배열선언 (하나씩 불러와서 배열에 저장시키기 위해)
var array = new Array();
	for(var i=0; i <= rowid2.length-1; i++){
		//console.log(rowid2[0]);
		//console.log(i);
        // Id에 해당하는 rowData를 가져온다.
		var selRowData = $("#jqGrid").getRowData(rowid2[i]);
		//console.log(selRowData);
		// 가져온 데이터를 배열에 저장
		array.push(selRowData)
	} 
// 확인
console.log(array);
// json형태로 변환하여 확인
console.log(JSON.stringify(array));

 

 

JqGrid컬럼에 하이퍼링크를 걸때 서버에서 받아온 파라미터를 전달 받는 방법

원하는 컬럼에 fomatter 속성을 부여해준다.

참고 사이트: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=jaeik714&logNo=140197196541 

[jQuery] jqGrid - formatter 옵션으로 컬럼 내용 변경 (rowdata 링크, rowdata 이미지)

사용한 코드

// 원하는 JqGrid 컬럼에 fomatter 속성을 부여하고 함수를 설정해준다.
{          width:200,     name:'REAL_ATTACH_FILE',              index:'REAL_ATTACH_FILE',                                          	align:"center",  	    sortable:true, 	editable:false, formatter:cutom_link},

// 선언한 함수 정의
function cutom_link(cellvalue, options, rowdata, action){
		var id = cellvalue;
		var name = rowdata.PO_LINE_ID;
		var rowdata = rowdata.FILE_ID;
		if(rowdata == null){
			console.log("aaddd");
			
			var html = '<SPAN class="btn_pack btn_white_01_small small" style="vertical-align:bottom"><A href="javascript:popupOpen(' + $.trim($(this).parent().attr('id')) + ');">첨부</A> </SPAN>';	
			
		} else {
		
			console.log("rowdata: " + rowdata);
			console.log("aaddd55555");
			var html = '<a href="aaaa';
			html += '?id=' + id;
			html += '&line_id=' + name;
			html += '&file_id=' + rowdata;
			html += '">' + id + '</a>';
		}
		
		return html;

코드를 설명하면 해당 컬럼에 파일 id가 존재하면 파일명을 컬럼에 뿌려주고 없을 경우 버튼을 생성하여 업로드할 수 있는 기능을 만들었다.