轉(zhuǎn)帖|使用教程|編輯:王香|2019-03-26 15:52:27.000|閱讀 690 次
概述:SpreadJS的表單綁定是將前端獲取的數(shù)據(jù)源DataSource綁定到整個表單上,由于數(shù)據(jù)源是一個二維表格形式的結(jié)構(gòu),所以將會以列為單位綁定數(shù)據(jù)源中的每一個字段。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
上一期我們對數(shù)據(jù)綁定做了一個大致的介紹,本期我們著重為大家介紹如果進行數(shù)據(jù)幫綁定。這里首先介紹如何進行表單級別操作:
表單綁定無法跟其他兩種綁定混合使用:表單綁定綁定的是整個sheet,無法在其基礎(chǔ)上再去綁定某個單元格或者表格。
表單綁定無法在設(shè)計器中設(shè)置,只能通過代碼來進行綁定設(shè)置:設(shè)計器只能設(shè)置表格綁定和單元格綁定。
SpreadJS的表單綁定是將前端獲取的數(shù)據(jù)源DataSource綁定到整個表單上,由于數(shù)據(jù)源是一個二維表格形式的結(jié)構(gòu),所以將會以列為單位綁定數(shù)據(jù)源中的每一個字段,這里通過設(shè)置autoGenerateColumns 可以控制是否自動生成綁定列,下面將以自動生成和手動生成兩種方式分開詳細介紹:
autoGenerateColumns 設(shè)置為true時即為自動生成綁定列的模式。首先,我們假設(shè)前端接收的數(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è)置綁定模式為自動生成綁定列模式。
接下來將數(shù)據(jù)源通過setDataSource方法設(shè)置數(shù)據(jù)源給該sheet對象。
sheet.setDataSource(dataSource);
執(zhí)行完上述代碼后,頁面會進行如下顯示:
可以看到的,列頭被自動定義成了數(shù)據(jù)源中對應(yīng)字段的名稱。列頭會根據(jù)綁定的字段而變化這個是表單綁定的其中一個特征。
當我們在表格中進行填報,編輯之后,我們可以通過getDataSource方法來獲取這個時候的數(shù)據(jù)源對象。例如,我們在上面顯示的頁面上進行填報,編輯:
當我們通過sheet.getDataSource()獲得的數(shù)據(jù)源對象如下圖所示:
以上就是這一期數(shù)據(jù)綁定帶來的內(nèi)容,下一期我們將介紹如何通過手動設(shè)置綁定列來完成表單綁定。
純前端表格控件SpreadJS,是市面上布局與功能都與 Excel 高度類似的一款表格控件,全中文操作界面,適用于.NET、Java、移動端等多個平臺的類 Excel 數(shù)據(jù)開發(fā),備受華為、中通、民航飛行學(xué)院等國內(nèi)知名企業(yè)客戶青睞。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn