活字格中集成SpreadJS

活字格和SpreadJS都是西安葡萄城主要的产品线，其中SpreadJS为一款纯前端表格控件，主要用于数据填报、类Excel报表设计，协同文档。活字格是一款低代码开发平台，可以快速的通过拖拉拽的形式快速构建项目，使得越来越多的平民开发者也能高效的完成自己的业务系统。除此之外，活字格也提供了灵活的扩展能力，可以对接第三方接口或系统。对于有开发背景的使用者，也可以通过写代码的形式扩展自己想要的功能，本文会详细介绍如何在活字格中集成SpreadJS。

Step1: 修改SpreadJS资源包的命名空间；
SpreadJS表格控件是西安葡萄城具有历史技术积淀的代表产品之一，活字格在底层也是应用了SpreadJS，因此活字格的使用界面与SpreadJS在浏览器中运行的展示形式是高度类似的。而在同时使用这两款产品时，首先要考虑的一点就是修改命名控件，使得底层资源调用时不会因为同名问题产生一些不必要的麻烦，毕竟活字格和当前用户使用的SpreadJS可能并不是一个版本，存在一定的差异。关于如何解决命名冲突可以参考附件“SpreadJS兼容活字格方案”。

Step2：在活字格中设计界面；
设计过程不多做介绍，比较简单。主要就是合并一块单元格，并给这块区域起名，这个名字用于之后定位，创建Spread对象。页面上的按钮之后用于获取当前Spread中的目标数据。



Step3: 引入SpreadJS相关资源；
由于是测试项目，我们在引用资源的时候并没有修改命名空间，实际项目中还是要修改的哦~
点击活字格设计器中文件->设置->自定义JavaScript/CSS，上传所需要的资源文件。



Step4：添加js命令。
在该页面中引入外部js文件，用于创建Spread对象。

该外部js文件的内容如下：

1. $("[fgcname='spread']").empty();
   
2. var spread = new GC.Spread.Sheets.Workbook($("[fgcname='spread']")[0], {
   
3.         sheetCount: 1
   
4. });
   
5. initSpread(spread);
   
6. function initSpread(spread) {
   
7.         var sheet = spread.getActiveSheet();
   
8.         sheet.setValue(0, 0, "Hello World!");
   
9. }

复制代码

接下来，需要编写获取数据按钮的命令，右键该按钮，选择“编辑命令”


选择JavaScript命令，编写对应的js函数，本示例中该按钮主要用来获取当前活动单元格的内容：

1. function getSpreadValue(){
   
2.         let sheet = spread.getActiveSheet()
   
3.         let row = sheet.getActiveRowIndex()
   
4.         let col = sheet.getActiveColumnIndex()
   
5.         alert(sheet.getValue(row,col) ? sheet.getValue(row,col) : '空')
   
6. }
   
7. getSpreadValue()

复制代码

通过上边几步操作，就可以完成活字格中集成SpreadJS啦，最终项目的运行效果如下所示：

有集成需求的用户可以按照该方案进行测试，测试过程中遇到任何问题可以咨询对应的活字格或SpreadJS技术团队~

赞

WinnieWang 发表于 2022-2-22 16:09
赞

如果要加载带designer设计界面的SpreadJS，应该如何写该页面引入的外部js文件呢？

liegroup 发表于 2024-4-25 00:15
如果要加载带designer设计界面的SpreadJS，应该如何写该页面引入的外部js文件呢？

您好，可以参考一下官网Demo中引入的JS文件：https://demo.grapecity.com.cn/SpreadJS/WebDesigner/index.html

//  我指的是你写的这段活字格引入SpreadJS的DEMO，如果换成带designer设计界面的SpreadJS，下面这段Demo如何改？可以给个样例吗？谢谢啦 ...
$("[fgcname='spread']").empty();
var spread = new GC.Spread.Sheets.Workbook($("[fgcname='spread']")[0], {
        sheetCount: 1
});
initSpread(spread);
function initSpread(spread) {
        var sheet = spread.getActiveSheet();
        sheet.setValue(0, 0, "Hello World!");
}

您好，我这边调研了一下，首先您需要将所有涉及到设计器的包上传；然后将代码换成：

1. $("[fgcname='spread']").empty();
   
2. let designerConfig = JSON.parse(
   
3.   JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
   
4. );
   
5. let designer = new GC.Spread.Sheets.Designer.Designer($("[fgcname='spread']")[0],
   
6.   designerConfig
   
7. );
   
8. initDesigner(designer);
   
9. function initDesigner(designer) {
   
10.   let spread = designer.getWorkbook();
    
11.   let sheet = spread.getActiveSheet();
    
12.   sheet.setValue(0, 0, "Hello World!");
    
13. }

复制代码

即可，如果后续有其他活字格集成问题，也欢迎您到活字格板块发帖提问，那边会有更专业的活字格技术顾问为您解答。

Joestar.Xu 发表于 2024-4-25 11:02
您好，我这边调研了一下，首先您需要将所有涉及到设计器的包上传；然后将代码换成：

自定义JS/CSS添加了：
https:/demo.grapecily.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.designer.all.min.js
https:/demo.grapecity,com.cn/spreadis/SpreadJSTutoral/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheet.designer.min.css
用你这段代码替换还是不行（这个帖子版主的下载：活字格集成spreadJS.fgcc）

BTW：代码中funtion有误，少了一个c，改了function还是不行哟。