轉(zhuǎn)帖|使用教程|編輯:鮑佳佳|2020-12-09 09:52:07.387|閱讀 126 次
概述:本示例展示了如何使用 SpreadJS 創(chuàng)建商業(yè)關(guān)鍵業(yè)績(jī)指標(biāo)表單, 例如財(cái)務(wù)關(guān)鍵業(yè)績(jī)指標(biāo)表單。各項(xiàng)表格大小、位置只需“拖拉拽”即可完成!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
SpreadJS 是一款基于 HTML5 的純前端電子表格控件,兼容 450 種以上的 Excel 公式,憑借其 “高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性,備受以華為、蘇寧易購(gòu)、天弘基金等為代表的企業(yè)用戶青睞。
日前,SpreadJS 正式發(fā)布V14.0版本。從該版本開(kāi)始,SpreadJS加入了數(shù)據(jù)透視表插件,進(jìn)一步降低企業(yè)數(shù)據(jù)分析的門檻,提升系統(tǒng)數(shù)據(jù)處理的能力。
此外,SpreadJS 還在 V14.0中發(fā)布了在線表格編輯器(控件版),作為 SpreadJS 的增強(qiáng)擴(kuò)展插件,新的編輯器提供了更易嵌入、秒級(jí)加載、靈活定制的能力。在線表格編輯器(控件版)可與SpreadJS 集成,助力開(kāi)發(fā)者在主流前端 JS 框架中,實(shí)現(xiàn)高性能的模板設(shè)計(jì)、在線編輯、填報(bào)和數(shù)據(jù)綁定等功能。
下面的示例展示了如何使用 SpreadJS 創(chuàng)建商業(yè)關(guān)鍵業(yè)績(jī)指標(biāo)表單, 例如財(cái)務(wù)關(guān)鍵業(yè)績(jī)指標(biāo)表單。各項(xiàng)表格大小、位置只需“拖拉拽”即可完成!
具體代碼如下:
app.js:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var sd = data; if (sd.length > 0) { if (!spread) { return; } spread.suspendPaint(); spread.fromJSON(sd[0]); spread.resumePaint(); } }
index.html:
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/financialKPIs.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%;height:100%"></div> </div> </body> </html>
style.css:
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
小結(jié):
慧都作為Grapecity正版授權(quán)合作商,為你提供優(yōu)質(zhì)的服務(wù)、低廉的價(jià)額;還有多種授權(quán)方式供你選擇!現(xiàn)適逢慧都17周年促銷活動(dòng),spreadJS正版授權(quán)限時(shí)最高立減6278元!更有3C數(shù)碼、蘋果手機(jī)、電腦等豪禮相送!
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自: