前言

苦于spreadjs学习教程和案例非常少，于是自己慢慢学习，慢慢总结出来，便于复习与巩固

申请试用可以获取官方技术人员免费30天技术指导

学习常用链接

spreadjs官网
spreadjs示例
spreadjs学习视频
spreadjs文档Api

常见功能

1、初始化模板

// template
  <gc-spread-sheets-designer
        @designerInitialized="designerInitialized"
      ></gc-spread-sheets-designer>
// js 
 import { testJson } from "/static/testJson.js";// 导入模板json文件
 
 designerInitialized(designer) { // 初始化方法
      this.designer = designer;
      this.spread = this.designer.getWorkbook();
      this.spread.fromJSON(testJson);
    },

2、设计模板，绑定数据源，可以设置对应的字段和对应的单元格类型，有表格，复选框，超链接，组合框，按钮，文本等等

注意 设计组合框时候需要单元格右键设置标签，例如你需要给下拉框选项动态赋值的时候，多个下拉框，不打唯一标签tag，不知道是哪个下拉框的

3、绑定数据源给单元格赋值（例如给上面设置的name赋值）

// 依赖
   import * as GC from "@grapecity/spread-sheets";
// 自定义方法里面
   let data = {
        name: "张三"
      };
   let spreadNS = GC.Spread.Sheets;
   let source = new spreadNS.Bindings.CellBindingSource(data);
   this.sheet.setDataSource(source);

4、绑定数据源给表格赋值（例如给上面设置的table赋值）

// 依赖
   import * as GC from "@grapecity/spread-sheets";
// 自定义方法里面
   let data = {
            table: [
	          {
	            goodName: "口罩",
	            number: 1000,
	          }
        ],
      };
   let spreadNS = GC.Spread.Sheets;
   // 给表格列设置成中文（例如number设置成中文）
   let columnsData = [
        { lable: "商品名称", property: "goodName" },
        { lable: "数量", property: "number" },
      ];
   let tableColumns = [];
   columnsData.forEach((item, index) => {
	    let tableColumn = new spreadNS.Tables.TableColumn();
	    tableColumn.name(item.lable);
	    tableColumn.dataField(item.property);
	    tableColumns.push(tableColumn);
   });
   let table = this.spread.getActiveSheet().tables.all()[0];
   table.bindColumns(tableColumns);
   // 赋值
   let source = new spreadNS.Bindings.CellBindingSource(data);
   this.sheet.setDataSource(source);

5、绑定数据源给下拉框动态赋值和选项赋值

选项动态赋值，思路就是找到打了唯一标签tag的下拉框坐标，然后根据坐标赋值即可，代码如下

// 首先封装一个根据标签tag获取坐标的方法
 returnRowColumn(tag) {
      var sheet = this.spread.getActiveSheet();
      var rowNum = sheet.getRowCount();
      var colNum = sheet.getColumnCount();
      for (var i = 0; i < rowNum; i++) {
        for (var j = 0; j < colNum; j++) {
          if (sheet.getCell(i, j).tag() == tag) {
            return [i, j];
          }
        }
      }
    },
// 方法里面根据坐标给给下拉框选项赋值

this.sheet = this.spread.getActiveSheet();
let rowColum = this.returnRowColumn('sex');
var combo = this.sheet.getCellType(rowColum[0], rowColum[1]);
combo.items([
            { text: "女", value: "0" },
            { text: "男", value: "1" },
]);
// 给下拉框赋值
与 3、绑定数据源给单元格赋值 同理

5、获取模板

let content = JSON.stringify(this.designer.getWorkbook().toJSON());
console.log("content", content);

6、获取所有数据

 this.sheet = this.spread.getActiveSheet();
 let allData = this.sheet.getDataSource().getSource();
 console.log("allData ", allData);