活字格中集成SpreadJS

收藏

本帖最后由 Winny 于 2022-2-22 16:37 编辑

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

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

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

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

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

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

$("[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!");
}

复制代码

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

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

function getSpreadValue(){
let sheet = spread.getActiveSheet()
let row = sheet.getActiveRowIndex()
let col = sheet.getActiveColumnIndex()
alert(sheet.getValue(row,col) ? sheet.getValue(row,col) : '空')
}
getSpreadValue()

复制代码

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

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

WinnieWang · WinnieWang

Derrick.Jiao · Derrick.Jiao

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

mexon1 · mexon1

Joestar.Xu · Joestar.Xu

liegroup · liegroup

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

Joestar.Xu · Joestar.Xu

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

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

image.png737846984.png

liegroup · liegroup

//  我指的是你写的这段活字格引入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!");
}

Joestar.Xu · Joestar.Xu

本帖最后由 Joestar.Xu 于 2024-4-25 15:25 编辑

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

$("[fgcname='spread']").empty();
let designerConfig = JSON.parse(
JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
);
let designer = new GC.Spread.Sheets.Designer.Designer($("[fgcname='spread']")[0],
designerConfig
);
initDesigner(designer);
function initDesigner(designer) {
let spread = designer.getWorkbook();
let sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello World!");
}

复制代码

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

liegroup · liegroup

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还是不行哟。

		自动登录	找回密码
密码			立即注册

活字格中集成SpreadJS

17 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证

微信认证勋章