출처 | https://oscarotero.com/jquery/

🧶 이번 시간에는 jqgrid에 대한 기능을 사용해보려 한다.

틀 고정 기능

function makeTable(id) {
    $("#" + id).jqGrid({
        url: apiURL,
        datatype: "json",
        mtype: "get",
        colNames: [ // 화면에 출력 될 colName
            'ID',
            '국가중점여부',
            '기관분류',
            '등록기관',
            '등록일',
            '마지막수정일',
            '목록명',
            '목록타입',
            '분류체계',
            '표준데이터여부'
        ],
        colModel: [
            { name: 'ID', index: 'ID', width: 50, align: 'center', frozen: true },
            { name: '국가중점여부', index: '국가중점여부', width: 90, align: 'left' },
            { name: '기관분류', index: '기관분류', width: 90, align: 'left' },
            { name: '등록기관', index: '등록기관', width: 90, align: 'right' },
            { name: '등록일', index: '등록일', width: 90, align: 'right' },
            { name: '마지막수정일', index: '마지막수정일', width: 90, align: 'right' },
            { name: '목록명', index: '목록명', width: 90, align: 'right' },
            { name: '목록타입', index: '목록타입', width: 90, align: 'right' },
            { name: '분류체계', index: '분류체계', width: 90, align: 'right' },
            { name: '표준데이터여부', index: '표준데이터여부', width: 90, align: 'right' },
        ],
        pager: '#pager',
        rowNum: '10',
        multiselect: true,
        rownumbers: true, // row의 숫자를 나타낸다
        sortable: true, // colmodel에서 sortable 기능 사용하려면 true로 설정 
        jsonReader: {
            repeatitems: false,
            root: function (obj) { return obj.data },
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.data.length; }
        },
        gridComplete: function () {
            $("#grid").jqGrid('setFrozenColumns');
        }
    });
}

• jqGrid에서 특정 열을 고정 하려면 setFrozenColumns 메소드를 사용한다.

• 그 전에 각 열의 frozen속성을 true로 설정하고, 그리드 초기화 후 setFrozenColumns 를 호출 해야 된다.

• 고정 시킬 컬럼의 colModel 옵션에 frozen : true를 적용 시킨다.

• 그리드가 화면에 로드된 이후 jQuery로 그리드를 호출해서 setFrozenColumns 기능을 사용한다.

📌그렇다면 gridComplete가 실행되는 시점은 언제일까?

• gridComplete : 그리드에서 모든 데이터가 로드되고 다른 프로세스들이 끝난 후 발생한다.

---

Multiselect를 이용한 RowData 삭제 기능

Multiselect를 이용해서 RowData 삭제 기능을 구현하기 전에 선택된 row의 id값 및 데이터를 가져오는 방법에 대해 알아보자.

제일 간단한 방법은 jqGrid의 event option을 설정해서 사용하면 된다. onSelectRow 옵션을 사용하게 되면 rowData를 가져올 수 있다.

        onSelectRow : function (rowId, status,e) { // 해당 row를 클릭 했을 때 발생하는 이벤트 + rowdata로 받아서 map처럼 컬럼값을 key로 하여서 값을 가져오면 된다.
			$("#grid").jqGrid("getRowData",rowId);
			$("#grid").getRowData(rowId);
		}

onSelectRow는 콜백함수이며,

• rowId : 선택된 행의 ID

• status : 선택된 행의 상태

  • true : 행이 선택됨

  • false : 선택 취소

• e : 이벤트 객체

이후에 getRowData가 어떤 메소드인지 jqGrid API 를 참고하면 된다.

요약하면, 이름에서부터 알 수 있다시피 getRowData 메소드는 요청된 RowId의 데이터 객체를 반환한다.

rowId로 지정된 행의 데이터를 name : value 객체 형태로 반환한다.

• name = colModel
• value = 행의 해당 열에 있는 데이터 값

이렇게 rowId로 지정된 행의 데이터를 가져 올 수 있다.

스크립트로 rowId 가져오기 (selrow, selarrrow)

jqGrid 옵션을 사용하지 않고, 먼저 선택 후 나중에 후 처리를 하고자 할 때 스크립트로만 사용하면 된다.

"먼저 선택 후 나중에 후 처리" 라는 말의 뜻은 그리드에서 행을 먼저 선택하고 선택된 행에 대해 나중에 어떤 작업을 수행하고자 할 때 를 의미한다.

jqGrid getGridParam(name) : name에 해당하는 파라미터 값을 반환해주는 메소드다.(jqGrid API)

