Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Sử Dụng Grid JS Cho Xây Dựng Bảng Trong Website

Sử Dụng Grid JS Cho Xây Dựng Bảng Trong Website


Ngày 20 Tháng 7 Năm 2020

Sử Dụng Grid JS Cho Xây Dựng Bảng Trong Website

Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu thư viện Grid.js với nhiệm vụ chính là giúp bạn có thể làm việc với bảng trong trang web được dễ dàng hơn. Và để hiểu rõ hơn thì chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Grid.js là gì?

Grid.js là một thư viện mã nguồn mở được viết bằng TypeScript. Nó làm việc được với hầu hết framework phổ biến hiện nay như là React, Angular, Vue. Nhưng trong bài viết này thì mình sẽ hướng dẫn bạn sử dụng thư viện với Javascript thuần thôi nhé!

Dưới đây là một ví dụ về bảng khi được xây dựng bằng Grid.js:

GridJS

Cách Cài Đặt Grid.js

Bạn có thể thiết lập nó thông qua hai cách là sử dụng npm và CDN. Để thuận tiện trong việc sử dụng thì mình sẽ sử dụng cách CDN với hai file chính là:

  • gridjs với đường dẫn CDN là https://unpkg.com/gridjs
  • theme(chủ đề cho bảng) với đường dẫn CDN là https://unpkg.com/gridjs/dist/theme/mermaid.min.css

Nếu bạn muốn sử dụng npm để thiết lập thì có thể xem ở đây nhé.
Tiếp theo chúng ta sẽ tạo cấu trúc HTML và gắn các CDN vào trang web nhé:

<html lang="en">
  <head>
    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"  rel="stylesheet" />
  </head>
  <body>
    <div id="bang"></div>
    <script src="https://unpkg.com/gridjs/dist/gridjs.development.js"></script>
  </body>
</html>

Cách Sử Dụng Grid.js

Sau khi chúng ta đã có những file cần thiết thì bây giờ bạn và mình sẽ đi vào khởi tạo và sử dụng Grid.js để tạo bảng thông qua đoạn code javascript dưới đây nhé:

 <script>
