SpreadJS数据源与单元格对应关系

收藏

我现在在线编辑器中定义了模板并绑定数据源，然后将模板保存，当后台有新的请求数据时我在加载模板并将数据填充的模板中，模板中格式要按照定义的不变只是填充的数据改变。模板保存为json格式。

https://demo.grapecity.com.cn/Sp ... /demos/tableBinding，这个demo方式我试过，给整个表格绑定数据源，格式会出问题。

所以，我要将指定的数据源帮到到指定的单元格，我如何指定单元格和数据源的对应关系？

chenxiaofenghui · chenxiaofenghui

你好，我最终要做成如下图的报表，此图是通过加载模板json文件生成的，其中的红框中的数据是需要从数据库中获取并填充的，其他的样式及表头部分都按照定义好的模板，我应如何将后台传过来的数据填充到模板中呢。模板是通过在线编辑器生成的json文件。

KevinChen · KevinChen

chenxiaofenghui 发表于 2019-1-11 15:21
你好，我最终要做成如下图的报表，此图是通过加载模板json文件生成的，其中的红框中的数据是需要从数据库 ...

您好，根据您的模板来看，比较适合用表格绑定来实现您的需求，

在学习指南中，表格绑定的Demo可能比较复杂不够直观来参考，

在我们官方技术博客上有一篇用Java后台结合Spread JS实现前后端交互的完整示例，

该示例展示了如何上传模板、导入模板、填报、下载等操作，

地址是：https://www.grapecity.com.cn/blogs/spreadjs-combined-with-java

相信这个示例给您提供了解决方案，您可以参考一下。

chenxiaofenghui · chenxiaofenghui

KevinChen 发表于 2019-1-11 15:27
您好，根据您的模板来看，比较适合用表格绑定来实现您的需求，

在学习指南中，表格绑定的Demo可能比较 ...

请问可以这样定义吗？然后在后台更新field-name属性值就可以吗？

我想用附件图片的这种形式。

chenxiaofenghui · chenxiaofenghui

本帖最后由 chenxiaofenghui 于 2019-1-14 16:21 编辑

KevinChen 发表于 2019-1-11 15:27
您好，根据您的模板来看，比较适合用表格绑定来实现您的需求，

在学习指南中，表格绑定的Demo可能比较 ...

我把需求简单说一下吧

在线编辑器中定义模板，例如只是添加了一行数据，如图一；保存该模板为.json的文件，然后页面中加载.json的模板文件（这步可以实现），然后将后台返回的数据添加到表格中。图二为添加之后的形式。

以下是我的代码：

function initSpread(spread) {
         var sd = data;
         if (sd.length > 0) {
            if (!spread) {
                  return;
            }
            spread.suspendPaint();
            spread.fromJSON(sd[0]);
            spread.newTabVisible = false;
            var sheetCount = spread.getSheetCount();
            for (var i = 0; i < sheetCount; i++) {
                  var sheet = spread.getSheet(i);
                  sheet.setColumnVisible(0, false, GC.Spread.Sheets.SheetArea.rowHeader);
                  sheet.setRowVisible(0, false, GC.Spread.Sheets.SheetArea.colHeader);
                  sheet.options.gridline = {
                     showHorizontalGridline: false,
                     showVerticalGridline: false
                  };
                  var baseRow = 3,
                     baseCol = 2;
                  for (var r = 0; r < 6; r++) {
                     for (var c = 0; c < 7; c++) {
                        sheet.setFormatter(baseRow + r, baseCol + c, new GC.Spread.Formatter.GeneralFormatter("d"), GC.Spread.Sheets.SheetArea.viewport);
                     }
                  }
            }

            var activeSheet=spread.sheets[0];
            for(let i=1;i<=dataSource.length;i++){
            activeSheet.getCell(i,0).value(dataSource[i-1].deviceName);
            activeSheet.getCell(i,1).value(dataSource[i-1].tagName);
            activeSheet.getCell(i,2).value(dataSource[i-1].tagType);
            activeSheet.getCell(i,3).value(dataSource[i-1].nowValue);
            activeSheet.getCell(i,4).value(dataSource[i-1].timestamp);
            }
                     spread.resumePaint();
         }
}

其中：
for(let i=1;i<=dataSource.length;i++){
            activeSheet.getCell(i,0).value(dataSource[i-1].deviceName);
            activeSheet.getCell(i,1).value(dataSource[i-1].tagName);
            activeSheet.getCell(i,2).value(dataSource[i-1].tagType);
            activeSheet.getCell(i,3).value(dataSource[i-1].nowValue);
            activeSheet.getCell(i,4).value(dataSource[i-1].timestamp);
            }

是我现在添加数据的部分，但是不知道具体的添加位置？我想通过设置绑定数据的形式来实现。

请问可否提供一些指导。

KevinChen · KevinChen

我这边提供一个简单的Demo，您参考一下，表格绑定的方法。

chenxiaofenghui · chenxiaofenghui

本帖最后由 chenxiaofenghui 于 2019-1-17 14:58 编辑

抱歉我已经解决了问题谢谢

chenxiaofenghui · chenxiaofenghui

本帖最后由 chenxiaofenghui 于 2019-1-17 16:37 编辑

KevinChen 发表于 2019-1-14 19:36
我这边提供一个简单的Demo，您参考一下，表格绑定的方法。

你好现在有个不确定的问题需要确认一下在线编辑器可以绑定数据到折线图等图形结构吗？

具体功能是：在设计器中用表格形式绑定数据源，并且给指定的列绘制折线图。当后台加载此模板后，更新表格数据的同时也能更新折线图，不知这个功能是否可实现。另外，我用同一个表格数据绘制的折线图在设计器中与Excel中是不同的，Excel中的是我想要的，不知这是什么原因，还是我哪里做的不对？？

这个是Excel中绘制的（如图一111）；这个是设计器中绘制的（如图二222）。（两个表格数据是复制粘贴得到的，完全相同）