dhtmlxSpreadSheet的各种配置满足您的各种需求

2022-07-10 14:58:30

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

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

您可以在慧都网免费下载dhtmlxSpreadSheet

工具列

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

本文章转载自【慧都科技】evget欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果

dhtmlxSpreadSheet的各种配置满足您的各种需求

码农公寓

相关文章