SpreadJS是一款基于HTML5的純JavaScript電子表格和網(wǎng)格功能控件，它在數(shù)據(jù)展示、前端導(dǎo)入導(dǎo)出、圖表面板、數(shù)據(jù)綁定等場(chǎng)景無(wú)需大量代碼開(kāi)發(fā)和測(cè)試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風(fēng)險(xiǎn)。

近日，國(guó)電聯(lián)合動(dòng)力技術(shù)有限公司&資深前端開(kāi)發(fā)工程師李林慧女士就分享了“在React框架中使用SpreadJS純前端表格控件”的實(shí)戰(zhàn)開(kāi)發(fā)經(jīng)驗(yàn)，一起來(lái)看看吧~

【點(diǎn)擊下載SpreadJS最新版】

項(xiàng)目背景：

國(guó)電聯(lián)合動(dòng)力技術(shù)有限公司采購(gòu)SpreadJS純前端表格控件，其主要應(yīng)用場(chǎng)景是開(kāi)發(fā)一套完善的日常業(yè)務(wù)流程管理系統(tǒng)，該系統(tǒng)以部門(mén)為單位劃分，每周由各部門(mén)填報(bào)人員，根據(jù)系統(tǒng)運(yùn)行情況、日常運(yùn)營(yíng)數(shù)據(jù)等在系統(tǒng)中進(jìn)行填報(bào)，后交由部門(mén)進(jìn)行數(shù)據(jù)匯總，并在移動(dòng)端/PC端系統(tǒng)頁(yè)面進(jìn)行數(shù)據(jù)展示。

在采購(gòu)SpreadJS純前端表格控件之前，該公司使用excel進(jìn)行數(shù)據(jù)匯總，無(wú)法保證各部門(mén)的數(shù)據(jù)流通及時(shí)、共享。在經(jīng)過(guò)技術(shù)調(diào)研后，決定使用SpreadJS（該控件的功能、布局和操作均接近原生Excel）開(kāi)發(fā)業(yè)務(wù)流程管理系統(tǒng)。通過(guò)該系統(tǒng)，部門(mén)領(lǐng)導(dǎo)可以實(shí)時(shí)查看業(yè)務(wù)運(yùn)行狀況并給予反饋意見(jiàn)，保證數(shù)據(jù)流通實(shí)時(shí)、有效。

選擇SpreadJS的主要原因：

1、功能、布局與Excel高度一致，數(shù)據(jù)操作、使用習(xí)慣均接近原生Excel；

2、可在前端導(dǎo)入、導(dǎo)出Excel文件，且保持文件的最大完整性；

3、支持所有常見(jiàn)的Excel公式函數(shù)。

分享內(nèi)容：

1、SpreadJS常用組件及其屬性

• SpreadSheets

• Worksheet

2、渲染過(guò)程

3、自定義數(shù)據(jù)驗(yàn)證及Demo演示

4、課程答疑

SpreadJS常用組件及其屬性

  this.handleRowChanged(sheet)}
    valueChanged={(_, sheet) => this.handleValueChanged(sheet)}
    rangeChanged={(_, sheet) => this.handleRangeChanged(sheet)}
    workbookInitialized={spread => this.init(spread)}
    >

