jqGrid checkbox Multiselect 그리드 멀티선택 체크박스 추가방법

 

jqGrid checkbox Multiselect 그리드 멀티선택 체크박스 추가방법

 

위의 이미지와 같이 그리드 제일 앞 열에 체크박스를 추가하는 방법에 대해 포스팅 하겠습니다.

 

function makeTable(id, array, title){
    $("#"+id).jqGrid({
        datatype: "local",
        height: 200,
        width : 300,
        colNames:['장비ID','장비명'],
        colModel:[
            {name:'equipId', align:'center',sortable:false, width:'50px'},
            {name:'equipNm', align:'left',sortable:false},
        ],
        multiselect : true
    });
    const jsonString = JSON.stringify(array);
    const json = JSON.parse(jsonString);
    for(var i in json){
        $("#"+id).jqGrid('addRowData',i+1,json[i]);
    }
}

 

위의 소스만 보시면 간단히 multiselect 옵션만 true 로 해주시면

자동으로 체크박스가 추가되게 되는데요,

 

 

 

 

체크된 데이터를 가져오기 위해서는

행의 데이터를 object 형태로 추출해

원하는 값을 가져오시면 됩니다.

 

아래의 소스를 보도록 하죠.

 

function getEquipArray(id, array){
    var ids = $("#"+id).jqGrid('getDataIDs');
    for(var i=0; i<ids.length; i++){
        if($("input:checkbox[id='jqg_"+id+"_"+ids[i]+"']").is(":checked")){
            var rowObject = $("#"+id).getRowData(ids[i]);
            console.log(rowObject);
            var value = rowObject.equipId;
            array.push(value);
        }
    }
}

 

어떠한 이벤트 발생 시에 그리드에 체크된 데이터의 키값을

배열어 저장하는 함수입니다.

위 코드 중간에 있는 console 의 결과값은 아래와 같습니다.

 

2번째 행에서 총 행의 갯수를 받아온다음

행의 갯수만큼 반복하면서

체크박스가 선택되었다면 (line 4)

getRowData로 행의 데이터를 object로 받은 다음(line 5)

원하는 데이터를 추출하는 방식입니다. (line 7)

 

이렇게 하면 그리드에서 체크된 데이터를 추출해 활용할 수 있습니다.

 

추천 그리드 ▼

Link : https://aljjabaegi.tistory.com/593

[VanilaJS Free Grid library] Aljjabaegi Grid Grand Open