SpreadJS V17.0 发布，强大的报表插件首次发布，极大简化报表设计及生成过程，还具备填报能力

我们自豪地介绍这一版本中的重磅更新——全新报表插件。作为在数据处理和表格文档协同编辑方面提供类 Excel 功能的领导者，SpreadJS 一直致力于降低企业的研发成本和项目交付风险。在最新的 v17.0 版本中，我们特别强调了报表插件的全新升级和功能扩展，以满足更广泛的业务场景需求。

新的报表插件将进一步强化用户对于数据的管理、分析和呈现能力，不仅使得类 Excel 报表设计变得更加简便高效，而且通过引入甘特图插件、瀑布图表、棒棒糖迷你图等新功能，为数据可视化提供了更多可能性。此外，增强的粘贴选项等细节改进，旨在优化用户的操作体验，确保高效准确地完成数据填报和报表生成。

葡萄城通过 SpreadJS v17.0 的发布，再次展现了我们对技术创新的承诺和对客户需求的深刻理解。全新的报表插件不仅标志着我们产品功能的进一步丰富和完善，更为各行各业的数字化转型提供了强大的支持。

新插件 / Addon

报表插件 / ReportSheet

各类报表示例

报表设计器

报表性能

测试环境：

• ThinkPad
• Memory: 32G
• CPU: 13th Gen Intel(R) Core(TM) i7-13700H 2.40 GHz
• Chrome: 119.0.6045.160 (Official Build) (64-bit)

计量单位：

• 时长单位：ms / 毫秒
• 内存单位：MB / 兆

基于行的报表

分组报表

交叉统计表

支持使用 Excel 作为报表模板

支持报表设计向导功能

正式版本的甘特图插件 / GanttSheet

甘特图插件允许您创建工作分解、生产计划及计划进度等甘特图类型。

是一个快速、数据绑定的 DataTable 视图，具有甘特图行为和电子表格用户界面。使用甘特图有以下的价值：

• 可视化规划：提供项目任务、时间表和依赖关系的清晰可视化表示，有效地规划和管理项目变得更加容易。
• 任务依赖性：允许定义和可视化任务依赖性，了解不同任务的链接方式以及延迟对整个项目时间表的影响。
• 进度跟踪：通过标记已完成的任务并将其与计划时间表进行比较来跟踪每个任务和整个项目的进度。
• 截止日期管理：能够设置和管理项目里程碑和截止日期，确保项目保持正轨并在指定的时间范围内完成。

在正式版本中，增加了“资源”能力

图表部分增强

新增的瀑布图表

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

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

折线图的平滑线格式

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

以上是此次 SpreadJS V17.0 新版本的主要增强和优化，如果您对SpreadJS表格控件感兴趣，欢迎前往葡萄城SpreadJS官网下载产品安装包，同步体验SpreadJS V17.0 的全新功能。

---

关于葡萄城

葡萄城成立于 1980 年，是专业的软件开发技术和低代码平台提供商，以“赋能开发者”为使命，致力于通过各类软件开发工具和服务，创新开发模式，提升开发效率，推动软件产业发展，为“数字中国”建设提速。