SpreadSheet在HTML中做出Excel表格效果教程
如何开始
本文档专用于更新的3.0版dhtmlxSpreadSheet。要获取有关先前版本2.1的信息，请遵循相关文档。
这个清晰而全面的教程将指导您完成需要完成的步骤，以便在页面上获得功能齐全的dhtmlxSpreadSheet。当您需要保存计算结果并复制它们时，该组件对于管理大量数据特别有效。
步骤1.包括源文件
从创建HTML文件开始，并将其命名为index.html。然后继续将SpreadSheet源文件包含到创建的文件中。 dhtmlxSpreadSheet软件包的详细说明在此处给出。
有两个必要的文件：
- dhtmlxSpreadSheet的JS文件
- dhtmlxSpreadSheet的CSS文件
- 指向Google字体源文件的链接，以正确显示字体。
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxSpreadSheet</title>
<script src="codebase/spreadsheet.js"></script>
<link href="codebase/spreadsheet.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500"
rel="stylesheet">
</head>
<body>
<script>
// your code will be here
</script>
</body>
</html>
步骤2.创建SpreadSheet
现在您可以将SpreadSheet添加到页面。首先，我们创建一个DIV容器，然后将dhtmlxSpreadSheet放入其中。因此，您的步骤将是：
- 在index.html文件中指定DIV容器
- 使用dhx.SpreadSheet构造函数初始化dhtmlxSpreadSheet
作为参数，构造函数使用HTML容器将SpreadSheet放入和SpreadSheet配置对象。
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxSpreadSheet</title>
<script src="codebase/spreadsheet.js"></script>
<link href="codebase/spreadsheet.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500"
rel="stylesheet">
</head>
<body>
<div id="spreadsheet_container"></div>
<script>
var mySSheet = new dhx.Spreadsheet("spreadsheet_container", {//config options});
</script>
</body>
</html>
步骤3.设置SpreadSheet配置
接下来，除了默认选项外，您还可以指定初始化时SpreadSheet组件希望具有的其他配置选项。
您可以使用几个选项来调整SpreadSheet的外观，例如：toolbarBlocks，rowsCount和colsCount。检查详细信息。
var spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
toolbarBlocks: ["columns", "rows", "clear"],
rowsCount: 10,
colsCount: 10
});
dhtmlxSpreadSheet的配置非常灵活，因此您可以随时更改它。阅读相关指南，以了解配置SpreadSheet的基础知识。
步骤4.将数据加载到SpreadSheet
最后一步是用数据填充SpreadSheet。dhtmlxSpreadSheet采用JSON格式的数据。除了数据，您还可以在数据集中传递必要的样式。加载内联数据时，您需要使用parse方法并将带有数据的对象传递给它，如下例所示：
var data = [
{ "cell": "a1", "value": "Country" },
{ "cell": "b1", "value": "Product" },
{ "cell": "c1", "value": "Price" },
{ "cell": "d1", "value": "Amount" },
{ "cell": "e1", "value": "Total Price" },
{ "cell": "a2", "value": "Ecuador" },
{ "cell": "b2", "value": "Banana" },
{ "cell": "c2", "value": 6.68 },
{ "cell": "d2", "value": 430 },
{ "cell": "e2", "value": 2872.4 },
{ "cell": "a3", "value": "Belarus" },
{ "cell": "b3", "value": "Apple" },
{ "cell": "c3", "value": 3.75 },
{ "cell": "d3", "value": 600 },
{ "cell": "e3", "value": 2250 },
]
// initializing spreadsheet
var spreadsheet = new dhx.Spreadsheet("cont", {//config});
// loading data into spreadsheet
spreadsheet.parse(data);
下一步是什么
就这样。仅需四个简单的步骤，您便拥有了使用表格形式的数据的便捷工具。现在，您可以开始使用数据，或者继续探索dhtmlxSpreadSheet的内部世界。
APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率
想要了解甘特图或慧都APS系统，请登录慧都网咨询在线客服，解决您的问题！
本文章转载自【慧都科技】evget欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果
