活字格中嵌入spreadJS的问题

项目需求：

由与产品需求，该项目涉及大量非关系型数据的增删改查，跨表间公式引用，多层级区域分组，并需要用户可以自行实现对表格间关系的编辑：如对计算公式的修改操作、创建行及列、不定序插入修改删除记录等。

当前活字格版本内置的表格控件对关系型数据库适应度较好，但相对不适用于非关系型数据库对表格的铺设，由于SpreadJ表格控件产品支持json传值，而且功能与 Excel 高度类似，故此我们决定通过在活字格基础上嵌入SpreadJS控件实现来产品功能，它与我们想要实现的灵活表格编辑功能更加吻合。

我们想要实现的功能：

（如图）通过活字格按钮类型单元格(导入按钮)点击时执行JS命令实现EXCEL文件上传，并将该文件内数据传递到下方“嵌入HTML自定义页面(源自:https://gcdn.grapecity.com.cn/showtopic-50577-1-1.html)”类型插件中被嵌入的spreadJS页面中，实现数据展示

已执行条件：

在设立了左侧和上侧导航栏作为母版页后，又引入了标签页插件（https://gcdn.grapecity.com.cn/fo ... 54661&fromuid=52377）作为单独的页面容器（单独页面不直接关联母版页，通过左侧菜单栏中编辑“打开页面标签”点击命令将对应的页面借由标签页容器显示在占位区中）：

在单独的页面中：已通过资源文件夹路径下的test.html在页面中引入jquery-3.4.1.js，gc.spread.sheets.all.13.0.0.min.js，gc.spread.excelio.13.0.0.min.js，gc.spread.sheets.excel2013darkGray.13.0.0.css三个SpreadJS支持文件，以及test.js（初始化js文件）（以上文件已上传在页尾附件中）

并已成功执行出按钮功能栏下方的自定义HTML页面。

在通过活字格按钮类型单元格(导入按钮)点击时执行以下JS命令时：

spread.fromJSON(jsonData);

var excelIo = new GC.Spread.Excel.IO();

//import excel file to Spread.Sheets json

excelIo.open(excelFile, function (json) {

       varworkbookObj = json;

              spread.fromJSON(workbookObj);

}, function (e) {

       //process error

              console.log(e);

});），

遇到问题：

spread在之前引入的test.js中已经用var spread = newGC.Spread.Sheets.Workbook(document.getElementById('ss')); 声明过该变量，但调用时报错。

（上图为点击导入按钮时加载的命令）

求助大神帮忙看下这个问题如何解决

bytcib 发表于 2019-11-28 13:42
按照您说的，我用jquery
把实例化对象变成了class="fgc-align"的那个div
var $v = $("div[class='fgc-a ...

那是因为活字格的DIV是个多层的DIV
你在实例化对象的时候把子元素移除就行了

1. var $v = $("[fgcname='sinf']"); //获取合并单元格所在jQuery 对象
   
2. <font color="#ff0000">$v.children().remove();</font>
   
3. var v = $v[0]; //将jQuery 对象转换为dom 对象
   
4. var spread = new GC.Spread.Sheets.Workbook(v);//将对象传参来实例化spreadJS

复制代码

1.活字格调用自定义的HTML页面的spread对象的时候相当于是Iframe的父页面调用子页面的对象
2.test.html页面中你window.load中你创建的spread对象并不是全局对象
以上两个问题都是会影响你JS执行的
除此之外，有些地方需要和你说一下，首先，在活字格中嵌入一个spreadJS的页面，是不需要在活字格的页面加载命令中去创建spread对象的，你的操作都是在iframe子页面中执行，你只需要通过活字格的按钮触发子页面的事件就可以了，可以在test.html中添加隐藏的button实现。其次，活字格的引用建议使用这种方式，我和我们spread同事确认，IO的报错是因为你的引用资源的顺序不正确。

Eric.Liang 发表于 2019-11-26 14:11
1.活字格调用自定义的HTML页面的spread对象的时候相当于是Iframe的父页面调用子页面的对象
2.test.html页 ...

表格的API：https://help.grapecity.com.cn/pa ... ion?pageId=23594555
单元格的API：https://help.grapecity.com.cn/pa ... ion?pageId=23594555

Eric.Liang 发表于 2019-11-26 14:11
1.活字格调用自定义的HTML页面的spread对象的时候相当于是Iframe的父页面调用子页面的对象
2.test.html页 ...

首先感谢您百忙之中的悉心解答，我们已经了解到上面的问题所在。

关于活字格内嵌spreadJS现在我们在做三种技术实现的demo：现在进行中的是不用html自定义插件，而利用一个大的合并的单元格嵌入spreadjs ，配合活字格不同类型的单元格控件功能来实现不依赖iframe子页面实现全部功能，我们简称为“嵌入法-活字格内嵌spreadjs”

目前通过jquery等方式获取div元素节点，已经实现将spreadjs实例加载到页面中，在利用这种技术方式实现文件导入的过程中已经解决了全局变量问题，但同时被两个新的问题阻碍和困扰着：

                              

1.    上传文件所在单元格的类型：选择了两种方式：

a)    在活字格中键入文本框类型（input）类型单元格，再通过document.getElementById().setAttribute("type","file");设置为文件格式（spreadjs官方就是通过这种file控件导入的），再通过按钮调取其中文件

b)   在活字格中键入附件类型类型单元格，再通过按钮调取其中文件

