跳到主要内容

配置

您可以根据需要调整 DHTMLX Spreadsheet 的各项设置。可用的配置选项允许您限制行数和列数、更改工具栏外观，以及控制菜单和编辑栏的显示。如有需要，您还可以将 Spreadsheet 初始化为只读模式。

工具栏​

Spreadsheet 的工具栏由若干控件块组成，可根据需要进行修改。默认情况下，工具栏包含以下控件块："undo"、"colors"、"font"、"decoration"、"align"、"cell"、"format"、"actions"。您还可以从以下列表中添加更多控件块："lock"、"clear"、"rows"、"columns"、"file"、"help"。

工具栏结构可通过组件的 toolbarBlocks 配置选项进行调整，该选项是一个包含控件名称字符串的数组。

您也可以通过在 toolbarBlocks 数组中按所需顺序列举必要元素来自定义工具栏结构，例如："colors"、"align"、"cell"、"decoration"、"lock"、"clear"。

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    toolbarBlocks: ["colors", "align", "cell", "decoration", "lock", "clear"]
});

工具栏高度可定制。您可以添加新控件、更改控件图标，以及应用所需的图标集。

编辑栏​

由于 Spreadsheet 结构灵活，您可以切换编辑栏的显示状态，以获得所需的组件外观。使用 editLine 配置选项来隐藏或显示编辑栏。

行数和列数​

Spreadsheet 初始化时，默认以 26 列和 1000 行的网格启动。当达到此限制后，系统会自动渲染额外的行和列，无需手动添加。不过，如果您希望对其进行限制，可以指定精确的行数和列数。为此，请使用 colsCount 和 rowsCount 选项。

Spreadsheet 的菜单默认隐藏。您可以通过相应的配置选项 menu 切换其显示状态：

只读模式​

您还可以通过 readonly 配置选项启用只读模式，以防止对 Spreadsheet 单元格进行编辑。

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

在只读模式下，工具栏、菜单和公式栏会被隐藏。用户可以使用键盘在单元格间导航，使用鼠标选择单元格，以及复制和搜索单元格。编辑操作会被拒绝，并向屏幕阅读器播报"The sheet is read-only"。填充柄会被隐藏。详细信息请参阅 readonly 文章。要了解键盘和屏幕阅读器用户如何使用只读 Spreadsheet，请参阅无障碍指南的只读设置部分。

要在只读模式下关闭键盘导航和选择，请将 selection 选项设置为 false：

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    readonly: true,
    selection: false,
});

您也可以自定义 Spreadsheet 的只读行为。

单元格选择​

默认情况下，用户可以使用鼠标和键盘选择单元格，并且 Spreadsheet 具有活动单元格。要关闭选择，请将 selection 配置选项设置为 false：

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    selection: false,
});

此时，Spreadsheet 没有活动单元格，无法通过界面选择或编辑单元格，上下文菜单也不可用。

要在运行时关闭和开启选择，请使用 selection.disable() 和 selection.enable() 方法。selection.isDisabled() 方法用于检查选择是否已关闭。

没有选择时，网格会成为键盘可直接跳过的单个 Tab 停靠点。请参阅无障碍指南的只读设置部分。

单元格自定义数字格式​

您可以对单元格值应用 7 种默认格式："Common"（通用）、"Number"（数字）、"Percent"（百分比）、"Currency"（货币）、"Date"（日期）、"Time"（时间）、"Text"（文本）。

您可以通过 formats 配置选项重新定义默认格式或指定自定义数字格式。详细信息请参阅数字格式化文章。

导出/导入模块路径​

DHTMLX Spreadsheet 支持以 Excel 格式导入和导出数据。该组件使用基于 WebAssembly 的库：Excel2Json 和 JSON2Excel 来处理数据的导入/导出。

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

详细信息请参阅数据加载与导出文章。

Need more help?Contact Support