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

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

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

# 正版采购狂欢节,企业采购正当时 # # 31款JAVA开发必备控件和工具 #

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

想要购买dhtmlxGantt正版授权,或了解慧都APS系统请点击【咨询在线客服】


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:DHTMLX

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
title
相关厂商
相关产品
dhtmlxSpreadsheet

高度可定制的JavaScript电子表格组件,可安全、方便地编辑和格式化数据。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat