97在线免费,99综合网,国产无码电影网

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

原創(chuàng)|行業(yè)資訊|編輯：楊鵬連|2020-09-27 11:23:41.720|閱讀 521 次

概述：這個清晰而全面的教程將指導(dǎo)您完成需要完成的步驟，以便在頁面上獲得功能齊全的dhtmlxSpreadSheet。當(dāng)您需要保存計算結(jié)果并復(fù)制它們時，該組件對于管理大量數(shù)據(jù)特別有效。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

dhtmlxSpreadsheet是用純JavaScript編寫的開源電子表格小部件，可讓您快速在網(wǎng)頁上添加類似于Excel的可編輯數(shù)據(jù)表。高度可定制的JavaScript電子表格組件，具有優(yōu)雅的Material樣式，可安全、方便地編輯和格式化數(shù)據(jù)。

點擊下載dhtmlxSpreadsheet試用版

如何開始
本文檔專用于更新的3.0版dhtmlxSpreadSheet。要獲取有關(guān)先前版本2.1的信息，請遵循相關(guān)文檔。

這個清晰而全面的教程將指導(dǎo)您完成需要完成的步驟，以便在頁面上獲得功能齊全的dhtmlxSpreadSheet。當(dāng)您需要保存計算結(jié)果并復(fù)制它們時，該組件對于管理大量數(shù)據(jù)特別有效。

dhtmlxSpreadSheet教程：如何開始dhtmlxSpreadSheet第一步

步驟1.包括源文件

從創(chuàng)建HTML文件開始，并將其命名為index.html。然后繼續(xù)將SpreadSheet源文件包含到創(chuàng)建的文件中。 dhtmlxSpreadSheet軟件包的詳細(xì)說明在此處給出。

有兩個必要的文件：

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.創(chuàng)建SpreadSheet

現(xiàn)在您可以將SpreadSheet添加到頁面。首先，我們創(chuàng)建一個DIV容器，然后將dhtmlxSpreadSheet放入其中。因此，您的步驟將是：

在index.html文件中指定DIV容器
使用dhx.SpreadSheet構(gòu)造函數(shù)初始化dhtmlxSpreadSheet

作為參數(shù)，構(gòu)造函數(shù)使用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.設(shè)置SpreadSheet配置

接下來，除了默認(rèn)選項外，您還可以指定初始化時SpreadSheet組件希望具有的其他配置選項。

您可以使用幾個選項來調(diào)整SpreadSheet的外觀，例如：toolbarBlocks，rowsCount和colsCount。檢查詳細(xì)信息。

var spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    toolbarBlocks: ["columns", "rows", "clear"],
    rowsCount: 10,
    colsCount: 10
});

dhtmlxSpreadSheet的配置非常靈活，因此您可以隨時更改它。閱讀相關(guān)指南，以了解配置SpreadSheet的基礎(chǔ)知識。

步驟4.將數(shù)據(jù)加載到SpreadSheet

最后一步是用數(shù)據(jù)填充SpreadSheet。dhtmlxSpreadSheet采用JSON格式的數(shù)據(jù)。除了數(shù)據(jù)，您還可以在數(shù)據(jù)集中傳遞必要的樣式。加載內(nèi)聯(lián)數(shù)據(jù)時，您需要使用parse方法并將帶有數(shù)據(jù)的對象傳遞給它，如下例所示：

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);

下一步是什么
就這樣。僅需四個簡單的步驟，您便擁有了使用表格形式的數(shù)據(jù)的便捷工具。現(xiàn)在，您可以開始使用數(shù)據(jù)，或者繼續(xù)探索dhtmlxSpreadSheet的內(nèi)部世界。

APS幫助提升企業(yè)生產(chǎn)效率，真正實現(xiàn)生產(chǎn)計劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場景的生產(chǎn)計劃，提高準(zhǔn)時交貨能力，提高產(chǎn)能和資源利用率

想要購買dhtmlxGantt正版授權(quán)，或了解慧都APS系統(tǒng)請點擊