Buat grid data dalam JavaScript menggunakan Handsontable.js

Handsontable ialah perpustakaan JavaScript yang kami gunakan apabila kami ingin mencipta grid data. Ia menyediakan pengalaman seperti hamparan, sangat serupa dengan Excel. Dalam tutorial ini, kami akan menerangkan cara membuat grid data dengan data anda sendiri menggunakan handsontable.js. Selain itu, kita akan melihat cara menggunakan pilihan berbeza yang tersedia dalam handsontable.js.

Walaupun anda mungkin boleh menggunakan hamparan yang berbeza (seperti Grid Creator), handsontable.js menonjol daripada kebanyakan hamparan kerana ia juga boleh digunakan dengan JavaScript biasa, React atau Angular.

Sebelum anda mula menggunakan handsontable.js, langkah pertama ialah memasangnya pada komputer tempatan anda. Terdapat pelbagai cara untuk memasang handsontable.js.

Kaedah paling asas ialah menggunakan pautan CDN dalam kod HTML. Kami hanya menampal kod HTML berikut ke dalam tag

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

Dalam coretan kod di atas, kami mengimport dua fail melalui CDN. Ini ialah "handsontable.full.min.css" yang akan digunakan untuk mengimport "gaya boleh tangan" dan kemudian kami mengimport "handsontable.full.min.js" yang akan digunakan untuk mengimport kod JavaScript.

Jika anda tidak berminat menggunakan pautan CDN, anda boleh memasangnya dengan bantuan npm atau benang. Pertimbangkan untuk menggunakan arahan NPM yang ditunjukkan di bawah. < /p>

npm install handsontable

Gunakan arahan berikut untuk Benang.

yarn add handsontable

Sebaik sahaja anda menggunakan mana-mana arahan ini, anda boleh menambah dua baris ini seperti yang ditunjukkan di bawah dalam tag untuk mula menggunakan 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">

Dalam teg