jQGrid - (checkbox) 생성 및 제어

1. multiselect 옵션 사용

jqGrid에서 지원하는 multiselect 옵션을 사용합니다.

체크박스가 생성되는 컬럼 헤더부분에 전체 선택을 할 수 있는 체크박스도 생성됩니다.

jQuery().ready(function(){
    /*그리드 선언 시작*/
    jQuery("#Grid").jqGrid({
        url:'/control/getGridList.do',
        datatype:"json", //get 데이터 타입 xml, json, local....
        heigth:300,
        colNames:['학교','성명','수학','국어','영어','총점','key'],
        colModel:[
            {name:'school', index:'school', width:120, align:'center'},
            {name:'name',     index:'name',    width:120, align:'center'},
            {name:'math',    index:'math',     width:100, align:'right'},
            {name:'lang',    index:'lang',     width:100, align:'right'},
            {name:'eng',     index:'eng',      width:100, align:'right'},
            {name:'total',   index:'total',    width:100, align:'right'},
            {name:'key',    index:'key',     hidden},
        ],
        mtype:"POST",    //요청방식 get/post
        multiselect:true
    });
});

아래 소스는 버튼 클릭 시 체크된 행의 성명을 가지고 오는 방법입니다.

multiselect 옵션을 사용하면 체크 시 그리드 내부 row id들을 반환받을 수 있습니다.

그 id를 통해 원하는 데이터를 가지고 올 수 있습니다.

function buttonEvent(){
    var ids = jQuery("#Grid").jqGrid('getParam','selarrow'); //체크된 row id들을 배열로 반환
    
    for(var i=0; <ids.length; i++){
        var rowObject = $("#Grid").getRowData(ids[i]); //체크된 id의 row 데이터 정보를 Object 형태로 반환
        var value = rowObject.name; //Obejcy key값이 name인 value값 반환
        alert(value);
    }
}

2. colModel 옵션 formatter를 이용한 체크박스 생성

colModel에 formatter 옵션을 적용하게 되면 해당 데이터를 가공해서 보여줄 수 있습니다.

formatter에 html input checkbox 양식을 만들어 체크박스를 생성하면서

name이나 value 속성에 사용자가 원하는 구분값을 줄 수 있습니다.

multiselect 옵션과는 다르게 colName이 필요합니다. colName은 전체선택 대신 헤더이름이 표시됩니다.

jQuery().ready(function(){
    /*그리드 선언 시작*/
    jQuery("#Grid").jqGrid({
        url:'/control/getGridList.do',
        datatype:"json", //get 데이터 타입 xml, json, local....
        heigth:300,
        colNames:['체크박스','학교','성명','수학','국어','영어','총점','key'],
        colModel:[
            {name:'checkBox', index:'checkBox', width:70, align:'center'},
            {name:'school', index:'school',    width:120, align:'center'},
            {name:'name',     index:'name',    width:120, align:'center'},
            {name:'math',    index:'math',     width:100, align:'right'},
            {name:'lang',    index:'lang',     width:100, align:'right'},
            {name:'eng',     index:'eng',      width:100, align:'right'},
            {name:'total',   index:'total',    width:100, align:'right'},
            {name:'key',    index:'key',     hidden},
        ],
        mtype:"POST",    //요청방식 get/post
        
    });
});
 
function checkBox(cellvalue, options, rowObject){
    var name = rowObject['name'];
    var str = "<input type=\"checkbox\"name=\"chk\"value="+name+">";
    
    return str;
}

formatter로 체크박스 생성시 체크된 행의 성명을 가지고 오는 방법입니다.

multiselect와는 다르게 체크박스에 사용자가 임의의 name 값을 주고

each문을 통해 체크박스 엘리먼트를 찾아 체크된 데이터를 가지고 오는 방식입니다.

function buttonEvent(){
    $('[name=chk]').each(function(index,result){
        if(result.checked){
            alert(result.value);
        }
    });
}

출처:http://isprogramming.co.kr/13