SpreadJS 在資料填充時的公式填充方案

葡萄城技术团队發表於2024-11-05

需求介紹

很多使用者使用了 SpreadJS 的資料填報功能。大致用法為:設計模板,填充資料來源。在這個過程中,可能會出現模板中設定了公式,而在資料來源填充時,公式沒有攜帶下來的問題。

比如我們定義一個模板:

接下來使用setDataSpurce()填充資料來源,填充後,發現只有一行有公式值,其他行無資料

那麼,我們該做一些什麼操作呢?或者有哪些方案呢?
目前有四種方案,分別fillAutocopyToclipboardPastesetColumnDataFormula

我們分別看一下這四種方案的具體使用用法及效能。

我們先獲取下table區域,定義baseRow ,baseCol

 let row = table.range().row
        let baseRow = row + 1;
        let baseCol = 4
        let rowCount = 0

然後在setDataSource後,修改rowCount值

        document.getElementById('btn6').addEventListener('click', function () {
            sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource(data2))
            rowCount = table.range().rowCount
        })

一、方案

1、fillAuto

let start = new GC.Spread.Sheets.Range(baseRow, baseCol, 1, 1)
            let end = new GC.Spread.Sheets.Range(baseRow, baseCol, rowCount - 1, 1)
            sheet.fillAuto(start, end, {
                fillType: GC.Spread.Sheets.Fill.FillType.auto,
                series: 0,
                direction: GC.Spread.Sheets.Fill.FillDirection.down
            });

2、copyTo

 for (let r = baseRow + 1; r < row + rowCount; r++) {
                sheet.copyTo(baseRow, baseCol, r, baseCol, 1, 1, GC.Spread.Sheets.CopyToOptions.formula)
            }

3、clipboardPaste

 let fromRanges = [new GC.Spread.Sheets.Range(baseRow, baseCol, 1, 1)]
            let pastedRanges = [new GC.Spread.Sheets.Range(baseRow + 1, baseCol, rowCount - 2, 1)]
            spread.commandManager().execute({
                cmd: "clipboardPaste",
                sheetName: sheet.name(),
                fromSheet: sheet,
                fromRanges,
                pastedRanges,
                isCutting: false,
                clipboardText: "",
                pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.formulas
            });

4、setColumnDataFormula

table.setColumnDataFormula(baseCol, sheet.getFormula(baseRow, baseCol));

上述四種方案均能實現公式填充,結果如下:

二、效能對比

1、100條
那麼,我們接下來看下這四種方案的效能吧,首先我們設定100條資料來源,

 let sales = [], dataLength = 100
        for (let i = 0; i < dataLength; i++) {
            sales.push({orderDate: '1/6/2013', item: 'book', units: '95', quantity: 1.99})
        }
        sheet.setRowCount(dataLength + 1)

然後設定一個按鈕,在每一種方案執行後,用來清除資料。

  document.getElementById('btn5').addEventListener('click', function () {
            sheet.clear(2, 4, sheet.getRowCount(), 1,GC.Spread.Sheets.SheetArea.viewport,GC.Spread.Sheets.StorageType.data);
        })

結果如下:

100條資料的情況下,四種方案的效能都相差不大。

2、1000條
接下來,我們設定10000條資料,將dataLength 改為1000
結果如下:

3、10000條
接下來,我們設定10000條資料,將dataLength 改為10000
結果如下:

觀察上圖,我們發現setColumnDataFormula與clipboardPaste效能較好,而fillAuto效能最差。

4、10000條
我們接下來將資料量改為10萬條資料,觀察setColumnDataFormula與clipboardPaste效能

彙總以下這些資料:

總結

由上面的內容可以看出,在資料量不大的情況下,四種方式差不多,但在資料量較大的情況下,建議使用setColumnDataFormula方式填充公式。

擴充套件連結:

【乾貨放送】財務報表勾稽分析要點,一文讀盡!

為什麼你的財務報表不出色?推薦你瞭解這四個設計要點和!

純前端類 Excel 表格控制元件在報表勾稽分析領域的應用場景解析

相關文章