dhtmlxSpreadsheet是用纯JavaScript编写的开源电子表格小部件，可让您快速在网页上添加类似于Excel的可编辑数据表。高度可定制的JavaScript电子表格组件，具有优雅的Material样式，可安全、方便地编辑和格式化数据。
慧都网可免费下载dhtmlxSpreadsheet试用版
您可以调整dhtmlxSpreadSheet的所需设置满足您的需求。可用的配置选项使您可以限制行和列的数量，更改工具栏的外观以及控制菜单和编辑栏的可见性。如果需要，您还可以在只读模式下初始化SpreadSheet。
工具列
SpreadSheet的工具栏由几个控件块组成，可以根据需要进行更改。默认情况下，工具栏中有以下控件块：“撤消”，“颜色”，“装饰”，“对齐”，“格式”，“帮助”：
您可以从列表中添加更多块：“锁定”，“清除”，“行”，“列”，“文件”。
可以通过组件的toolbarBlocks配置选项来调整工具栏的结构，该选项是一个包含表示控件名称的字符串的数组。
var spreadsheet = new dhx.Spreadsheet(document.body, {
// full toolbar
toolbarBlocks: [
"undo", "colors", "decoration", "align", "lock", "clear",
"rows", "columns", "help", "format", "file"
]
});
您还可以通过按期望的顺序枚举toolbarBlocks数组中的必要元素来指定自己的工具栏结构，例如：
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
});
您还可以自定义SpreadSheet的只读行为。
单元格的自定义数字格式
可以将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'" }
];
您可以重新定义默认格式的配置，也可以通过formats config选项指定自己的数字格式：
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帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率
想要购买dhtmlxSpreadSheet正版授权，或了解慧都APS系统请点击【咨询在线客服】
本文章转载自【慧都科技】evget欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果