纯前端表格控件spreadjs：如何利用javascript创建财务指标表-控件新闻-慧都网

纯前端表格控件spreadjs：如何利用javascript创建财务指标表

转帖|使用教程|编辑：鲍佳佳|2020-12-09 09:52:07.387|阅读 126 次

概述：本示例展示了如何使用 SpreadJS 创建商业关键业绩指标表单, 例如财务关键业绩指标表单。各项表格大小、位置只需“拖拉拽”即可完成！

相关链接：

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。

日前，SpreadJS 正式发布V14.0版本。从该版本开始，SpreadJS加入了数据透视表插件，进一步降低企业数据分析的门槛，提升系统数据处理的能力。

此外，SpreadJS 还在 V14.0中发布了在线表格编辑器（控件版），作为 SpreadJS 的增强扩展插件，新的编辑器提供了更易嵌入、秒级加载、灵活定制的能力。在线表格编辑器（控件版）可与SpreadJS 集成，助力开发者在主流前端 JS 框架中，实现高性能的模板设计、在线编辑、填报和数据绑定等功能。

下载spreadjs最新版

下面的示例展示了如何使用 SpreadJS 创建商业关键业绩指标表单, 例如财务关键业绩指标表单。各项表格大小、位置只需“拖拉拽”即可完成！

具体代码如下：

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;
}

小结：

慧都作为Grapecity正版授权合作商，为你提供优质的服务、低廉的价额；还有多种授权方式供你选择！现适逢慧都17周年促销活动，spreadJS正版授权限时最高立减6278元！更有3C数码、苹果手机、电脑等豪礼相送！

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@atlvshi.cn

文章转载自：

上一篇：VS/MFC编程入门：应用程序工程中文件的组成结构下一篇：流程图控件GoJS教程：如何内置GoJS交互性

星空外围权威网站

在线采购

中文文档库

试用/Demo下载

开发社群