[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

드래그 채우기

SpreadJS는 사용자가 셀을 선택하고 동일하거나 다른 값으로 다른 셀을 채울 수 있도록 하는 드래그 채우기(drag fill) 옵션을 제공합니다. 채우기 유형은 선형(linear), 증가(growth), 날짜(date) 또는 자동(automatic)으로 설정할 수 있으며, 채우기 방향도 지정할 수 있습니다. 단계(step) 및 종료(stop) 값과 같은 추가 옵션도 설정할 수 있습니다.

셀이나 블록을 선택하고 선택 영역 모서리에 있는 사각형 위로 마우스 포인터를 이동합니다. 마우스 포인터는 채우기 범위를 확장할 수 있는 플러스(+) 모양으로 변경됩니다.



아래 이미지는 범위를 확장하고 마우스를 놓는 모습을 보여줍니다.



아래 이미지는 플러스 기호를 클릭하여 표시되는 추가 채우기 옵션 메뉴를 보여줍니다:



드래그 채우기는 대상 범위에 병합된 셀이 포함된 경우에는 지원되지 않습니다. 또한 조건부 서식이 적용된 범위나 필터링된 범위에는 드래그 채우기가 적용되지 않습니다.

options.allowUserDragFill 속성을 사용하여 드래그 채우기 허용 여부를 지정할 수 있습니다. fillAuto 메서드를 사용하면 프로그래밍 방식으로 채우기 유형을 지정할 수 있습니다.



다음 코드 샘플은 셀 범위를 자동 채우는 방법을 보여줍니다.

spread.options.allowUserDragFill = true;

activeSheet.setValue(0, 0, new Date(2011, 1, 1));
activeSheet.setValue(0, 1, new Date(2011, 2, 9));
activeSheet.setValue(0, 2, 5);
activeSheet.setValue(0, 3, 10);
activeSheet.setValue(0, 4, 1);

var start = new GC.Spread.Sheets.Range(0, 0, 1, 1);

var r = new GC.Spread.Sheets.Range(0, 0, 4, 1);
activeSheet.fillAuto(start, r,
{
    fillType: GC.Spread.Sheets.Fill.FillType.date,
    series: GC.Spread.Sheets.Fill.FillSeries.column,
    fillDirection: GC.Spread.Sheets.Fill.FillDirection.down,
    unit: GC.Spread.Sheets.Fill.FillDateUnit.day,
    step: 1,
    stop: new Date(2011, 2, 11)
});
start = new GC.Spread.Sheets.Range(0, 1, 1, 1);

var r2 = new GC.Spread.Sheets.Range(0, 1, 4, 1);
activeSheet.fillAuto(start, r2,
{
fillType: GC.Spread.Sheets.Fill.FillType.date,
series: GC.Spread.Sheets.Fill.FillSeries.column,
fillDirection:GC.Spread.Sheets.Fill.FillDirection.down,
unit: GC.Spread.Sheets.Fill.FillDateUnit.day,
step: 1,
stop: new Date(2011, 2, 11)
});
start = new GC.Spread.Sheets.Range(0, 2, 1, 1);

var r3 = new GC.Spread.Sheets.Range(0, 2, 4, 1);
activeSheet.fillAuto(start, r3,
{
    fillType: GC.Spread.Sheets.Fill.FillType.auto,
    series: GC.Spread.Sheets.Fill.FillSeries.column,
});
start = new GC.Spread.Sheets.Range(0, 3, 1, 1);

var r4 = new GC.Spread.Sheets.Range(0, 3, 4, 1);
activeSheet.fillAuto(start, r4,
{
    fillType: GC.Spread.Sheets.Fill.FillType.growth,
    series: GC.Spread.Sheets.Fill.FillSeries.column,
    step:2,
    stop:55
});
start = new GC.Spread.Sheets.Range(0, 4, 1, 1);

var r5 = new GC.Spread.Sheets.Range(0, 4, 4, 1);
activeSheet.fillAuto(start, r5,
{
    fillType: GC.Spread.Sheets.Fill.FillType.linear,
    series: GC.Spread.Sheets.Fill.FillSeries.column,
    step:3,
    stop:20
});
activeSheet.setValue(0, 5, 123);

var r6 = new GC.Spread.Sheets.Range(0, 5, 4, 1);
activeSheet.fillAuto(new GC.Spread.Sheets.Range(0, 5, 1, 1), r6,
{
    fillType: GC.Spread.Sheets.Fill.FillType.auto,
    series: GC.Spread.Sheets.Fill.FillSeries.column,
});

드래그 채우기 사용 시 유효하지 않은 범위 찾기

드래그 채우기(drag fill) 중 유효하지 않은 작업이 발생할 경우, invalidOperation 이벤트를 통해 데이터 범위 및 행/열 수 등의 정보를 확인할 수 있습니다.

InvalidOperation 이벤트 인자에는 invalidType이 dragFill일 때 채우기 작업에 사용된 범위를 반환하는 fillRange 라는 매개변수가 제공됩니다.



다음 코드 샘플은 드래그 채우기 작업 중 유효하지 않은 범위에 대한 정보를 가져오는 방법을 보여줍니다.

// Workbook과 Worksheet 구성
var spread = new GC.Spread.Sheets.Workbook("ss");
var activeSheet = spread.getActiveSheet();
    
// allowCopyPasteExcelStyle true 설정
spread.options.allowCopyPasteExcelStyle = true;

spread.bind(GC.Spread.Sheets.Events.InvalidOperation, (e, args) => {
    // 이 코드는 드래그 채우기 작업이 수행될 때 유효하지 않은 범위를 등록합니다.
    if (args.invalidType == GC.Spread.Sheets.InvalidOperationType.dragFill)
        console.log(args.fillRange);
});