셀렉트박스(selectbox, selectlist) 활용

셀렉트박스(selectbox, selectlist)
기업규모와 관할지방청의 데이터를 코드 기반으로 구성한 샘플입니다.
구성 방식은 아래와 같습니다. 먼저 셀렉트박스로 설정될 컬럼에 대한 정보를 만들어 놓습니다.
var select_type = [{'label':'과학진흥연구소','value':1},
{'label':'국가기관 등 연구소','value':2},
{'label':'대기업부설연구소','value':3}]
그리고 큐셀(그리드)를 생성할 때 해당 컬럼에 정보를 설정해 주면 됩니다.
{key: 'bizScale', width:'15%', title: ['기업규모'], styleclassname: {"data": "align-center"}, type: "input", type:'selectmenu', options:{input:select_type, itemcount:3}},
셀렉트박스의 값을 가져오는 방식과 레이블을 가져오는 방식은 아래와 같습니다.
qcell.getCellData(nRow, nCol); 레이블에 할당된 값이 반환됩니다.
qcell.getCellLabel(nRow, nCol); 보여지고 있는 레이블이 반환됩니다.

컬럼 정렬

정렬 기능을 넣고 싶은 컬럼의 속성에 sort:true 를 설정하면 동작합니다.

셀렉트 박스 변경 시 코딩

셀렉트 박스 변경 시 다른 컬럼의 값을 자동으로 바꾸는 코드
그리드의 값이 변경되는 이벤트를 바인딩
qcell.bind('valuechanged', qcellChange);
먼저 해당 컬럼이 바뀌었는지 얻고, 해당 로우를 얻어서 원하는 코드를 실행
function qcellChange(){
var qcell = QCELL.getInstance('qcell'),
change = qcell.getStates();
var checkCol=2, targetCol3 =3, targetCol4=4, targetCol6=6;

var changedCol = qcell.getIdx('col', 'valuechanged');
var changedRow = qcell.getIdx('row', 'valuechanged');
alert(changedCol+"번째 컬럼이 변경됨");

if(changedCol==checkCol) {
qcell.setCellData(changedRow, targetCol3, qcell.getCellLabel(changedRow, changedCol));
qcell.setCellData(changedRow, targetCol4, "서울특별시......");
qcell.setCellData(changedRow, targetCol6, 4);
qcell._cellValue(0,1, "헤더명 변경");
}
}

헤더명 변경 및 헤더명 값 반환하기

행과 열을 활용하여 헤더명 변경
qcell.setHeaderCellValue(0,1,'헤더명 변경1');

행과 셀의 컬럼 키 값을 활용하여 헤더명 변경
qcell.setHeaderCellValueEx(0,'index','헤더명 변경2');

2번째 컬럼을 변경하면 1번째 헤더의 컬럼명이 바뀜
qcell._cellValue(0,1, "헤더명 변경3");

행과 반환할 컬럼의 키 값을 활용하여 헤더명 값 반환하기
qcell.getHeaderCellValueEx(0, 'index');

툴팁

소재기에 툴팁 옵션을 true로 해 놓아서 마우스 포인터를 소재지에 올리면 툴팁이 나옵니다.
tooltip: true



값이 보여질 영역