精品在线免费播放,国产国产人免费人成免,国产高清www免费视频

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

原創|行業資訊|編輯：楊鵬連|2020-09-27 11:23:41.720|閱讀 521 次

概述：這個清晰而全面的教程將指導您完成需要完成的步驟，以便在頁面上獲得功能齊全的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
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
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系統請點擊