dhtmlxSpreadSheet教程：如何在HTML中做出Excel表格效果SpreadSheet-控件新闻-慧都网

dhtmlxSpreadSheet教程：如何在HTML中做出Excel表格效果SpreadSheet

原创|行业资讯|编辑：杨鹏连|2020-09-27 11:23:41.720|阅读 461 次

概述：这个清晰而全面的教程将指导您完成需要完成的步骤，以便在页面上获得功能齐全的dhtmlxSpreadSheet。当您需要保存计算结果并复制它们时，该组件对于管理大量数据特别有效。

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

点击下载dhtmlxSpreadsheet试用版

如何开始
本文档专用于更新的3.0版dhtmlxSpreadSheet。要获取有关先前版本2.1的信息，请遵循相关文档。

这个清晰而全面的教程将指导您完成需要完成的步骤，以便在页面上获得功能齐全的dhtmlxSpreadSheet。当您需要保存计算结果并复制它们时，该组件对于管理大量数据特别有效。

dhtmlxSpreadSheet教程：如何开始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="//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="//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帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买dhtmlxGantt正版授权，或了解慧都APS系统请点击