SpreadJS 纯前端表格控件 - V14.0 Update1 新特性

公式函数相关

SpreadJS 在持续不断地加入最新的公式与函数，方便最终用户使用这些公式和函数快速的构造各类数据表格及表单。

1. LET 函数增强

LET 函数为计算结果分配名称。 这允许在公式内存储中间表达式，值或定义的名称。 这些名称仅适用于 LET 函数内的范围。 与编程中的变量类似，LET 函数是通过 Excel 内置的公式语法完成的。

要使用 SpreadJS 的 LET 函数，您需要定义名称和与之关联的值，以及使用名称和值所组成的最终计算表达式。 您必须定义至少一个名称/值（一个变量），LET 函数最多支持 126 组这样的变量。

2. TIMEAGO 函数

使用这个函数可以计算起点到当前时间点的时间。

3. WEBSERVICE + FilterJSON 函数

WEBSERVICE 函数请求一个允许跨域资源共享（CORS）的网站，最终得到处理成字符串的返回值。

FILTERJSON 函数将一个有效的 json 字符串转化为一个值、一个对象或者一个可以拆分的对象数组。

您可以同时使用 FILTERJSON 函数以及 WEBSERVICE 函数从服务器上获取 json 对象并在 SpreadJS 中使用。

spread.options.allowDynamicArray = true; // allow dynamicArray
sheet.setFormula(0,0,'=FILTERJSON(WEBSERVICE("https://restcountries.eu/rest/v2/name/China"))'); // WEBSERVICE get the json data.
sheet.setFormula(0,1,'=PROPERTY(A1,"name")'); // "China"

                            

形状相关

1. 支持超链接

SpreadJS 支持给形状添加超链接。

    // 你可以使用以下代码给形状，线条或者组合形状添加超链接。
    var heart = sheet.shapes.add("shape", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
    heart.hyperlink({url: "http://www.google.com", target: 0, tooltip: 'goes to google'});
 
    var lineShape = sheet.shapes.addConnector("line", GC.Spread.Sheets.Shapes.ConnectorType.straight, 290, 20, 420, 170);
    lineShape.hyperlink({url: "http://www.grapecity.com", target: 0, tooltip: 'goes to grapecity'});
 
    var cube = sheet.shapes.add("cube", GC.Spread.Sheets.Shapes.AutoShapeType.cube, 100, 240, 150, 150);
    var can = sheet.shapes.add("can", GC.Spread.Sheets.Shapes.AutoShapeType.can, 400, 240, 150, 150);
    var shapes = [cube, can];
    var groupShape = sheet.shapes.group(shapes);
    groupShape.hyperlink({url: "https://www.grapecity.com/spreadjs/demos/", target: 0});


                            

2. 填充效果

SpreadJS 形状提供渐变填充，图片填充以及纹理填充。

3. 区域快照

SpreadJS 提供区域快照功能，区域快照是在工作表中创建一种视觉引用的功能，区域快照创建一个引用区域的镜像图片。在数据引用区域的内容发生变化的同时，快照图片也会发生改变。

迷你图相关

SpreadJS 的迷你图（Sparkline）作为很重要的数据可视化手段，可以以灵活的方式多角度展示数据规律及特性，此次新版本中也加入了多个迷你图方面的更新。

1. 直方函数迷你图

（离散型）

（连续型）

2. KPI 函数（仪表盘）迷你图

SpreadJS 的 KPI 函数迷你图可以使你更轻松地在财务或者一般行政事务中衡量员工绩效。在下面的工作表中看一下不同员工的关键绩效。

3. IMAGE函数迷你图

使用 SpreadJS 的 IMAGE 函数可以插入一个图像到单元格中，图片数据源必须是 URL 或者 base64 字符串。

图表相关

1. 坐标轴增强

您可以自己定义图表的横纵坐标轴样式。在 SpreadJS 中使 用Javascript 代码自定义属性，例如颜色，线条样式，刻度线和刻度线标签位置，格式以及标题字体大小。

2. 自定义系列

SpreadJS 已支持以下图标元素的自定义：

• chartType
• axisGroup
• backColor
• backColorTransparency
• border
• name
• xValues
• yValues
• errorBars
• trendlines
• dataLabels
• bubbleSizes
• doughnutHoleSize
• gapWidth
• overlap

界面&布局相关

1. 标签页位置

在 SpreadJS 的新版本中，标签页的位置已经可以上、下、左、右四个位置指定摆放。

2. 底部冻结行跟随最后一行

3. Undo/Redo 栈

SpreadJS 支持获取撤销栈以及保留栈，同时您可以在 undoManager 中根据 maxSize 设置撤销栈以及保留栈的长度。

// 您可以通过 getRedoStack 方法获取到 SpreadJS 的保留栈。
 
    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    let redoStack = spread.undoManager().getRedoStack();
 
// 您可以通过 getUndoStack 方法获取到 SpreadJS 的撤销栈。
 
    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    let undoStack = spread.undoManager().getUndoStack();
 
// 您可以通过 maxSize 方法获取或者设置保留栈或者撤销栈的最大长度。
 
    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    let undoManager = spread.undoManager();
    undoManager.maxSize(20); // set max size.
    let maxSize = undoManager.maxSize(); // get max size.

                            

4. 复制粘贴跳过隐藏区域

提供了一个选项来表明当粘贴时是否应该跳过不可见的区域。

// SpreadJS 通过设置工作簿的 pasteSkipInvisibleRange 配置（默认值是false）支持了粘贴时跳过不可见的区域。例如:
workbook.options.pasteSkipInvisibleRange = true;

                            

不可见的例子:

• 筛选
• 组合
• 列宽为0或者行高为0
• 隐藏

行为相关

1. 撤销后，选中位置更新到上一次操作的位置

选中的位置会因为撤销操作而改变，从而让用户更直观的感受到撤销动作的执行。