jqGrid 에서 셀 속성 변경하기 - How to change cell attribute with jqGrid

jqGird 는 Web 을 개발하는 데 있어서 유명하고 편리한 라이브러리 중 하나입니다. 기본적으로 jqGrid 는 무료로 사용할 수 있고, 복잡하지 않은 설정을 지원하며, 오랜 기간동안 개선되어 온 결과 많은 기능과 customizable 한 것들이 많이 있습니다. 여기서는 그 중에서 특정 셀(cell)의 속성을 어떻게 변경하는지 살펴보고자 합니다. 

 

이 포스트는 jqGrid 를 조금이라도 사용할 수 있는 개발자분들을 대상으로 작성되었습니다. 

 

jqGrid 에서 특정 조건에 따라서 컬럼, 즉 cell의 attribute를 변경하고자 할 때에는 다음의 두 항목을 이용합니다. 물론 이 두 항목 모두 jqGrid Options 중에서 colModel 에 선언하는 형태입니다. 

 

cellAttr

함수 형태로서, 해당 셀의 속성을 변경하고자 할 때에 사용합니다. 가장 강력한 형태라고도 할 수 있는데, 여기서 특정 조건일 때, 아니면 숫자에 대해서 콤마(,)를 찍어준다거나, 어떤 조건일 때 스타일을 변경하는 등의 작업을 할 수 있습니다. 

 

넘어오는 파라미터는 다음과 같으며, 기본적으로 이 함수는 선언되어 있지 않습니다. (data에서 넘어온 글자 그대로 표현합니다)

 

rowId - 해당 셀이 위치하는 row Id 입니다.
val - 이 셀에서 보여지는 값을 의미합니다. 이 값은 아래에서 설명할 formatter를 통해서 넘어온 값이라고 할 수 있습니다. 
rawObject - 해당 셀이 포함된 행의 원본 데이터를 의미합니다. 
cm - 모든 프로퍼티 정보를 가지고 있습니다. 

rdata - 가장 많이 사용하는 파라미터로서, 해당 row를 가져옵니다. 예를 들어, 이 셀의 값(val)이 100이 넘는데, 이 row의 ID 컬럼이 S로 시작한다면 이 셀을 빨간색으로 칠해! 라고 할 때에 유용합니다. 즉, 다른 셀의 값을 참조하고자 할 때에 아주 유용하게 사용됩니다. 

 

formatter

이 속성 역시 colModel에 지정하는데, 이건 셀에 표현될 글자 자체에 초점을 둡니다. 앞서 살표본 cellAttr 의 경우 셀 자체 html 속성에 대한 부분을 수정하려는 목적이 강하다면 formatter는 cell에 포현되는 문구 자체에 초점을 둡니다. 3자리마다 콤마(,)를 찍어준다거나, 100, 200 등의 숫자에 대해서 type 을 변경해서 보여주거나 하는 등으로 값을 변경하고자 할 때에 사용하면 좋습니다. 

 

참고

위 속성 이외에도 jqGrid Documentation 에 가보면 다양한 속성들이 많이 있습니다. 단순이 개발자도구를 열어, css를 수정해 가며 화면을 수정하기 보다는 조금 더 정확하고 버전 업그레이드를 보장받을 수 있는 이런 함수들을 자주 활용하는 것이 좋습니다. 

 

사용법 예제 

$( function() {
    $('#list').jqGrid({
	    //url: 'TrControl?cmd=getSumAmtID',
        datatype: 'json',
        colModel: [
            {name: 'id', index:'id', width: '100', align: 'left', cellattr:idColorFmt},
            {name: 'nm', index:'nm', width: '150', align: 'left', cellattr:idColorFmt},
            {name: 'amt', index:'amt', width: '150', align: 'right', formatter:numFormat, cellattr:idColorFmt}
        ],
        colNames : [ '아이디', '계정명', '금액'],
        caption: '계정별 집계',
        height: '100%',
        treeGrid: true,
        ExpandColClick: true,
        treeReader: {
	        level_field:        "level",
	        parent_id_field:    "upid"
	    }
	});
});

// table cell의 attribute 설정. Style 등등
function idColorFmt( rowId, tv, rawObject, cm, rdata) {
    switch( rawObject.level) {
        case 1:
            return 'style="background-color:#58D3F7"';
            break;
        case 2:
            return 'style="background-color:#E0F2F7"';
            break;
        case 3:
            return 'style="background-color:white"';
            break;
        default:
    }
    return  "";
}

// 글자 포멧팅
function numFormat( cellvalue, options, rowObject ){
    return numberWithCommas(cellvalue)
}

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

 

출처 및 참고

https://m.blog.naver.com/PostView.nhn?blogId=rakeion&logNo=120208417974&proxyReferer=https%3A%2F%2Fwww.google.com%2F

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options