# 概要

spreadjs能够序列化,反序列化表格。熟练使用该功能能加快开发进度,减少代码量,降低业务复杂度,可以处理一些特别业务需求。

这几天在做一些报表相关的东西,涉及到的普查内容需要做成表格的形式。我们用的是葡萄城的spreadjs葡萄城地址

葡萄城中文示例地址

葡萄城论坛地址

# 问题描述

为了实现从一个已有的excel中获取 布局节约劳动力。 采用了 this.spread.toJSON() 得到数据,spread.fromJSON(JSON.parse(this.jsonStr)) 来反序列化数据

# 序列化

通过序列化可以将当前的整个spread序列化成为JSON格式进行存储。通过spread.toJSON(serializationOption)方法就可以做到,方法中还提供一些选项可以用来控制序列化的结果:

# 反序列化

通过反序列化可以将之前序列化的JSON格式的对象反序列化成为页面进行展示。通过spread2.fromJSON(json, jsonOptions)方法可以做到,同样方法中也提供一些选项来控制反序列化的结果:

# 设置可编辑和不可编辑单元格

在返序列化后,某些单元格是需要readonly的,有些是不能readonly的。某些是需要可以编辑的。由于顺序问题,造成readonly失效。调整列宽也是无效的。

# 解决方案

fromJSON后需要重新获取一下sheet对象,因为之前的sheet在fromJSON的时候已经被销毁,fromJSON后的sheet对象已经不是之前那个sheet对象了,您需要重新获取一下,然后再用sheet.setColumnWidth(0,0)设置列宽

答案来源

# spreadjs需要做一个填报二维表的功能

由于业务需要,在平台端要加入一个填报功能,让用spreadjs写。上次做的贫普的平台端填报是数据一对一的。现在的数据是一个二维表的填报形式。这个二维表要到要求能够根据数据来回显,页面默认是一条空行。可以添加行删除行。由于这个表是进行问卷调查的,所以还有一个cellType的应用。

# 关键代码记录

let table = sheet.tables.add('tableSales', 0, 0, 5, 5); // 添加二维表
let table = sheet.tables.findByName("tableSales"); // 通过表名获取表
 table.filterButtonVisible(false); // 隐藏筛选按钮
table.autoGenerateColumns(false); //  如果是通过手动编辑spreadjs客户端生成的表样,为false时,才能正常显示spread.fromJSON(surveyPageData); 中表头信息

spread.options.showHorizontalScrollbar = false; // 隐藏水平滚动条
spread.options.showVerticalScrollbar = false; // 隐藏垂直滚动条
spread.options.tabStripVisible = false; // 禁用下方sheet
spread.options.allowContextMenu = false; // 禁用menu
sheet.options.isProtected = true; // 启动保护



sheet.getRange(-1, 0, -1, 25, GC.Spread.Sheets.SheetArea.viewport).locked(false); // 指定地方可编辑





var items2 = [{text: '1.男', value: 1}, {text: '2.女', value: 2}];
var eComboBoxCellType = new GC.Spread.Sheets.CellTypes.ComboBox().items(items2).editable(true);
eComboBoxCellType.editable(true);
eComboBoxCellType.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);


      /**
       * 添加行
       */
      addRow(){
        let sheet = this.spread.getActiveSheet();
        let table = sheet.tables.findByName("tableSales");
        var sels = sheet.getSelections();
        var len = sels.length;
        if (len > 0) {
          var s = sels[0];
          sheet.addRows(sheet.getRowCount(), 1);
          console.log(sels, '选中的')
          console.log(table.dataRange(), '表格的range')
          table.insertRows(s.row - table.dataRange().row, 1, true)
          // sheet.addRows(s.row + 1, 1);
        }
      },

      /**
       * 删除行
       */
      delRow(){
        let sheet = this.spread.getActiveSheet();
        var sels = sheet.getSelections();
        var len = sels.length;
        if (len > 0) {
          var s = sels[0];
          sheet.deleteRows(s.row, s.rowCount);
        }
      }
    },

# 注意

在英文文档上写的type:any结果是,得用GC.Spread.Sheets.HorizontalAlign、GC.Spread.Sheets.ImageLayout这样的类型下面的类型才可以。根据实际情况用不同的类型

文档例子应用例子

spreadjs帮助手册

社区问题解决


 FarPoint.Web.Spread.DoubleCellType doubleType = new FarPoint.Web.Spread.DoubleCellType();            doubleType.CssClass =cssClass;

gcSpreadSheet1.Sheets[0].Cells[1, 2].HorizontalAlignment = GrapeCity.Windows.SpreadSheet.Data.CellHorizontalAlignment.Right;


this.fpSpread1.ActiveSheet.DefaultStyle.HorizontalAlignment = FarPoint.Win.Spread.CellHorizontalAlignment.Right;
this.fpSpread1.ActiveSheet.DefaultStyle.VerticalAlignment = FarPoint.Win.Spread.CellVerticalAlignment.Bottom;