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

图表部分增强

新增的瀑布图表

将运行总计显示为添加或减去的值，这些值排列为具有正值和负值的列，并通过颜色编码来区分两者。

初始列和最终列通常与水平轴对齐，而中间值通常是浮动列。

折线图的平滑线格式

SpreadJS 中的折线图现在支持平滑线条的格式。

图表的数据来自多个区域

与 Excel 类似，SpreadJS 现在支持使用多选插入图表。

除了选择连续的数据区域之外，还可以按 Ctrl 键选择多个不连续的区域来创建图表。

也可以通过在每个范围之间放置逗号来在代码中指定多个范围：

sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 400, 300, "Sheet1!$A$1:$C$4,Sheet1!$E$3:$G$3,Sheet2!$A$1:$A$3");

新增的棒棒糖迷你图

工作表增强

增强的粘贴选项

SpreadJS 现在支持更多粘贴特殊选项，包括：

• Comments -仅粘贴备注
• Validation - 仅粘贴数据验证
• All using Source theme - 全部使用源主题
• All except borders - 粘贴除边框外的所有单元格内容和格式
• Column Widths - 粘贴复制的一个列或一系列列的宽度
• Formulas and Number Formats - 仅粘贴公式和所有数字格式选项
• Values and Number Formats - 仅粘贴值和所有数字格式选项

扩展自定义表格列样式

当表自动扩展时，自定义表列样式现在可以正确复制。

TopRowChanged/LeftColumnChanged 事件增强

TopRowChanged 和 LeftColumnChanged 事件现在支持像素滚动。在此更改之前，必须滚动整个行或列才能触发事件，但现在，当启用像素滚动时，它将触发并为滚动中的任何更改提供滚动状态。

水平分布对齐

SpreadJS 现在支持文本的分布式水平对齐。

保留 Excel 排序状态

导入 Excel 文件时，SpreadJS 现在会保留排序条件，以免丢失。

透视表增强

样式中字体设置

将字体选项拆分为不同的属性，以更好地支持 Excel 中的数据透视表和表格字体选项。

通常，单元格上的字体属性可用于设置所有字体选项，新版本还提供了 API 来设置单独的字体选项，如 fontFamily、fontSize、fontWeight 和 fontStyle：

// Font
activeSheet.getCell(2, 0).font('italic normal 12px Mangal');
activeSheet.getCell(4, 0).font('normal bold 15px Arial Black');
activeSheet.getCell(6, 0).font('normal normal 18px Georgia');

// FontFamily
activeSheet.getCell(2, 1).fontFamily('Mangal');
activeSheet.getCell(4, 1).fontFamily('Arial Black');
activeSheet.getCell(6, 1).fontFamily('Georgia');

// FontSize
activeSheet.getCell(2, 2).fontSize('12px');
activeSheet.getCell(4, 2).fontSize('20px');
activeSheet.getCell(6, 2).fontSize('28px');

// FontWeight
activeSheet.getCell(2, 3).fontWeight('bold');
activeSheet.getCell(4, 3).fontWeight('normal');

// Italic
activeSheet.getCell(2, 4).fontStyle('italic');
activeSheet.getCell(4, 4).fontStyle('normal');

区域偏移支持

let style = new GC.Spread.Sheets.Style();
    style.backColor = "rgb(247, 167, 17)";
    let labelPivotAreaWithOffset = {
        labelOnly: true,
        references: [{
            fieldName: "Salesperson",
            items: ["Alan"]
        }],
        offset: {
            row: 1,
            col: 0,
            rowCount: 3,
            colCount: 1
        }
    };
    pivotTable.setStyle(labelPivotAreaWithOffset, style);
    let cornerPivotAreaWithOffset = {
        type: GC.Spread.Pivot.PivotAreaType.corner,
        offset: {
            row: 0,
            col: 1,
            rowCount: 1,
            colCount: 1
        }
    };
    pivotTable.setStyle(cornerPivotAreaWithOffset, style);
    let topRightPivotAreaWithOffset = {
        type: GC.Spread.Pivot.PivotAreaType.topRight,
        offset: {
            row: 0,
            col: 0,
            rowCount: 1,
            colCount: 4
        }
    };
    pivotTable.setStyle(topRightPivotAreaWithOffset, style);

