SpreadSheet在HTML中做出Excel表格效果教程
如何开始
本文档专用于更新的3.0版dhtmlxSpreadSheet。要获取有关先前版本2.1的信息,请遵循相关文档。
这个清晰而全面的教程将指导您完成需要完成的步骤,以便在页面上获得功能齐全的dhtmlxSpreadSheet。当您需要保存计算结果并复制它们时,该组件对于管理大量数据特别有效。
![dhtmlxSpreadSheet教程:如何开始dhtmlxSpreadSheet第一步 dhtmlxSpreadSheet教程:如何开始dhtmlxSpreadSheet第一步](https://docs.dhtmlx.com/spreadsheet/media/spreadsheet_init.png)
步骤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欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果