dhtmlxSpreadsheet是用纯JavaScript编写的开源电子表格小部件，可让您快速在网页上添加类似于Excel的可编辑数据表。高度可定制的JavaScript电子表格组件，具有优雅的Material样式，可安全、方便地编辑和格式化数据。

点击下载dhtmlxSpreadsheet试用版

您可以调整dhtmlxSpreadSheet的所需设置满足您的需求。可用的配置选项使您可以限制行和列的数量，更改工具栏的外观以及控制菜单和编辑栏的可见性。如果需要，您还可以在只读模式下初始化SpreadSheet。

SpreadSheet的工具栏由几个控件块组成，可以根据需要进行更改。默认情况下，工具栏中有以下控件块：“撤消”，“颜色”，“装饰”，“对齐”，“格式”，“帮助”：

var spreadsheet = new dhx.Spreadsheet(document.body, {
    // full toolbar
    toolbarBlocks: [
        "undo", "colors", "decoration", "align", "lock", "clear", 
        "rows", "columns", "help", "format", "file"
    ]
});

var spreadsheet = new dhx.Spreadsheet("cont", {
    toolbarBlocks: ["help","colors", "align", "decoration", "lock", "clear"]
});

编辑栏

由于SpreadSheet的结构是灵活的，因此您可以打开/关闭编辑栏以获得所需的组件外观。使用editLine配置选项隐藏/显示编辑栏：

var spreadsheet = new dhx.Spreadsheet(document.body, {
    editLine: true
});

初始化SpreadSheet时，它具有网格的初始配置，该网格由1000列和25行组成。但是，当此限制用完时，会自动呈现其他行和列，因此您无需添加它们。但是，如果要限制它们，则可以指定网格中确切的行数和列数。为此，请使用colsCount和rowsCount 选项：

var spreadsheet = new dhx.Spreadsheet(document.body, {          
    colsCount: 10,
    rowsCount: 10
});

从v4.0开始，可以在电子表格的左侧固定（或“冻结”）列，以使它们变为静态，而其余列保持可移动状态。为此，只需将要冻结的列数设置为leftSplit属性的值即可：

var spreadsheet = new dhx.Spreadsheet(document.body, {          
    leftSplit:3 
});

默认情况下，SpreadSheet的菜单是隐藏的。您可以通过相应的配置选项菜单将其打开/关闭：

var spreadsheet = new dhx.Spreadsheet(document.body, {
    menu: false
});

也可以通过只读配置选项启用只读模式以防止编辑SpreadSheet单元：

var spreadsheet = new dhx.Spreadsheet("cont", {
    readonly: true
});

单元格的自定义数字格式

可以将5种默认格式应用于单元格的值：

defaultFormats = [
    { name: "Common", id: "common", mask: "", example: "2702.31" },
    { name: "Number", id: "number", mask: "#,##0.00", example: "2702.31" },
    { name: "Percent", id: "percent", mask: "#,##0.00%", example: "27.0231%" },
    { name: "Currency", id: "currency", mask: "$#,##0.00", example: "$2702.31" },
    { name: "Text", id: "text", mask: "abc", example: "'2702.31'" }
];

var spreadsheet = new dhx.Spreadsheet(document.body, {          
    formats: [
        {
            name: "U.S. Dollar",
            id: "currency",
            mask: "$#,##0.00"
        },
        {
            name: "Euro",
            id: "euro",
            mask: "[$€]#.##0,00",
            example: "1000.50"
        },
        {
            name: "Swiss franc",
            id: "franc",
            mask: "[$CHF ]#.##0,00"
        }
    ]
});

dhtmlxSpreadSheet提供了以Excel格式导入/导出数据的可能性。该组件使用基于WebAssembly的库：Excel2Json 和JSON2Excel来导入/导出数据。

安装必要的库之后，您需要通过相应的配置选项-importModulePath或exportModulePath来设置worker.js文件的路径（本地文件或CDN文件）：

var spreadsheet = new dhx.Spreadsheet(document.body, {  
    importModulePath: "../libs/excel2json/1.0/worker.js"
    exportModulePath: "../libs/json2excel/1.0/worker.js"
});

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率