找回密码
 立即注册

QQ登录

只需一步,快速开始

Winny

超级版主

132

主题

248

帖子

1558

积分

超级版主

Rank: 8Rank: 8

积分
1558
Winny
超级版主   /  发表于:2022-2-22 15:55  /   查看:3453  /  回复:15
本帖最后由 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文件的内容如下:
  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. }
复制代码
接下来,需要编写获取数据按钮的命令,右键该按钮,选择“编辑命令”
image.png217528990.png

选择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啦,最终项目的运行效果如下所示:
sample.gif174869078.png
有集成需求的用户可以按照该方案进行测试,测试过程中遇到任何问题可以咨询对应的活字格或SpreadJS技术团队~





活字格集成spreadJS.fgcc

81.01 KB, 下载次数: 193

SpreadJS兼容活字格方案.zip

2.21 MB, 下载次数: 231

15 个回复

正序浏览
WinnieWang
注册会员   /  发表于:2022-2-22 16:09:32
推荐

回复 使用道具 举报
Richard.HuangSpreadJS 开发认证
超级版主   /  发表于:2024-5-27 17:55:34
16#
毛毛 发表于 2024-5-27 16:18
试了下运行一直在转圈圈是啥情况?

您好,为了便于问题的跟踪以及其他小伙伴关于问题的查找,我们最好一个问题一个帖子,不建议一个帖子连续询问,您可以将您的demo附上在咱们活字格专区发帖询问
回复 使用道具 举报
毛毛
金牌服务用户   /  发表于:2024-5-27 16:18:15
15#

试了下运行一直在转圈圈是啥情况?
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2024-4-28 15:01:11
14#
liegroup 发表于 2024-4-28 14:22
感谢版主辛苦回复,还暖心的付了Demo,我这边特地去下了一个10打开,现在的问题是单独一个页面还好,要是在 ...

您说的页面直接打不开了能再详细描述一下吗?比如说是否有报错?报的是什么错误?

或者更直接一点您可以提供一个可以复现此问题的Demo,我们这边在您的Demo上修改好以后再发给您。
回复 使用道具 举报
liegroup
注册会员   /  发表于:2024-4-28 14:30:59
13#
本帖最后由 liegroup 于 2024-4-28 14:34 编辑

BTW:Spreadjs能另外做成一个活字格插件吗?只能在活字格中使用的插件,不影响spreadjs的其他使用渠道,这个插件收费低一些,不然两个软件都买太贵了 ...
回复 使用道具 举报
liegroup
注册会员   /  发表于:2024-4-28 14:22:20
12#
感谢版主辛苦回复,还暖心的付了Demo,我这边特地去下了一个10打开,现在的问题是单独一个页面还好,要是在活字格其他工程中引入spreadjs,会出现冲突,大概是因为活字格的底层也用了spreadjs的缘故吧?如果在一个已经有了的活字格工程中引入spreadjs的话,活字格其他所有页面直接打不开了,删除js引用就恢复了?
可以再给个Demo吗?先建一个活字格的列表页面,保存后运行正常再创建spreadjs的这个页面。
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2024-4-25 15:25:00
11#
liegroup 发表于 2024-4-25 14:28
自定义JS/CSS添加了:
https:/demo.grapecily.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_module ...

感谢指正。


SpreadJS的设计器不止要引入Designer这个包,还有很多包需要引入,我这边做了个简单的Demo,供您参考。

fgcc.zip

122.24 KB, 下载次数: 74

回复 使用道具 举报
liegroup
注册会员   /  发表于:2024-4-25 14:28:52
10#
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还是不行哟。
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2024-4-25 11:02:24
9#
本帖最后由 Joestar.Xu 于 2024-4-25 15:25 编辑

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

  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. }
复制代码


即可,如果后续有其他活字格集成问题,也欢迎您到活字格板块发帖提问,那边会有更专业的活字格技术顾问为您解答。
回复 使用道具 举报
liegroup
注册会员   /  发表于:2024-4-25 10:31:44
8#
//  我指的是你写的这段活字格引入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!");
}
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部