这个清晰而全面的教程将指导您完成需要完成的步骤，以便在页面上获得功能齐全的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=”https://fonts.googleapis.com/cssamily=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/cssamily=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 spreadsheetvar spreadsheet = new dhx.Spreadsheet("cont", {//config});// loading data into spreadsheetspreadsheet.parse(data);
下一步是什么
就这样。仅需四个简单的步骤，您便拥有了使用表格形式的数据的便捷工具。现在，您可以开始使用数据，或者继续探索dhtmlxSpreadSheet的内部世界。
APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率
想要购买dhtmlxGantt正版授权，或了解APS系统请点击【咨询在线客服】 
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！