问题：虽然跑过没有报错，但也没有取到文件，两种情况console.log()绑excelFile (命令写在了相应的导入按钮中)在控制台中输出都是 “undefined”

2.    嵌入spreadjs所在div的区域错位

取到的所在div实例化spreadjs后，spreadjs表格会显示到div所在区域的下方，这个取到的div中还有几个子元素div，分别都取到后实例化spreadjs过但都变成不显示表格了

后来通过调试我将改变高度的方法：

function reset_sinf(v){

v.setAttribute("style","position:absolute; width: 1020px; left: 80px; height:  0px; top: 100px;overflow: visible;"); //改变高度和顶端距离使元素显示在正确位置

console.log(v);

};

写在了页面加载命令中，修改了黄色区域的样式，但是这个方法要根据布局时刻调整高度和顶端距离，十分不便，而且我深知这并不是正确的解决方法，后期问题很可能会遇到很多问题，所以需要跟咱们官方请教正确的解决方法。

bytcib 发表于 2019-11-28 11:58
首先感谢您百忙之中的悉心解答，我们已经了解到上面的问题所在。 关于活字格内嵌spreadJS现在我们在做三 ...

1.肯定是自己创建一个input是正确的，因为活字格的附件插件是自己的逻辑，无法直接应用于spreadJS
2.我对spread构建对象本身的代码并不是很了解，但是我看页面加载命令中我去掉设置style的代码话我看是有报错的
你现在的效果是spread并没有加到div里

如果spreadDOM对象是appendChild到div下的话，肯定位置是正确的

Eric.Liang 发表于 2019-11-28 12:22
1.肯定是自己创建一个input是正确的，因为活字格的附件插件是自己的逻辑，无法直接应用于spreadJS
2.我 ...

波浪线报错的那行函数调用您直接去掉就是原来的效果了

bytcib 发表于 2019-11-28 13:15
波浪线报错的那行函数调用您直接去掉就是原来的效果了

一样呀~，你的table并没有在div里。当然位置会有问题的

Eric.Liang 发表于 2019-11-28 12:22
1.肯定是自己创建一个input是正确的，因为活字格的附件插件是自己的逻辑，无法直接应用于spreadJS
2.我 ...

按照您说的，我用jquery
把实例化对象变成了class="fgc-align"的那个div
var $v = $("div[class='fgc-align']")
或者它子元素最大高度660px的那个div
var $v = $("div[class='fgc-align__inner fgc-textalign-left fgc-verticalalign-middle']");
结果都是实例化不进去，只有它们父元素那个id="r5c4p_div"的div被实例化才能被实例化进去这是为什么

Eric.Liang 发表于 2019-11-28 13:33
一样呀~，你的table并没有在div里。当然位置会有问题的

不是我不想放确实是放不进去