spreadjs官网:https://www.grapecity.com.cn/developer/spreadjs/
spreadjs 在runjs 上的案例, https://runjs.cn/detail/mk26jn6m
你还在找在前台展示的Excel控件吗,去看看吧;不会让你失望!
初始化表单
请按照以下步骤引入 Spread.Sheets 组件到您的浏览器页面
首先,创建一个新页面,并在页面上输入以下代码:
HTML<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Spread HTML test page</
title
>
在页面中添加对 Spread.JS 的引用。代码如下。需要注意的是,Spread 提供压缩过(minified)的 JavaScript 文件和和用于调试的文件。
HTML<
script
src
=
"[Your_Scripts_Path]/gc.spread.sheets.all.xxxx.min.js"
type
=
"text/javascript"
></
script
>
添加 CSS 文件以改变Spread.JS 的外观。默认的CSS文件名为: gc.spread.sheets.xxxx.css,里面包含了所有的默认样式。该 CSS 文件将会影响滚动条,筛选框及其子元素,单元格和下方标签栏的样式。引入 CSS 的代码如下:
HTML//<
link
href
=
"[Your_CSS_Path]/gc.spread.sheets.xxxx.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
//OR
<
link
href
=
"[Your_CSS_Path]/bootstrap/bootstrap.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"[Your_CSS_Path]/bootstrap/bootstrap-theme.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
添加产品序列号,代码为:
JavaScriptGC.Spread.Sheets.LicenseKey =
"xxx"
;
添加控件初始化代码。本例会在一个 id 为“ss”的 DOM 元素上初始化 Spread.Sheets。
HTML<
script
type
=
"text/javascript"
>
// Add your license
GC.Spread.Sheets.LicenseKey = "xxx";
// Add your code
window.onload = function(){
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var sheet = spread.getActiveSheet();
}
</
script
>
</
head
>
<
body
>
创建一个 id 为 “ss”的元素,Spread.Sheets 将在该 DOM 中初始化。
HTML<
div
id
=
"ss"
style
=
"height: 500px; width: 800px"
></
div
>
</
body
>
</
html
>
<!DOCTYPE html> 是必须的在页面中进行声明的
Spread 控件通过 new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }), 函数进行初始化, 并且 spread ( 以下简称 Spread.Sheets 控件为 'spread') 被添加到 id 为 'ss' 的 Div 元素中。你可以通过函数 var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'))获取 spread对象实例。然后, 你就可以定制你的 spread 了。 例如:
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// get spread object
// var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
};
当然,你仍可以配合jQuery来操作SpreadJS, 例如:
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook($('#ss')[0], { sheetCount: 1 });
// get spread object
// var spread = $('#ss').data('workbook');
});
自定义函数
1. 可以在 Spread.Sheets 中添加自定义函数并在表单中使用它们.
2. 创建自定义函数时需要从 GC.Spread.CalcEngine.Functions.Function派生并重写一些关键方法,下面是示例代码:
3. 当添加完自定义函数后, 如果想移除一个或者所有的自定义函数, 可以使用 removeCustomFunction或者 clearCustomFunctions函数。
sheet.removeCustomFunction('FACTORIAL');
sheet.clearCustomFunctions();