集算表增强

引用计算字段

DataManager 支持从数据源添加字段，新版本还支持具有公式数据类型的虚拟列。

之后可以在集算表的视图中使用这些公式列来显示运行总和或股票价值比率等内容：

// Add product table.
var productTable = dataManager.addTable("productTable", {
    remote: {
        read: {
            url: baseApiUrl + "/Product"
        }
    },
    schema: {
        columns: {
            TotalUnits: {
               dataType: "formula",
               value: "[@UnitsInStock] + [@UnitsOnOrder]"
            },
            StockValue: {
                dataType: "formula",
                value: "[@UnitPrice] * ([@TotalUnits])"
            }
        }
    }
});

// Bind a view to the table sheet
var myView = productTable.addView("myView", [
    { value: "Id", caption: "ID", width: 50 },
    { value: "ProductName", caption: "Name", width: 170 },
    { value: "UnitPrice", caption: "Unit Price", style: { formatter: "$#,##0.00" }, width: 120 },
    { value: "UnitsInStock", caption: "Units In Stock", width: 120 },
    { value: "TotalUnits", caption: "Total Units", width: 120 },
    { value: "StockValue", caption: "Stock Value", style: { formatter: "$#,##0.00" }, width: 120 },
    { value: "=SUM([#1:@[UnitPrice]]*([#1:@[UnitsInStock]]+[#1:@[UnitsOnOrder]])", caption: "Running SUM", style: { formatter: "$#,##0.00" }, width: 150 },
    { value: "=[@StockValue]/SUM([UnitPrice] * ([UnitsInStock] + [UnitsOnOrder]))", caption: "Stock Value Ratio", style: { formatter: "0.00%" }, width: 160 }
]);

针对列的触发公式

集算表中的触发器公式是根据特定条件或触发器进行计算的公式。

这意味着可以根据特定条件重新计算数据，在输入新值时清理数据，或为列提供默认值。以下是触发公式的一些示例：

var table = dataManager.addTable("Table", {
    schema: {
        columns: {
            createdDate: {
                dataType: "Date",
                trigger: {
                  when: "onNew",            <<------- apply the formula on created
                  formula: "=NOW()",        <<------- trigger formula to set current time
                  // fields: "*"            <<------- when triggered on new, there is no need to specify the affected fields
                },
            },
            updatedDate: {
                dataType: "Date",
                trigger: {
                  when: "onNewAndUpdate",   <<------- apply the formula on created and updated
                  formula: "=NOW()",        <<------- trigger formula to set current time
                  fields: "*"               <<------- all fields changed will have the formula applied to them
                },
            },
            label: {
                trigger: {
                    when: "onNewAndUpdate",      <<------- apply the formula on updated
                    formula: "=UPPER([@label])"  <<------- use the upper formula on the input text of the label field
                    fields: "label",             <<------- when the current column value is updated the formula will be applied
                  },
            },
            amount: {
                dataType: "number",
                trigger: {
                    when: "onNewAndUpdate",             <<------- apply the formula on updated
                    formula: "=[@price] * [@quantity]"  <<------- automatically evaluate the amount
                    fields: "price,quantity",           <<------- the changes of the price and quantity columns will cause the formula to calculate
                  },
            },
            price: { dataType: 'number' },
            quantity: { dataType: 'number' }
        },
    }
});

设计器增强

SpreadJS 支持为组合键添加自定义快捷命令。在 Github 的项目中实现了一些 Excel 标准，用户可以从 GitHub 下载：https://github.com/GrapeCity/spreadjs-resources

在 v17 版本中，默认将此项目中的快捷方式添加到设计器组件中，以便在设计器中无需任何额外代码即可使用快捷方式。