jqGrid dropdown (select, combobox) in filterToolbar 콤보박스 추가방법

 

jqGrid dropdown (select, combobox) in filterToolbar 콤보박스 추가방법

 

 

jqGrid 에 filter toolbar 에 아래와 같이 콤보박스를 추가하는 방법을 알아보도록 하겠습니다.

 

우선 저는 DB에서 가져온 데이터를 jqGrid에서 읽을 수 있는 형태로 만들어 주었습니다.

(key : value, key : value 의 형태)

 

<script>
const comboData = {
    rightCombo : {},
    positionCombo : {},
    departmentCombo : {}
} 
$(function){
    getOprCombo();
    setGrid();  //이 함수는 생략.
}); 
function getOprCombo(){
    const url = '${ctx}/opr/getOprCombo.do';
    AF.ajaxBasic(url, "", function(returnData){
        const resultCode = returnData.resultCode;
        if (resultCode==200){
            comboData.rightCombo = makeObj(returnData.rightRow);
            comboData.positionCombo = makeObj(returnData.positionRow);
            comboData.departmentCombo = makeObj(returnData.departmentRow);
        }else if(resultCode==300){
            alert(returnData,resultMsg);
        }
    });
}
function makeObj(data){
    const value = {};
    if (data.length>0){
        for(item in data){
            value[data[item].cdId] = data[item].cdNm;
        }        
    }
    return value;
}
</script>

 

위와 같은 방식으로 데이터를 가져온 후 colModel 에 아래와 같은 옵션을 추가해 주면 됩니다.

 

{name:'oprPosition', align:'center',width:'50px',editable:true, edittype:'select', formatter:'select',
    editoptions : {value:comboData.positionCombo},
    stype : 'select',
    searchoptions : {value:comboData.positionCombo}},
{name:'oprDepartment', align:'center',width:'50px',editable:true, edittype:'select', formatter:'select',
    editoptions : {value:comboData.departmentCombo},
    stype : 'select',
    searchoptions : {value:comboData.departmentCombo}},
{name:'oprRight', align:'center',width:'50px',editable:true, edittype:'select', formatter:'select',
    editoptions : {value:comboData.rightCombo},
    stype : 'select',
    searchoptions : {value:comboData.rightCombo}},

 

stype과 searchoptions 가 filtertoolbar에 콤보박스를 추가하는 옵션이고

edittype과 editoptions 이 등록/수정 팝업에서 콤보박스를 추가하는 옵션입니다.

formatter 옵션에 select 를 준 것은 combobox의 key 값이 아닌 value값을 보여주기 위해서 입니다.

 

이렇게 하고 나면

아래와 같이 해당 컬럼들이 콤보박스로 표출 되는 것을 보실 수 있습니다.

 

 

jqGrid의 기타 기능은 아래의 Link 를 참고하세요.

 

● dataType json 데이터 조회

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회

 

● dataType json 페이징 설정

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 2부 페이징 설정

 

● 테이블 헤더 클릭 정렬

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 3부 헤더 정렬

● 멀티조건 정렬

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 4부 멀티 조건 조회

 

● dateRangePicker 적용

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 5부 기간 조회 dateRangePicker설정

 

● CUD 기능 구현

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 6부 CUD 기능 구현

 

● 기타

Link : jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드

 

 

추천 그리드 ▼

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

[VanilaJS Free Grid library] Aljjabaegi Grid Grand Open