ドラッグアンドフィル

SpreadJSのドラッグアンドフィルオプションを使用すると、セルを選択し、同じ値または別の値を他のセルに入力（フィル）する操作をユーザーに許可できます。フィルの種類には、連続、増加、日付、または自動を選択できます。フィルの方向を指定することもできます。増分値や停止値など、その他のオプションも設定できます。

単一セルまたはセルブロックを選択して、選択領域の隅の四角形にマウスポインタを合わせます。マウスポインタがプラスの形に変わり、このポインタを使用してフィル範囲を拡張できます。

範囲を拡張し、適切な位置でマウスボタンを離します。

プラス記号をクリックすると、次の図に示すように、有効なフィルオプションを示すメニューが表示されます。

目的の範囲に結合セルが含まれている場合は、ドラッグアンドフィルはサポートされません。また、ドラッグアンドフィルは、条件付き書式やフィルタ処理された範囲には適用されません。

ドラッグ&フィルを有効にするかどうかを指定するには、options.allowUserDragFillメソッドを使用します。フィルの種類をプログラミングによって指定するには、fillAutoメソッドを使用します。

コードの使用

次のサンプルコードは、セル範囲にドラッグアンドフィルを適用します。

JavaScript	コードのコピー
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, });

JavaScript

コードのコピー

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,
});

ドラッグフィルを使用するときに無効な範囲を見つける

invalidOperationイベントを使用して、ドラッグフィルを含むあらゆる種類の無効な操作が発生した場合に、データ範囲や行/列の数などの情報を受け取ることができます。

InvalidOperationイベント引数は、 invalidTypeがdragFillの場合にドラッグフィル操作に使用される範囲を返すfillRangeというパラメーターを提供します。

Drag Fill Invalid Operation

次のコードサンプルは、ドラッグフィル操作を使用するときに無効な範囲に関する情報を取得する方法を示しています。

JavaScript	コードのコピー
// ワークブックとワークシートを構成します。 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); });

JavaScript

コードのコピー

// ワークブックとワークシートを構成します。
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);
});