셀렉트박스(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:'selectmenu', options:{input:select_type, itemcount:3}},
셀렉트박스의 값을 가져오는 방식과 레이블을 가져오는 방식은 아래와 같습니다.
qcell.getCellData(nRow, nCol); 레이블에 할당된 값이 반환됩니다.
qcell.getCellLabel(nRow, nCol); 보여지고 있는 레이블이 반환됩니다.
설렉트박스 변경시 수정 종료를 원하시면 변경 종료 설정을 해주시면 됩니다.
{...,type:'selectmenu', options:{input:select_type, itemcount:3, selectedEnd: true}
변경에 대한 event 설정 및 구현은 아래와 같습니다.
qcell1.bind('selected', fnSelected);
function fnSelected(e, row, col, item){}
selected 이벤트에 넘겨지는 파라미터는 event객체, 행 인덱스, 열 인덱스, 변경정보입니다.

컬럼 이동

컬럼 단위로 옮기는 기능을 제공하고 있으며 컬럼 속성에 move:true 설정해 주면 컬럼을 자유롭게 이동할 수 있습니다.

컬럼 정렬

정렬 기능을 넣고 싶은 컬럼의 속성에 sort:true 를 설정하면 동작합니다.
정렬 순서는 오름차순, 내림차순, 초기화순으로 동작합니다.

컬럼 너비 동적 변경

컬럼의 데이터가 긴 경우 ...으로 표시되며, 이 경우 컬럼의 속성에 resize:true 를 설정하여 원하는때 컬럼의 너비를 줄이거나 늘릴 수 있습니다.
컬럼의 타입을 textarea로 설정하면 클릭 시 textarea로 셀의 데이터가 보여집니다.



값이 보여질 영역