dhtmlxSpreadSheet开源电子表格小部件创建教程
- 2020 年 10 月 19 日
- 笔记
dhtmlxSpreadSheet是用纯JavaScript编写的开源电子表格小部件，可让您快速在网页上添加类似于Excel的可编辑数据表。高度可定制的JavaScript电子表格组件，具有优雅的Material样式，可安全、方便地编辑和格式化数据。
本指南将为您提供有关如何在页面上创建dhtmlxSpreadSheet的详细说明，以利用强大的工作表功能丰富您的应用程序。请按照以下步骤获取可立即使用的组件：
- 在页面上包含dhtmlxSpreadSheet源文件。
- 为dhtmlxSpreadSheet创建一个容器。
- 使用对象构造函数初始化dhtmlxSpreadSheet。
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxSpreadSheet</title>
<script type="text/javascript" src="/codebase/spreadsheet.js"></script>
<link rel="stylesheet" type="text/css" href="/codebase/spreadsheet.css">
</head>
<body>
<div id="spreadsheet"></div>
<script>
// creating dhtmlxSpreadSheet
var spreadsheet = new dhx.SpreadSheet("spreadsheet",{document.body});
</script>
</body>
</html>
包括源文件
下载安装包并将其解压缩到项目的文件夹中。
要创建dhtmlxSpreadSheet，您需要在页面上包括2个源文件：
- spreadsheet.js
- spreadsheet.css
确保为这些文件设置正确的相对路径：
<script type="text/javascript" src="codebase/spreadsheet.js"></script> <link rel="stylesheet" href="codebase/spreadsheet.css">
SpreadSheet包的结构如下：
- sources-库的源代码文件；它们易于阅读，主要用于调试；
- 代码库-库的混淆代码文件；它们体积小得多，可用于生产。准备好将这些文件包括在您的应用程序中；
- 样本-代码样本；
- docs-组件的完整文档。
创建容器
为SpreadSheet添加一个容器并为其指定一个ID，例如“ ssheet”：
<div id="ssheet"></div>
初始化dhtmlxSpreadSheet
使用dhx.Spreadsheet对象构造函数初始化dhtmlxSpreadSheet 。构造函数有两个参数：
- 电子表格的HTML容器
- 具有配置属性的对象
// creating dhtmlxSpreadSheet
var ssheet = new dhx.Spreadsheet("ssheet", {// config options});
配置属性
这是可以在SpreadSheet配置对象中指定的属性列表：
- toolbarBlocks-（数组）指定将在电子表格的工具栏中显示的按钮块
- editLine-（boolean）隐藏/显示编辑栏
- menu-（布尔值）隐藏/显示菜单
- colsCount-（number）设置电子表格初始化时将具有的列数
- rowsCount-（number）设置电子表格在初始化时将具有的行数
- readonly-（boolean）启用/禁用只读模式
- exportModulePath-（字符串）设置导出模块的路径
- importModulePath-（字符串）设置导入模块的路径
- autoFormat-（boolean）定义是否自动检测单元格内容的格式
- 格式-（数组）定义数字格式列表
您可以在初始化期间将配置选项设置为构造函数的第二个参数：
var ssheet = new dhx.Spreadsheet("ssheet", {
rowsCount:10,
colsCount:10
});
