Các bảng HTML rất dễ sử dụng để hiển thị một lượng nhỏ dữ liệu. Nhưng người dùng có thể khó làm việc với chúng khi chúng hiển thị nhiều dữ liệu
Các tính năng như sắp xếp, lọc và phân trang giúp làm việc với nhiều hàng dữ liệu dễ dàng hơn. Chúng tôi có thể dễ dàng triển khai các tính năng đó bằng cách di chuyển từ Bảng HTML sang thành phần Lưới dữ liệu JavaScript
Trong bài đăng này, chúng tôi sẽ sử dụng phiên bản cộng đồng miễn phí của Lưới dữ liệu JavaScript AG Grid để chuyển đổi từ một bảng HTML tĩnh dài sang một Lưới dữ liệu tương tác dễ sử dụng. Lượng JavaScript chúng ta cần để làm điều này là tối thiểu và rất đơn giản
Chúng tôi sẽ xây dựng mã ví dụ trong ba bước
- Hiển thị danh sách tĩnh dữ liệu Mục Todo trong Bảng HTML
- Tải danh sách các mục Todo từ API REST và hiển thị trong bảng
- Chuyển đổi Bảng HTML thành Lưới dữ liệu để cho phép sắp xếp, lọc và phân trang
Cách kết xuất dữ liệu bằng bảng HTML
Phiên bản đầu tiên của ứng dụng của chúng tôi sẽ cho phép chúng tôi tạo cấu trúc trang cơ bản và đảm bảo rằng chúng tôi đang hiển thị đúng dữ liệu cho người dùng
Mình tạo 1 file
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Điều này sẽ hiển thị một Mục Todo duy nhất trong một bảng
Dưới đây là ví dụ Trang bảng HTML tĩnh
Nếu không có giá trị
Lợi ích của các bảng HTML ngắn
Bảng HTML là một cách rất nhanh để hiển thị một lượng nhỏ dữ liệu ở dạng bảng trên một trang
Các bảng yêu cầu kiểu dáng vì kiểu dáng mặc định của
Hiện tại, danh sách Todo Items của chúng tôi được mã hóa tĩnh vào trang. Đối với bước tiếp theo, chúng tôi sẽ
Cách đọc JSON từ API để kết xuất trong bảng HTML
Vì chúng tôi sẽ tải dữ liệu từ API, tôi sẽ không mã hóa bất kỳ dữ liệu nào trong bảng. Để hỗ trợ tải động, tôi chỉ cần xóa dòng dữ liệu khỏi
userId
id
title
completed
Tôi sẽ thêm JavaScript vào trang
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Để bắt đầu, tôi sẽ viết mã đọc dữ liệu
Tôi sẽ sử dụng ứng dụng API REST "{JSON} Placeholder" cho phần trình diễn này. Bằng cách thực hiện yêu cầu
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Bạn có thể tự mình dùng thử mà không cần JavaScript bằng cách nhấp vào liên kết ở trên
Cách dễ nhất để thực hiện yêu cầu
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Để giải thích đoạn mã trên, tôi sẽ mô tả nó trong các phần bên dưới
- Đưa ra yêu cầu GET tới
16Table Example table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #000000; text-align: left; padding: 8px; }TODO List
userId id title completed 1 1 My todo 1 false
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
- Sau đó, khi yêu cầu kết thúc, hãy chuyển đổi phản hồi thành Đối tượng JavaScript – trong trường hợp của chúng tôi, đây sẽ là một mảng chứa tất cả các Mục công việc
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
- Sau đó viết đối tượng JavaScript vào bàn điều khiển
Với mã này trong ứng dụng của chúng tôi, chúng tôi sẽ không thấy bất kỳ thứ gì trong bảng, nhưng chúng tôi sẽ thấy mảng được hiển thị trong Bảng điều khiển công cụ dành cho nhà phát triển trình duyệt nơi chúng tôi có thể xem dữ liệu
Lệnh gọi API trả về 200 mục và mỗi mục là một Đối tượng Todo
Bước tiếp theo của chúng tôi là hiển thị dữ liệu trong bảng
Hàm
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Đối với mỗi Mục việc cần làm, mã sẽ tạo một phần tử
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Khi mã
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Dưới đây là ví dụ Trang bảng HTML động
Lợi ích và Nhược điểm của Bảng HTML dài
Bảng HTML là một cách dễ dàng để hiển thị dữ liệu trên một trang nhưng không khả dụng lắm đối với các danh sách dữ liệu dài
Các mục dữ liệu có thể khó tìm, mặc dù người dùng có thể tìm kiếm dữ liệu bằng cách sử dụng chức năng 'tìm trong trang' tích hợp sẵn của trình duyệt
Bằng cách hiển thị trong bảng HTML, người dùng của chúng tôi không có cách nào để sắp xếp dữ liệu hoặc lọc nó để chỉ hiển thị các Mục công việc đã hoàn thành. Chúng tôi sẽ phải thêm mã bổ sung vào ứng dụng của mình để triển khai chức năng sắp xếp và lọc
Bảng HTML sẽ tự động phát triển khi có nhiều hàng hơn được thêm vào bảng. Điều này có thể khiến chúng khó sử dụng hơn trong một ứng dụng khi nhiều dữ liệu đã được thêm vào
Khi chúng tôi thêm nhiều dữ liệu, chúng tôi có thể muốn phân trang để hạn chế bảng dữ liệu chỉ hiển thị một số hàng nhất định và cho phép người dùng nhấp qua trang tiếp theo để xem thêm các mục. Một lần nữa, đây là chức năng mà chúng ta sẽ phải viết thêm mã để xử lý
Khi ứng dụng của chúng ta cần nhiều tương tác với người dùng hơn, chúng ta nên cân nhắc sử dụng thành phần Lưới dữ liệu
Chúng ta có thể sử dụng nó để thêm chức năng bổ sung như
- phân loại
- lọc
- thay đổi kích thước cột
- phân trang
Thư viện và thành phần lưới dữ liệu
Có sẵn nhiều Thành phần lưới dữ liệu miễn phí, nhưng hầu hết chúng đều dành riêng cho khung nên chúng yêu cầu viết mã bằng React, Angular hoặc Vue
Tôi đang sử dụng AG Grid cho ví dụ này vì phiên bản miễn phí có thể được sử dụng với JavaScript, TypeScript, React, Angular hoặc Vue. "AG" là viết tắt của Agnostic, có nghĩa là có thể được sử dụng với bất kỳ khung nào
Khi bạn học cách sử dụng AG Grid trong một khung, API tương tự sẽ có sẵn cho các khung khác, giúp kiến thức của bạn có thể chuyển giao cho các dự án khác
Phiên bản miễn phí của AG Grid có thể được sử dụng trong các ứng dụng thương mại, vì vậy nếu bạn quản lý để mở rộng ứng dụng demo được hiển thị ở đây thành Ứng dụng quản lý danh sách Todo thương mại, bạn vẫn có thể sử dụng AG Grid miễn phí. Nhiều ứng dụng thương mại đã được xây dựng bằng phiên bản miễn phí của AG Grid
Ngoài ra, Lưới AG thường được tìm kiếm như một kỹ năng trong các đơn xin việc, do đó, đáng để thử nghiệm với
Phiên bản thương mại của AG Grid có các tính năng bổ sung như Xuất Excel và tạo Biểu đồ, nhưng chúng tôi không cần bất kỳ chức năng nào trong bản demo này
Sử dụng Lưới dữ liệu có nghĩa là chúng ta định cấu hình Lưới dữ liệu, cung cấp dữ liệu để kết xuất và Lưới xử lý tất cả các chức năng khác như sắp xếp, lọc và phân trang
Chúng tôi có thể chuyển đổi mã hiện tại của mình sang sử dụng AG Grid chỉ với một vài thay đổi
Cách thêm JavaScript và CSS lưới AG
AG Grid là một thư viện nên chúng tôi sẽ bao gồm JavaScript cần thiết
Nếu bạn đang sử dụng các công cụ xây dựng như
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Chúng tôi đang sử dụng JavaScript đơn giản, vì vậy chúng tôi có thể đưa ________ 184 vào phần ________ 185 của mình
userId
id
title
completed
Điều này bao gồm phiên bản cộng đồng của Lưới AG và CSS cần thiết để hiển thị Lưới đúng cách
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
userId
id
title
completed
Lưới AG sẽ tạo HTML cho Lưới dữ liệu khi chúng tôi thiết lập. Chúng tôi thêm
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Lưới AG yêu cầu đặt chiều rộng và chiều cao cho
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
userId
id
title
completed
Lưới sẽ được hiển thị cao 500 pixel và lấp đầy chiều rộng
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Cách định cấu hình lưới AG và kết xuất dữ liệu
Phần
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
- Định cấu hình lưới dữ liệu
- Tạo lưới dữ liệu mới bằng cách sử dụng cấu hình
- Lấy dữ liệu và thêm nó vào lưới
Tôi sẽ hiển thị phần
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
userId
id
title
completed
Lưới dữ liệu được điều khiển bởi dữ liệu và cấu hình – chúng ta không phải viết nhiều mã để tạo Lưới dữ liệu chức năng
Trước tiên, chúng tôi tạo một mảng các Đối tượng Cột xác định các cột trong Lưới dữ liệu. Các cột này ánh xạ vào dữ liệu
Dữ liệu mà chúng tôi nhận được từ lệnh gọi API có bốn thuộc tính. "userId", "id", "tiêu đề" và "đã hoàn thành"
Để hiển thị những thứ này trong Lưới dữ liệu dưới dạng cột, chúng tôi tạo một Đối tượng có thuộc tính
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
userId
id
title
completed
Tiếp theo chúng ta tạo đối tượng
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
userId
id
title
completed
Thuộc tính
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Thuộc tính
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Để thêm lưới vào trang, chúng tôi tìm phần tử
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
userId
id
title
completed
Chức năng tìm nạp dữ liệu và hiển thị dữ liệu trong lưới giống như mã
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
userId
id
title
completed
Khi đoạn mã này chạy, về cơ bản chúng ta sẽ sao chép chức năng tương tự của bảng HTML động, nhưng bây giờ tất cả dữ liệu được hiển thị trong Lưới dữ liệu có thanh cuộn
Để nhận được lợi ích của việc sử dụng Lưới dữ liệu và cho phép người dùng sắp xếp, lọc và điều hướng qua dữ liệu, chúng tôi chỉ phải sửa đổi cấu hình
Cách thực hiện sắp xếp, lọc và phân trang
Đây là những gì chúng tôi đã định cấu hình trong Lưới dữ liệu cho đến nay
- trường nào từ dữ liệu để hiển thị
- sử dụng dữ liệu nào
Để thêm sắp xếp, lọc, thay đổi kích thước cột và phân trang, chúng tôi sửa đổi cấu hình
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
userId
id
title
completed
Chúng tôi có thể định cấu hình các cột trong Lưới AG riêng lẻ bằng cách thêm các thuộc tính bổ sung vào các đối tượng
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Ở đây chúng tôi định cấu hình nó để có thể sắp xếp, có thể lọc và thay đổi kích thước
Bộ lọc mặc định mà chúng tôi đã xác định cho tất cả các cột là bộ lọc văn bản
Để thêm phân trang tự động vào lưới, chúng tôi thêm thuộc tính
Lưới dữ liệu thân thiện với người dùng
Với đoạn mã trên, chúng tôi đã tạo Lưới dữ liệu thân thiện với người dùng để tự động tìm nạp dữ liệu và thêm nó vào Lưới dữ liệu hỗ trợ sắp xếp, lọc và phân trang
Đây là ví dụ Trang HTML lưới dữ liệu
Bộ lọc số
Vì các cột
Table Example
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
TODO List
userId
id
title
completed
1
1
My todo 1
false
Dưới đây là ví dụ Trang HTML Bộ lọc số lưới dữ liệu
Có rất nhiều tùy chọn cấu hình cho các cột được liệt kê trong Tài liệu Lưới AG, ví dụ như cấu hình chiều rộng, kiểu dáng và làm cho các ô có thể chỉnh sửa được
Lợi ích của lưới dữ liệu
Đối với nhiều trang web, một bảng HTML đơn giản sẽ là một cách hoàn toàn hợp lý để hiển thị dữ liệu dạng bảng. Nó nhanh và dễ hiểu, và với một chút CSS, bảng có thể trông đẹp mắt cho người dùng của bạn
Khi các trang của bạn trở nên phức tạp hơn, hiển thị nhiều dữ liệu hơn hoặc yêu cầu nhiều tương tác hơn cho người dùng, thì việc sử dụng thành phần hoặc thư viện Lưới dữ liệu sẽ bắt đầu có ý nghĩa hơn
Lưới dữ liệu cung cấp nhiều chức năng mà người dùng của bạn cần mà không phải viết nhiều mã. Trong ví dụ được trình bày trong bài đăng này, chúng tôi đã chuyển từ bảng động đọc dữ liệu từ API sang Lưới dữ liệu đọc từ API có sắp xếp, lọc, phân trang và thay đổi kích thước cột
Đây là rất nhiều chức năng bổ sung, nhưng mã HTML của chúng tôi có cùng độ dài và JavaScript chúng tôi đã thêm ít phức tạp hơn vì Lưới dữ liệu đã thực hiện tất cả công việc hiển thị dữ liệu
Lưới dữ liệu có thể xử lý hàng trăm nghìn hàng và cập nhật nhanh chóng nên chúng thường được sử dụng trong các hệ thống giao dịch tài chính thời gian thực với giá trong các ô cập nhật cứ sau vài mili giây
Nếu bạn đang sử dụng React, thì ngoài AG Grid, bạn có thể xem Material UI hoặc React Table. Bảng phản ứng là một 'bảng' chứ không phải là Lưới dữ liệu nên ban đầu cần thêm một chút mã để hiển thị bảng
Cả UI UI và React Table đều chỉ khả dụng cho React. AG Grid là khuôn khổ bất khả tri và sẽ hoạt động với JavaScript, TypeScript, React, Angular và Vue
Mã nguồn cho bài đăng này có thể được tìm thấy trong repo Github này trong thư mục docs/html-table-to-data-grid
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Alan Richardson là Nhà phát triển phần mềm, Lập trình viên, Người kiểm thử và Nhà tiếp thị. Tác giả của nhiều cuốn sách và các khóa đào tạo trực tuyến
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu
Làm cách nào để chuyển đổi danh sách thành bảng trong HTML?
- " using the editor's search function. .. .
- ” tag and replace it with: .. .