dhtmlxSpreadSheet用户指南：如何调整dhtmlxSpreadSheet各种配置

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

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"    ]});

您还可以通过按期望的顺序枚举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系统请点击【咨询在线客服】
标签：

来源：慧都