資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究使用Handsontable.js在JavaScript中建立資料網格
Handsontable是一個JavaScript庫，當我們想要建立資料網格時可以使用它。它提供類似電子表格的體驗，非常類似於Excel。在本教程中，我們將解釋如何使用handsontable.js使用您自己的資料建立資料網格。此外，我們將瞭解如何在handsontable.js中使用不同的選項。
雖然可能存在您可以使用的不同電子表格之類的網格建立器，但handsontable.js因其能夠與原生JavaScript、React或Angular一起工作而脫穎而出。
在您可以開始使用handsontable.js之前，第一步是在您的本地機器上安裝它。安裝handsontable.js的方法有很多種。
最基本的方法是在我們的HTML程式碼中使用CDN連結。我們只需要將以下HTML程式碼貼上到我們的<head>標籤中，就可以了。
<link href="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css" rel="stylesheet" media="screen"> <script src="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js"></script>
在上面的程式碼片段中，我們透過CDN匯入兩個檔案。“handsontable.full.min.css”用於匯入“handsontable樣式”，然後我們匯入“handsontable.full.min.js”用於匯入JavaScript程式碼。
如果您不想使用CDN連結，則可以使用npm或yarn來安裝它們。請考慮以下NPM命令。
npm install handsontable
使用以下命令Yarn。
yarn add handsontable
一旦您使用這兩個命令中的任何一個，您就可以開始使用handsontable，只需在<head>標籤中新增以下兩行。
<script src="node_modules/handsontable/dist/handsontable.full.min.js"></script> <link href="node_modules/handsontable/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
在<script>標籤和<link>標籤中，我們都從“node_modules”資料夾匯入相應的“js”和“CSS”檔案。現在我們已經準備好使用handsontable.js了。
index.html
第一步是建立一個HTML檔案；將檔案命名為index.html。我建立的index.html檔案的最終程式碼如下所示。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Grid using handsontable.js</title>
<script src="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js">
</script>
<link href="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
<style>
.heading-div {
text-align: center;
margin: 0 auto;
margin-left: 0;
max-width: 400px;
}
</style>
</head>
<body>
<div class="heading-div">
<h1>
<center>Creating a data-grid!</center>
</h1>
</div>
<div class="container"></div>
<script src="app.js"></script>
</body>
</html>
在上面的HTML程式碼中，我們使用了兩個div類。在第一個中，我們建立一個標題；在下一個中，我們保持它為空，但是那個空的div有一個名為container的類，我們將在我們的JavaScript程式碼中使用它。
app.js
在下一個程式碼片段中，我們使用<script>標籤，在其中我們連結app.js檔案，我們將在其中編寫我們的JavaScript程式碼。
建立一個名為app.js的檔案，並貼上以下程式碼：
const data = [
['sr. no', 'Name', 'Age', 'Role', 'Company Name'],
[1, 'Mukul Latiyan', 25, 'Software Developer', 'TATA AIG'],
[2, 'Prince Yadav', 25, 'Software Developer', 'TATA AIG'],
[3, 'Mayank Agarwal', 25, 'Software Development Engineer 2', 'Zeta'],
[4, 'Divyang Pradeep Pal', 25, 'Software Development Engineer 2', '6Sense'],
[5, 'Rohit Shokeen', 24, 'Associate Manager', 'Bank of Baroda'],
[6, 'Deepak Gupta', 25, 'DevOps Engineer', 'NCR Corporation'],
[7, 'Shreya Sharma', 23, 'Associate Developer', 'UrbanClap'],
[8, 'Nitika Agarwal', 24, 'Software Developer', 'Udaan'],
[9, 'Ritwik Gupta', 27, 'Software Development Engineer 3', 'LeetCode'],
[10, 'Sneha Pradeep', 26, 'Software Engineer', 'Scaler Academy'],
]
let container = document.querySelector('.container');
let res = new Handsontable(container, {
data: data,
})
在上面的app.js程式碼中，我們首先做的是建立一個名為data的常量，我們在這個常量中儲存了不同值，這些值將適合我們正在建立的資料網格。
在下一步中，我們從querySelector中選擇HTML的特定元素，然後將該值作為第一個引數傳遞到Handsontable建構函式中。第二個引數只是我們希望在div中顯示的實際資料。
index.html
以下是包含app.js資料的完整程式碼。執行此程式碼並檢查輸出的外觀：
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Grid using handsontable.js</title>
<script src="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.js">
</script>
<link href="https://cdn.jsdelivr.net/npm/handsontable@8.2.0/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
<style>
.heading-div {
text-align: center;
margin: 0 auto;
margin-left: 0;
max-width: 400px;
}
</style>
</head>
<body>
<div class="heading-div">
<h1>
<center>Creating a data-grid!</center>
</h1>
</div>
<div class="container"></div>
<script>
const data = [
['sr. no', 'Name', 'Age', 'Role', 'Company Name'],
[1, 'Mukul Latiyan', 25, 'Software Developer', 'TATA AIG'],
[2, 'Prince Yadav', 25, 'Software Developer', 'TATA AIG'],
[3, 'Mayank Agarwal', 25, 'Software Development Engineer 2', 'Zeta'],
[4, 'Divyang Pradeep Pal', 25, 'Software Development Engineer 2', '6Sense'],
[5, 'Rohit Shokeen', 24, 'Associate Manager', 'Bank of Baroda'],
[6, 'Deepak Gupta', 25, 'DevOps Engineer', 'NCR Corporation'],
[7, 'Shreya Sharma', 23, 'Associate Developer', 'UrbanClap'],
[8, 'Nitika Agarwal', 24, 'Software Developer', 'Udaan'],
[9, 'Ritwik Gupta', 27, 'Software Development Engineer 3', 'LeetCode'],
[10, 'Sneha Pradeep', 26, 'Software Engineer', 'Scaler Academy'],
]
let container = document.querySelector('.container');
let res = new Handsontable(container, {
data: data,
})
</script>
</body>
</html>
為行和列引入標題
我們甚至可以為行和列引入標題。為此，您只需要在Handsontable建構函式方法的第二個引數中新增另外兩個屬性。請考慮以下程式碼片段。
let res = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
})
將上面的程式碼片段替換為已存在於app.js檔案中的程式碼片段後，您將能夠看到新增到行和列的預設標題。
rowHeaders將具有從1到9的數值，而列標題將具有從A到列結束處的字元的預設值。
在我們的資料網格中，我們自己提供了列標題，這也可以在資料中看到，我們的第一行是這樣的：
['sr. no', 'Name', 'Age', 'Role', 'Company Name']
上面的值也可以在colHeaders中提供。請考慮以下更新後的程式碼片段。
let res = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: ['sr. no', 'Name', 'Age', 'Role','Company Name'],
dropdownMenu: true,
})
我們還需要更改我們的data常量。更新後的data常量如下所示。
const data = [ [1, 'Mukul Latiyan', 25, 'Software Developer', 'TATA AIG'], [2, 'Prince Yadav', 25, 'Software Developer', 'TATA AIG'], [3, 'Mayank Agarwal', 25, 'Software Development Engineer 2', 'Zeta'], [4, 'Divyang Pradeep Pal', 25, 'Software Development Engineer 2', '6Sense'], [5, 'Rohit Shokeen', 24, 'Associate Manager', 'Bank of Baroda'], [6, 'Deepak Gupta', 25, 'DevOps Engineer', 'NCR Corporation'], [7, 'Shreya Sharma', 23, 'Associate Developer', 'UrbanClap'], [8, 'Nitika Agarwal', 24, 'Software Developer', 'Udaan'], [9, 'Ritwik Gupta', 27, 'Software Development Engineer 3', 'LeetCode'], [10, 'Sneha Pradeep', 26, 'Software Engineer', 'Scaler Academy'], ]
結論
在本教程中，我們解釋了handsontable.js是什麼，以及如何使用它來建立您選擇的資料網格。我們探討了不同的示例，在這些示例中，我們為列和標題都提供了預設值。
506 次檢視