selrow : 선택한 행의 ID를 가지고 옴 + 여러 행이 있을 때는 반드시 마지막에 찍은 행의 ID를 가져옴

$("#Grid1").getGridParam("selrow") : [1] 처음꺼를 찍었을때 1이란 값이 들어감

selarrrow : 여러 가지 행을 선택 했을 때 각각의 id값을 가져옴

$("#Grid1").getGridParam("selarrrow") : 여러개를 찍었을시에 [1,2,3] 이런방식으로 데이터가 들어감

Multiselect를 이용해서 RowData 삭제 기능을 구현해보자.

원래 소스 구조는 url = apiURL를 통해서 받아온 값을 그리드로 바로 그렸지만, api 호출 하는 부분을 함수로 설계해서 그 받아온 값을 깊은 복사를 한 뒤 그리드를 그리려고 한다.

그 때, jqGrid의

버튼 이벤트 핸들러

$("#delete").click(function () {
	deleteRow(); // delete 버튼을 클릭하면 -> deleteRow 함수 호출
})

api 호출 함수

function apiCall(){
	$.ajax({
		url : apiURL,
		method : 'GET',
		dataType : 'json', // 서버에서 어떤 데이터를 받을 것인지 의미함.
		success: function(response) {
			// 받아온 데이터를 깊은 복사로 새로운 객체를 생성한다.
			originalData = $.extend(true,[],response);
			makeTable('grid',originalData); // 복사된 데이터로 jqGrid 생성
		}
	})
}

- 여기서 extend : true로 설정하면 깊은복사가 된다.

grid 그리는 함수

function makeTable(id,data) {	
    $("#" + id).jqGrid({
        data : data ,
        datatype: "local",
        colNames: [ // 화면에 출력 될 colName
            'ID',
            '국가중점여부',
            '기관분류',
            '등록기관',
            '등록일',
            '마지막수정일',
            '목록명',
            '목록타입',
            '분류체계',
            '표준데이터여부'
        ],
        colModel: [
            { name: 'ID', index: 'ID', width: 50, align: 'center', frozen: true },
            { name: '국가중점여부', index: '국가중점여부', width: 90, align: 'left' },
            { name: '기관분류', index: '기관분류', width: 90, align: 'left' },
            { name: '등록기관', index: '등록기관', width: 90, align: 'right' },
            { name: '등록일', index: '등록일', width: 90, align: 'right' },
            { name: '마지막수정일', index: '마지막수정일', width: 90, align: 'right' },
            { name: '목록명', index: '목록명', width: 90, align: 'right' },
            { name: '목록타입', index: '목록타입', width: 90, align: 'right' },
            { name: '분류체계', index: '분류체계', width: 90, align: 'right' },
            { name: '표준데이터여부', index: '표준데이터여부', width: 90, align: 'right' },
        ],
        pager: '#pager',
        rowNum: '10',
        multiselect: true,
        rownumbers: true, // row의 숫자를 나타낸다
        sortable: true, // colmodel에서 sortable 기능 사용하려면 true로 설정 
        jsonReader: {
            repeatitems: false,
            root: function (obj) { return obj },
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.length; }
        },
        onSelectRow : function (rowId, status,e) { // 해당 row를 클릭 했을 때 발생하는 이벤트 + rowdata로 받아서 map처럼 컬럼값을 key로 하여서 값을 가져오면 된다.
            $("#grid").jqGrid("getGridParam","selrow");
            $("#grid").getGridParam("selrow");
        }
    });
}

• datatype : 'local' 로 설정후에 ajax 를 실행하면 데이터를 불러온다

deleteRow

• 선택된 행 id값을 가져와서 originalData에서 splice를 선택된 rowId 이용해 삭제한다.

• 지금은 백앤드 부분을 고려하지 않고 공공 API를 사용 했기 때문에 이런 방식으로 진행 했다.

function deleteRow() {
    // 멀티셀렉트에 대한 선택된 행만 가져오기 -> id 값 가져오기
    var rowIds = $("#grid").getGridParam('selarrrow'); // 멀티셀렉트에서 선택된 행이 selarrrow일 수 있기 때문에 selarrrow 사용
    if (!rowIds || rowIds.length == 0) {
        return false;
    }

    // 선택된 id와 일치하는 데이터를 originalData에서 삭제
    for (var i = 0; i < rowIds.length; i++) {
        var rowId = rowIds[i];
        originalData.splice(rowId,1);
    }

    // 삭제된 데이터로 jqGrid를 다시 생성
    $("#grid").jqGrid('clearGridData');
    $("#grid").jqGrid('setGridParam', { data: originalData });
    $("#grid").trigger('reloadGrid');
}