jqGrid 노트

jqGrid 란 ?

jqGrid는 jQuery를 이용한 Grid Plugin 이다. 버전에 따라 유료/뮤료 여부가 갈리니 주의해서 사용해야 한다. (4.7 이하 무료) 여기선 무료버전의 마지막인 4.7 기준으로 사용해본 코드들을 정리해보려 한다.

그리드 생성

/**
 * 아이디가 list인 dom에 jqgrid 생성
 */
$("#list").jqGrid({
            datatype: "local",
            data : jsonData,
            colNames:['id', 'OSS Name','Nickname','Version','Declared License','Detected License','Copyright',
                'Homepage','Download URL',  'Summary Description', 'Attribution','Comment', 'Status'],
            colModel: [
                { name: 'id', 	index: 'id', width: 75, key:true, hidden: true, editable:false},
                { name: 'ossName', index: 'ossName', width: 200, align: 'left', editable:false},
                { name: 'ossNicknames', index: 'ossNickNames', width: 200, align: 'left', editable:false},
                { name: 'ossVersion', index: 'ossVersion', width: 75, align: 'left', editable:false},
                { name: 'declaredLicenses', index: 'declaredLicenses', width: 300, align: 'left', editable:false},
                { name: 'detectedLicenses', index: 'detectedLicenses', width: 300, align: 'left', editable:false},
                { name: 'ossCopyright', index: 'copyright', width: 200, align: 'left', editable:false},
                { name: 'homepage', index:'homepage', width: 250, align: 'left', editable:false},
                { name: 'downloadLocation', index:'downloadLocation', width: 150, align: 'left', editable:false},
                { name: 'summaryDescription', index:'summaryDescription', width: 150, align: 'left', editable:false},
                { name: 'attribution', index:'attribution', width: 150, align: 'left', editable:false},
                { name: 'comment', index:'comment', width: 150, align: 'left', editable:false},
                { name: 'status', index:'status', width: 150, align: 'left'}
            ],
            viewrecords: true,
            rowNum: ${ct:getConstDef("DISP_PAGENATION_DEFAULT")},
            rowList: [${ct:getConstDef("DISP_PAGENATION_LIST_STR")}],
            autowidth: true,
            gridview: true,
            height: 'auto',
            pager: '#pager',
            autoencode: true,
            editurl:'clientArray',
            recordpos:'right',
            toppager:true,
            loadonce:false,
            cellsubmit : 'clientArray',
            ignoreCase: true,
            multiselect: true,

            /**
             * hooks
             */
            
            /** when page load complete*/
            loadComplete: function(data) {
                
            },
            /** when double click row */
            ondblClickRow: function(rowid,iRow,iCol,e) {

            },
            /** select or not each row */
            onSelectRow: function(id){

            },
            /** select or not all rows */
            onSelectAll: function(aRowids, status) {
                
            },
            /** when move to page */
            onPaging: function() {

            }
});

• datatype: 그리드를 채우는 데이터 형식 (xml, json, local, javascript, function)
  • local: array 데이터
  • json: jsonString, xml: xmlString
• data: grid에 로드할 초기 데이터를 지정할수 있다.
• cellsubmit
  • clientArray: cell 편집후 local에서만 저장
• multiselect: 여러 행을 선택할수 있는 옵션

jqGrid 함수

여기서는 아이디가 ‘list’ 인 dom에 jqGrid를 생성했다고 가정한다.

현제 페이지에서만 사용할수 있는 함수

$(”#list”).getRowData();

• 현제 페이지의 전체 아이템들을 가지고 온다.
• 속성들은 항상 문자열형태로 뽑혀 나온다.
  • null, undefined는 빈문자열
  • 리스트는 “a,b,c” 의 형태의 문자열로 뽑혀나온다.
• 모든 페이지의 아이템들을 가지고 올수없다.

$(”#list”).getRowData(id);

• 현제페이지의 id에 대응하는 아이템을 가지고 온다.
• 속성들은 항상 문자열형태로 뽑혀 나온다.
  • null, undefined는 빈문자열
  • 리스트는 “a,b,c” 의 형태의 문자열로 뽑혀나온다.
• 다른 페이지의 아이템들을 가지고 올때는 부적절하다.

$('#list').jqGrid('addRowData', id, data)

• id와 함께 data를 현제페이지에 append 한다.

• 이때 data에 id속성이 같은 값으로 설정되어있어야 한다.

    // example
    data.id = 2
    $('#list').jqGrid('addRowData', 2, data);
  

$(”#list”).jqGrid("getGridParam", "selarrrow")

• 현재 페이지에서 선택된 아이템들을 반환한다.
• multiselect 가 활성화되어 있어야 한다.
• 다른페이지로 전환시 현제 페이지에서 선택된 아이템들이 초기화된다. 따라서 선택된 데이터를 유지하기 위해서 직접 코딩이 필요할수도 있다.
• 상용버전이나 최근 오픈소스버전에서 개선된것으로 보여진다.

$("#list").jqGrid("getDataIDs")

• 현재 페이지의 아이템들의 id값들을 반환한다.

$("#list").jqGrid("setSelection", id)

• 현제페이지의 id와 일치하는 아이템을 선택한다.
• multiselect 가 활성화되어 있어야 한다.

$("#list").jqGrid('editRow', id);

• 아이템을 편집모드로 전환한다. (각 속성을 수정할수 있다.)
• editable이 true로 설정된 속성들에 한해 수정이 가능하다.

$("#list").jqGrid('saveRow', id);

• 편집하던 아이템을 저장한다.

전체 페이지 대상으로 적용되는 함수

$('#list').jqGrid('getGridParam')

• grid의 config(속성들과 설정된 함수)들을 가져올수 있다.
• $('#list').jqGrid('getGridParam', 'data') 로 모든 아이템들을 가져올수 있다.

$('#list').jqGrid('getLocalRow', id)

• id에 해당하는 아이템을 가지고 온다.
• 아이템의 속성들의 datatype을 그대로 유지하고 있다. (null, undefined, 리스트)

$("#list").jqGrid('clearGridData');

• grid의 데이터를 모두 지운다.

$("#list").jqGrid('reloadGrid');

• grid를 새로고침한다.
• $("#list").jqGrid('reloadGrid',[{ page: 1}]) 를 통해 첫번째 페이지로 이동시키는것도 가능하다.