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 指令。 < /p>
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">
在