使用 Handsontable.js 在 JavaScript 中建立資料網格
- PHPz轉載
- 2023-09-02 13:01:02718瀏覽
Handsontable 是一個 JavaScript 函式庫，當我們想要建立資料網格時會使用它。它提供類似電子表格的體驗，與 Excel 非常相似。在本教程中，我們將解釋如何使用handsontable.js 使用您自己的資料建立資料網格。此外，我們將了解如何使用handsontable.js 中提供的不同選項。
雖然您可能可以使用不同的電子表格（例如網格建立器），但 handsontable.js 從大多數電子表格中脫穎而出，因為它也能夠與普通 JavaScript、React 或 Angular 一起使用。
在開始使用handsontable.js 之前，第一步是將其安裝在本機電腦上。有不同的方法來安裝handsontable.js。
最基本的方法是在 HTML 程式碼中使用 CDN 連結。我們只需將以下 HTML 程式碼貼到
標記中即可。<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。<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了。 </script>
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> 標記來連結 <b>app.js 文件，我們將在其中編寫 JavaScript 程式碼。 </script>
建立一個名為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 檔案中已存在的程式碼片段後，您將能夠看到新增到行和列的預設標題。 p>
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,
})
我們還需要更改資料常數。更新後的資料常數如下所示。
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是什麼以及如何使用它來建立您選擇的資料網格。我們探索了不同的範例，其中我們為列和標題提供了預設值。
以上是使用 Handsontable.js 在 JavaScript 中建立資料網格的詳細內容。更多資訊請關注PHP中文網其他相關文章！