new gridjs.Grid({
  columns: ["Tên", "Email", "Số Điện Thoại"],
  data: [
    ["John", "[email protected]", "(353) 01 222 3333"],
    ["Mark", "[email protected]", "(01) 22 888 4444"],
    ["Eoin", "[email protected]", "0097 22 654 00033"],
    ["Sarah", "[email protected]", "+322 876 1233"],
    ["Afshin", "[email protected]", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("bang"));
</script>

Ở phía trên mình có một tý lưu ý là:

  • new gridjs.Grid: dùng để khởi tạo đối tượng bảng trong thư viện Grid.js
  • columns: dùng để xác định tiêu đề cũng như số cột trong bảng
  • data: là dữ liệu mà bảng sẽ hiển thị
  • render(document.getElementById("bang")): Chọn thẻ div có id là bang để hiển thị table trong trang web.

Và dưới đây là kết quả bảng của chúng ta trong trang web:

See the Pen Sử dụng gridjs để tạo bảng by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thêm Chức Năng Cho Bảng Bằng Grid.js

Bạn có tự hỏi là tại sao mình lại sử dụng thư viện này để tạo một bảng đơn giản như ở trên?
Thì thật ra đó chính là bước khởi đầu để giúp bạn có thể cách hình dung mà thư viện này hoạt động trong trang web. Ở phần này chúng ta sẽ thiết lập những chức năng hữu ích để phát triển bảng HTML thông qua các thuộc tính được cung cấp sẵn nhé!

Tạo phân trang trong bảng:

Thư viện có cung cấp cho chúng ta một thuộc tính là pagination với hai giá trị truefalse giúp bạn có thể tạo phân trang cho bảng một cách dễ dàng. Và để dễ hình dung hơn thì chúng ta sẽ xem đoạn code sau nhé (Các cấu trúc HTML thì bạn cứ sử dụng ở ví dụ trên nha):

​ new gridjs.Grid({
  columns: ["Tên", "Email", "Số Điện Thoại"],
   /*Tạo phân trang cho bảng*/
   pagination: true,
  data: [
    ["John", "[email protected]", "(353) 01 222 3333"],
    ["Mark", "[email protected]", "(01) 22 888 4444"],
    ["Eoin", "[email protected]", "0097 22 654 00033"],
    ["Sarah", "[email protected]", "+322 876 1233"],
    ["Afshin", "[email protected]", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("bang"));

Và kết quả của chúng ta sẽ như hình dưới nhé:

See the Pen tạo phân trang với gridjs by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu như bạn muốn giới hạn số lượng phần tử được hiển thị trong một trang thì có thể sử dụng giá trị limit trong thuộc tính pagination như đoạn code dưới đây nhé:

 new gridjs.Grid({
  columns: ["Tên", "Email", "Số Điện Thoại"],
   /*Tạo phân trang cho bảng*/
   pagination: {
   /*Giới hạn 2 phần tử được hiển thị trên mỗi trang*/
     limit: 2
   },
  data: [
    ["John", "[email protected]", "(353) 01 222 3333"],
    ["Mark", "[email protected]", "(01) 22 888 4444"],
    ["Eoin", "[email protected]", "0097 22 654 00033"],
    ["Sarah", "[email protected]", "+322 876 1233"],
    ["Afshin", "[email protected]", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("bang"));

Và kết quả ở bên dưới nhé:

See the Pen gioi han phan tu trong bang voi gridjs by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tạo chức năng lọc cho bảng:

Ở đây khi bạn muốn lọc các phần tử trong bảng theo bảng chữ cái hay số... thì ta chỉ cần thêm một thuộc tính là sort: true thì nó sẽ tự động tạo chức năng lọc cho bảng. Và để dễ hình dung hơn chúng ta sẽ đi vào đoạn code sau đây nhé:

 new gridjs.Grid({
  columns: ["Tên", "Email", "Số Điện Thoại"],
  /*Tạo chức năng lọc cho bảng*/
  sort:true,
  data: [
    ["John", "[email protected]", "(353) 01 222 3333"],
    ["Mark", "[email protected]", "(01) 22 888 4444"],
    ["Eoin", "[email protected]", "0097 22 654 00033"],
    ["Sarah", "[email protected]", "+322 876 1233"],
    ["Afshin", "[email protected]", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("bang"));

Và kết quả bạn xem ở bên dưới nhé:

See the Pen tạo chức năng lọc cho bảng gridjs by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tạo chức năng tìm kiếm cho bảng:

Thư viện Grid.js có cung cấp thêm cho chúng ta một chức năng hữu ích khác đó tìm kiếm phần tử trong bảng. Bạn chỉ cần thiết lập thuộc tính search: true trong quá trình khởi tạo bảng là có thể thực hiện tìm kiếm trên bảng rồi.

 new gridjs.Grid({
  columns: ["Tên", "Email", "Số Điện Thoại"],
  /*Tạo chức năng tìm kiếm cho bảng*/
  search:true,
  data: [
    ["John", "[email protected]", "(353) 01 222 3333"],
    ["Mark", "[email protected]", "(01) 22 888 4444"],
    ["Eoin", "[email protected]", "0097 22 654 00033"],
    ["Sarah", "[email protected]", "+322 876 1233"],
    ["Afshin", "[email protected]", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("bang"));

Và kết quả ở dưới đây nhé:

See the Pen tạo chức năng tìm kiếm bằng gridjs by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Thiết Lập Style Cho Bảng Trong Grid.js

Đôi khi vì yêu cầu của khách hàng thì chúng ta cần thay đổi màu sắc, màu nền... cho bảng, thì trong thư viện Grid.js có cung cấp cho chúng ta một thuộc tính style giúp bạn có thể thiết lập style trong quá trình khởi tạo bảng. Và để hiểu rõ hơn bạn xem đoạn code sau nhé:

 new gridjs.Grid({
  columns: ["Tên", "Email", "Số Điện Thoại"],
  data: [
    ["John", "[email protected]", "(353) 01 222 3333"],
    ["Mark", "[email protected]", "(01) 22 888 4444"],
    ["Eoin", "[email protected]", "0097 22 654 00033"],
    ["Sarah", "[email protected]", "+322 876 1233"],
    ["Afshin", "[email protected]", "(353) 22 87 8356"]
  ],
   /* Thiết Lập Style Cho Bảng*/
   style: {
    table: {
      border: '3px solid #ccc'
    },
    th: {
      'background-color': '#0040ff',
      color: '#fff',
      'border-bottom': '3px solid #ccc',
      'text-align': 'center'
    },
    td: {
      'text-align': 'center'
    }
  }
}).render(document.getElementById("bang"));

Và kết quả bạn xem bên dưới nhé:

See the Pen thiết lập style cho bảng gridjs by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Lấy Dữ Liệu Thông Qua API Trong Gridjs

Đôi khi chúng ta sẽ đi cần lấy dữ liệu thông qua API để hiển thị cho bảng. Thư viện có cung cấp cho chúng ta một thuộc tính là url giúp bạn có thể dễ dàng lấy dữ liệu cho bảng. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

 new gridjs.Grid({
  columns: ['Name', 'Language', 'Released At', 'Artist'],
  server: {
    /*Đường dẫn API cho dử liệu bảng*/
    url: 'https://api.scryfall.com/cards/search?q=Inspiring',
    /*Thực hiện lặp và lấy dữ liệu API*/
    then: data => data.data.map(card => [card.name, card.lang, card.released_at, card.artist])
  } 
}).render(document.getElementById("bang"));

Và kết quả bạn xem ở bên dưới nhé:

See the Pen goi du lieu thong qua API Gridjs by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức về thư viện Grid.js hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!