亚洲欧洲精品成人久久曰影片,国产亚洲欧,久久精品国产久精国产果冻传媒

純前端表格控件SpreadJS數(shù)據(jù)綁定系列教程（二）

原創(chuàng)|使用教程|編輯：陳津勇|2019-09-24 10:30:10.610|閱讀 603 次

概述：本文主要介紹使用純前端表格控件SpreadJS完成數(shù)據(jù)綁定的詳細(xì)操作方法。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

在第一節(jié)中，我們對數(shù)據(jù)綁定做了一個大致的介紹，在第二節(jié)中我們將著重為大家介紹如何完成SpreadJS的數(shù)據(jù)綁定。這里首先介紹如何進(jìn)行表單級別的綁定操作：

使用前須知

1、表單綁定無法跟其他兩種綁定混合使用：

表單綁定，綁定的是整個sheet，無法在其基礎(chǔ)上再去綁定某個單元格或者表格。

2、表單綁定無法在設(shè)計(jì)器中設(shè)置，只能通過代碼來進(jìn)行綁定設(shè)置：

通過Spread設(shè)計(jì)器只能設(shè)置表格綁定和單元格綁定。

點(diǎn)擊下載SpreadJS正式版

詳細(xì)操作

SpreadJS的表單綁定是將前端獲取的數(shù)據(jù)源DataSource綁定到整個表單上，由于數(shù)據(jù)源是一個二維表格形式的結(jié)構(gòu)，所以將會以列為單位綁定數(shù)據(jù)源中的每一個字段，這里通過設(shè)置autoGenerateColumns 可以控制是否自動生成綁定列，下面將以自動生成和手動生成兩種方式分開詳細(xì)介紹：

自動生成綁定列

autoGenerateColumns 設(shè)置為true時即為自動生成綁定列的模式。

首先，我們假設(shè)前端接收的數(shù)據(jù)源為如下結(jié)構(gòu)(數(shù)據(jù)源的獲取可以為任何方式，比如常用的：ajax,getjson等等)：

var dataSource = [
  { ID:0, Name:'A', Info1:'Info0' },
  { ID:1, Name:'B', Info1:'Info1' },
  { ID:2, Name:'C', Info1:'Info2' },
];

獲取需要綁定的工作表對象并聲明為sheet，接下來通過這段代碼，設(shè)置綁定模式為自動生成綁定列模式：

sheet.autoGenerateColumns = true;

接下來，我們將數(shù)據(jù)源通過setDataSource方法設(shè)置數(shù)據(jù)源，并傳給該sheet對象。

sheet.setDataSource(dataSource);

執(zhí)行完上述代碼后，頁面將顯示如下內(nèi)容：

從上圖可以看到，列頭被自動定義成了數(shù)據(jù)源中對應(yīng)字段的名稱。列頭會根據(jù)綁定的字段而變化，這也是表單綁定的其中一個重要特征。

當(dāng)我們在表格中進(jìn)行填報(bào)、編輯之后，我們可以通過getDataSource方法來獲取此時的數(shù)據(jù)源對象。例如，我們在上面顯示的頁面上進(jìn)行填報(bào)、編輯后：

當(dāng)我們通過sheet.getDataSource()獲得的數(shù)據(jù)源對象如下圖所示：

以上就是SpreadJS自動設(shè)置表單數(shù)據(jù)綁定的內(nèi)容，有關(guān)SpreadJS數(shù)據(jù)綁定的原理、方式，請點(diǎn)擊此處了解>>>

想要獲得 SpreadJS 更多資源或正版授權(quán)的伙伴，

掃描關(guān)注慧聚IT微信公眾號，及時獲取最新動態(tài)及最新資訊

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

上一篇：Excel管理控件Aspose.Cells開發(fā)者指南（七）：將Excel工作簿轉(zhuǎn)換為不同圖像格式下一篇：純前端表格控件SpreadJS數(shù)據(jù)綁定系列教程（一）

相關(guān)產(chǎn)品

控件

產(chǎn)品功能：文檔管理

源碼：非開源

產(chǎn)品編號：13558

當(dāng)前版本：v18.0 Update1 [銷售以商家最新版為準(zhǔn)，如需其他版本，請來電咨詢]

開發(fā) 商： GrapeCity

正式授權(quán)

">SpreadJS

面向企業(yè)級應(yīng)用開發(fā)、基于HTML5的純JavaScript電子表格控件。

最新文章 MORE

金喜正規(guī)買球相關(guān)的文章 MORE

老司机夜插-理伦理片-理伦片免费-理伦片免费观看-理伦片免费看-理伦日韩-理论福利片-理论片第一页-理论片电影-理论片理论

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

純前端表格控件SpreadJS數(shù)據(jù)綁定系列教程（二）

用科技創(chuàng)就卓越

Create excellence with technology

老司机夜插-理伦理片-理伦片免费-理伦片免费观看-理伦片免费看-理伦日韩-理论福利片-理论片第一页-理论片电影-理论片理论

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

純前端表格控件SpreadJS數(shù)據(jù)綁定系列教程（二）

為你推薦

用科技創(chuàng)就卓越

Create excellence with technology