• rowChanged：主要用于刪除整行觸發(fā)，需要判斷propertyName屬性

 handleRowChanged(content) {// 整行刪除觸發(fā)
    const {sheet, propertyName} = content
    if (propertyName === 'deleteRows') {
      const {originalItem: {reportId}} = sheet.getDeletedRows()[0]
      if (reportId) {
        this.setState({loading: true})
        setTimeout(() => {
          alert('刪除成功!')
        }, 2000)
      }
    }

• valueChanged：改變單元格值觸發(fā)

 handleValueChanged(sheet) {
    const {changedRow} = this.state
    changedRow.push(sheet.row)
    this.setState({changedRow: Array.from(new Set(changedRow))})
  }

• rangeChanged：輸入公式、delete刪除數(shù)據(jù)、移動(dòng)單元格觸發(fā)

handleRangeChanged({ changedCells }) { // 輸入公式、delete刪除數(shù)據(jù)、移動(dòng)單元格觸發(fā)
    const { changedRow } = this.state;
    for (let i = 0; i < changedCells.length; i++) {
      changedRow.push(changedCells[i].row);
    }
    this.setState({ changedRow: Array.from(new Set(changedRow)) });
  }

• workbookInitialized：初始化表格控件，返回一個(gè)spread實(shí)例

<Worksheet dataSource = {data}  name="簡(jiǎn)單綜合示例" autoGenerateColumns={false}>
    {tableHead.length > 0 ? tableHead.map(item => (
    <Column
        dataField={item.name}
        key={item.name}
        headerText={item.displayName}
        width={item.width}
        style={{wordWrap: 'break-wrap', locked: false}}
        formatter={item.formatter}
    />
    )): null}
</Worksheet>

• dataSource：數(shù)據(jù)源

• name：工作簿名稱(chēng)

• <Column>

渲染過(guò)程

1、workbookInitialized返回一個(gè)spread實(shí)例，在init方法里可以對(duì)options按需進(jìn)行配置。有了spread實(shí)例后也就可以生成一個(gè)Excel實(shí)例對(duì)象，其中包含了常用的spread和spreadNS，以及自定義的一些常用spread方法，比如搜索功能、自適應(yīng)高度等。

2、從服務(wù)器端獲取報(bào)表數(shù)據(jù)后，再根據(jù)報(bào)表保存的模板id獲取對(duì)應(yīng)的表頭模板，渲染表頭時(shí)可以做一些前期工作，如定義選項(xiàng)類(lèi)的單元格、定義單元格的格式、公式等。

3、將報(bào)表數(shù)據(jù)賦值給Worksheet組件的dataSource屬性。

4、渲染完畢。

自定義數(shù)據(jù)驗(yàn)證及Demo演示

1、數(shù)據(jù)驗(yàn)證高亮樣式（Data Validation Highlight Style）：SpreadJS支持自定義數(shù)據(jù)驗(yàn)證樣式和不同的單元格突出顯示類(lèi)型，包括 circle，dogear和icon。

2、數(shù)據(jù)驗(yàn)證代碼

// 數(shù)據(jù)驗(yàn)證
dataValidate() {
function MyCondition(reg) {
    this.reg = reg
    GC.Spread.Sheets.ConditionalFormatting.Condition.apply(this, arguments)
}
MyCondition.prototype = new GC.Spread.Sheets.ConditionalFormatting.Condition()
MyCondition.prototype.evaluate = function(evaluator, baseRow, baseColumn, actualObj) {
    const reg = new RegExp (this.reg)
    if (reg.test(actualObj)) {
    return true
    }
    else {
    return false
    }
}
// 數(shù)據(jù)驗(yàn)證相關(guān)變量
const {spread} = this.state,
    sheet = spread.getSheet(0),
    sheetActive = spread.getActiveSheet(),
    nCondition = new MyCondition(/[+-]?\d+(\.\d+)?|^\s+$/),
    validator = new GC.Spread.Sheets.DataValidation.DefaultDataValidator(nCondition)
// 數(shù)據(jù)驗(yàn)證
spread.suspendPaint()
validator.type(GC.Spread.Sheets.DataValidation.CriteriaType.custom)
spread.options.highlightInvalidData = true
validator.showInputMessage(true)
validator.inputMessage('必須填寫(xiě)數(shù)字！')
validator.inputTitle('提示')
sheetActive.setDataValidator(0, 4, sheet.getRowCount(), 1, validator) // rowIndex, colIndex, rowCount, colCount
sheet.resumePaint()
}

課程答疑Q&A

Q：為何數(shù)據(jù)量很小，但頁(yè)面加載時(shí)會(huì)出現(xiàn)卡頓？

A：凡是涉及到表格重繪的地方最好都用 spread.suspendPaint() 和 spread.resumePaint() 包裹起來(lái)，避免頻繁重繪引起卡頓。

Q： 如何渲染多重表頭？

A：Column組件尚未支持多重表頭，針對(duì)這個(gè)問(wèn)題，可以在渲染表頭步驟時(shí)（此時(shí)已獲取到有樹(shù)形結(jié)構(gòu)的表頭模板），先給表格setDataSource，獲取所有表頭模板的葉子節(jié)點(diǎn)后按列進(jìn)行表單級(jí)別的綁定，然后通過(guò)操作表頭區(qū)域的賦值、合并單元格等操作手動(dòng)渲染表頭。

Q：為什么要引入表頭模板？

A：SpreadJS中每一列的列頭顯示的是中文，但是實(shí)際上存取對(duì)應(yīng)的是數(shù)據(jù)庫(kù)中的一個(gè)字段，所以需要通過(guò)數(shù)據(jù)綁定把表格數(shù)據(jù)和字段映射起來(lái)。其中模板在系統(tǒng)管理內(nèi)另有維護(hù)入口，支持增刪改等基本功能。

如果想獲得 SpreadJS 更多資源或其他相關(guān)下載，請(qǐng)點(diǎn)擊這里。

如果想要購(gòu)買(mǎi)正版 SpreadJS 產(chǎn)品，。