SMART datagrid v1.4 > Examples
기본적으로 사용자는 데이터셀 영역을 마우스 드래깅해서 지정한 영역을 선택 상태로 지정할 수 있다. 이 때 DisplayOptions.selectStyle로 지정된 선택 형태에 따라 선택 영역이 지정된다.
갯수 = 0
합계 = 0
평균 = 0
RowIndicator.selectable이 true면 사용자는 RowIndicator 영역을 마우스 드래깅해서 행 선택을 할 수 있다.
GridHeader.selectable이 true면, shift나 ctrl 키를 누른 상태에서 컬럼 헤더 영역을 드래깅하면 컬럼 선택을 할 수 있다.
또, 사용자는 shift 키를 누른 상태에서 방향키 이동으로 선택 영역을 변경할 수 있다.
마우스나 키보드 선택 중에는 GridBase.onSelectionResized, GridBase.onSelectionChanged 이벤트가 발생하고, 선택 완료되면 GridBase.onSelectionEnded 이벤트가 발생한다.
현재 선택된 행들은 getSelectedRowIndices로 알 수 있고, 선택 아이템은 getSelection으로 가져올 수 있다.
선택한 아이템의 데이터를 getSelectionVal 함수를 통해 데이터에 대한 통계값을 확인할 수 있으며, selectionValCallback 설정을 통해 선택한 아이템의 데이터를 제어하여 콜백 함수를 정의할 수 있다. (1.4.7 버전 이상)
grdMain.setSelectionValCallback(function(valList) {
var result = {};
result.cnt = 0;
result.sum = 0;
for (var i = 0; i < valList.length; i++) {
if(!isNaN(parseInt(valList[i].value))){
result.cnt ++;
result.sum += parseInt(valList[i].value);
}
}
result.avg = result.sum / result.cnt;
return result;
});
grdMain.onSelectionEnded = function (grid) {
var rows = grid.getSelectionVal();
$('#txtCnt').text(rows.cnt);
$('#txtSum').text(rows.sum);
$('#txtAvg').text(rows.avg);
};
SelectionItem 설명에서 선택 영역에 대한 자세한 설명을 참조한다.
기본적으로 선택 영역 내에서 TAB, ENTER 키로 셀 이동을 할 때 영역을 벗어나지 않고 되돌아 간다. EditOptions.moveInSelection 속성으로 이동 방식을 지정할 수 있다.
선택 영역의 채우기 및 경계선 색상은 GridBody.selectionStyles로 지정한다.
grdMain.body().setSelectionStyles({
background: "#100000ff",
border: "#dd0000ff,2px"
});