cari

Rumah  >  Artikel  >  hujung hadapan web  >  Buat grid data dalam JavaScript menggunakan Handsontable.js

Buat grid data dalam JavaScript menggunakan Handsontable.js

PHPz
PHPzke hadapan
2023-09-02 13:01:02694semak imbas

使用 Handsontable.js 在 JavaScript 中创建数据网格

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. 

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 <script> dan teg <link>, kami mengimport fail "js" dan "CSS" yang sepadan daripada folder "node_modules". Kini kita boleh menggunakan handsontable.js. </script>

index.html

Langkah pertama ialah mencipta fail HTML; Kod akhir untuk fail index.html yang saya buat kelihatan seperti ini.

Contoh

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

Dalam kod HTML di atas, kami menggunakan dua kelas

div. Dalam yang pertama kita mencipta pengepala, dalam yang seterusnya kita membiarkannya kosong, tetapi div yang kosong itu mempunyai kelas yang dipanggil container yang akan kami tambahkan dalam kod JavaScript kami.

app.js

Dalam coretan kod seterusnya, kami menggunakan teg

untuk memaut ke fail <script>app.js<b> tempat kami akan menulis kod JavaScript. </script>

Buat fail bernama

app.js dan tampal kod berikut - 

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,
})

Dalam kod

app.js di atas, perkara pertama yang kami lakukan ialah mencipta pemalar yang dipanggil data di mana kami menyimpan nilai berbeza yang sesuai dengan data grid yang kami cipta.

Dalam langkah seterusnya, kami memilih elemen HTML tertentu daripada

querySelector dan lulus nilai itu sebagai parameter pertama dalam pembina Handsontable. Parameter kedua hanyalah data sebenar yang ingin kami paparkan dalam div.

index.html

Berikut ialah kod lengkap dengan data

app.js. Jalankan kod ini dan semak bagaimana output muncul -

Contoh

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

Memperkenalkan pengepala baris dan lajur

Kami juga boleh memperkenalkan pengepala kepada baris dan lajur. Untuk melakukan ini, anda hanya menambah dua sifat dalam parameter kedua kaedah pembina Handsontable. Pertimbangkan coretan kod yang ditunjukkan di bawah. 

let res = new Handsontable(container, { 
   data: data, 
   rowHeaders: true, 
   colHeaders: true, 
})

Sebaik sahaja anda menggantikan coretan kod di atas dengan yang telah wujud dalam fail

app.js anda, anda akan dapat melihat pengepala lalai ditambahkan pada baris dan lajur. p>

rowHeaders akan mempunyai nilai berangka bermula dari 1 hingga 9, manakala pengepala lajur akan mempunyai nilai lalai bermula dari A hingga akhir aksara lajur.

Dalam grid data kami, kami menyediakan sendiri pengepala lajur, ini juga boleh dilihat dalam data, baris pertama kami kelihatan seperti ini - 

['sr. no', 'Name', 'Age', 'Role', 'Company Name']

Nilai di atas juga boleh disediakan dalam

colHeaders. Pertimbangkan coretan kod yang dikemas kini yang ditunjukkan di bawah. 

let res = new Handsontable(container, {
   data: data,
   rowHeaders: true,
   colHeaders: ['sr. no', 'Name', 'Age', 'Role','Company Name'],
   dropdownMenu: true,
})

Kami juga perlu menukar pemalar data. Pemalar data yang dikemas kini ditunjukkan di bawah. 

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'],
]

Kesimpulan

Dalam tutorial ini, kami menerangkan maksud handsontable.js dan cara menggunakannya untuk membuat grid data pilihan anda. Kami meneroka contoh yang berbeza di mana kami menyediakan nilai lalai untuk lajur dan pengepala.

Atas ialah kandungan terperinci Buat grid data dalam JavaScript menggunakan Handsontable.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html npm angular yarn 常量 构造函数 JS excel
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menambah ruang antara aksara dalam IText menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menambah ruang antara aksara dalam IText menggunakan FabricJS?

Artikel berkaitan

Lihat lagi