SMART datagrid v1.4 > Examples

Back  Forward

Selection  Example

기본적으로 사용자는 데이터셀 영역을 마우스 드래깅해서 지정한 영역을 선택 상태로 지정할 수 있다. 이 때 DisplayOptions.selectStyle로 지정된 선택 형태에 따라 선택 영역이 지정된다. 

Grid - 1
rows

Total = 0 

 RowIndicator.selectabletrue면 사용자는 RowIndicator 영역을 마우스 드래깅해서 행 선택을 할 수 있다. 

 GridHeader.selectabletrue면, shiftctrl 키를 누른 상태에서 컬럼 헤더 영역을 드래깅하면 컬럼 선택을 할 수 있다. 

또, 사용자는 shift 키를 누른 상태에서 방향키 이동으로 선택 영역을 변경할 수 있다. 

마우스나 키보드 선택 중에는 GridBase.onSelectionResized, GridBase.onSelectionChanged 이벤트가 발생하고, 선택 완료되면 GridBase.onSelectionEnded 이벤트가 발생한다. 

현재 선택된 행들은 getSelectedRowIndices로 알 수 있고, 선택 아이템은 getSelection으로 가져올 수 있다. 

Code -1
    grdMain.onSelectionEnded = function (grid) {
        var rows = grid.getSelectedRows();
        var fld = dsMain.getFieldIndex('salary');
        var sum = 0;
        for (var i = rows.length; i--;) {
            var r = grid.getRow(rows[i]).dataIndex();
            if (r >= 0) {
                sum += dataSet.getValue(r, fld);
            }
        }
        $('#salaryTotal').text(sum);
    };

SelectionItem 설명에서 선택 영역에 대한 자세한 설명을 참조한다. 


기본적으로 선택 영역 내에서 TAB, ENTER 키로 셀 이동을 할 때 영역을 벗어나지 않고 되돌아 간다. EditOptions.moveInSelection 속성으로 이동 방식을 지정할 수 있다. 

 

선택 영역의 채우기 및 경계선 색상은 GridBody.selectionStyles로 지정한다. 

  

Code -2
    grdMain.body().setSelectionStyles({
        background: "#100000ff",
        border: "#dd0000ff,2px"
    });

소스보기 JSP 

See Also
SelectionStyle
DisplayOptions.selectStyle
EditOptions.moveInSelection
Examples
다중 선택
Selection Display
병합 셀 선택