原創(chuàng)|使用教程|編輯:陳津勇|2019-09-24 10:30:10.610|閱讀 620 次
概述:本文主要介紹使用純前端表格控件SpreadJS完成數(shù)據(jù)綁定的詳細操作方法。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
在第一節(jié)中,我們對數(shù)據(jù)綁定做了一個大致的介紹,在第二節(jié)中我們將著重為大家介紹如何完成SpreadJS的數(shù)據(jù)綁定。這里首先介紹如何進行表單級別的綁定操作:
使用前須知
1、表單綁定無法跟其他兩種綁定混合使用:
表單綁定,綁定的是整個sheet,無法在其基礎上再去綁定某個單元格或者表格。
2、表單綁定無法在設計器中設置,只能通過代碼來進行綁定設置:
通過Spread設計器只能設置表格綁定和單元格綁定。
詳細操作
SpreadJS的表單綁定是將前端獲取的數(shù)據(jù)源DataSource綁定到整個表單上,由于數(shù)據(jù)源是一個二維表格形式的結構,所以將會以列為單位綁定數(shù)據(jù)源中的每一個字段,這里通過設置autoGenerateColumns 可以控制是否自動生成綁定列,下面將以自動生成和手動生成兩種方式分開詳細介紹:
自動生成綁定列
autoGenerateColumns 設置為true時即為自動生成綁定列的模式。
首先,我們假設前端接收的數(shù)據(jù)源為如下結構(數(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,接下來通過這段代碼,設置綁定模式為自動生成綁定列模式:
sheet.autoGenerateColumns = true;
接下來,我們將數(shù)據(jù)源通過setDataSource方法設置數(shù)據(jù)源,并傳給該sheet對象。
sheet.setDataSource(dataSource);
執(zhí)行完上述代碼后,頁面將顯示如下內(nèi)容:

從上圖可以看到,列頭被自動定義成了數(shù)據(jù)源中對應字段的名稱。列頭會根據(jù)綁定的字段而變化,這也是表單綁定的其中一個重要特征。
當我們在表格中進行填報、編輯之后,我們可以通過getDataSource方法來獲取此時的數(shù)據(jù)源對象。例如,我們在上面顯示的頁面上進行填報、編輯后:

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

以上就是SpreadJS自動設置表單數(shù)據(jù)綁定的內(nèi)容,有關SpreadJS數(shù)據(jù)綁定的原理、方式,請點擊此處了解>>>
想要獲得 SpreadJS 更多資源或正版授權的伙伴,
掃描關注慧聚IT微信公眾號,及時獲取最新動態(tài)及最新資訊

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