Bạn có thể làm điều đó với lưới dữ liệu JavaScript không?

[theanh]

Bài viết này nhận được sự hỗ trợ nhiệt tình của những người bạn thân mến của chúng tôi tại Progress Kendo UI, những người cam kết cung cấp cho các nhà phát triển các công cụ họ cần để khai thác và làm chủ sự phát triển công nghệ đang định hình xã hội và thế giới của chúng ta. Cảm ơn bạn!



Lưới dữ liệu, còn được gọi là bảng dữ liệu, rất cần thiết để trình bày lượng dữ liệu khổng lồ cho người dùng. Người dùng phải có thể xem dữ liệu theo cách dễ hiểu, dễ phân tích và dễ thao tác. Tuy nhiên, việc xây dựng chế độ xem lưới dữ liệu với hiệu suất, tốc độ và trải nghiệm của người dùng có thể là một nhiệm vụ đặc biệt khó khăn. Điều này đặc biệt đúng khi xây dựng chúng từ đầu hoặc sử dụng các thư viện có chức năng hạn chế và hiệu suất dưới mức trung bình.

Không thiếu các thư viện đóng gói lưới dữ liệu. Tuy nhiên, hầu hết chỉ cung cấp một bộ tính năng lưới hạn chế, phổ biến trong số đó là phân trang, lọc, sắp xếp và tạo chủ đề. Các thư viện lưới dữ liệu khác được xây dựng dưới dạng trình bao bọc dựa trên một số phụ thuộc. Các loại thư viện này ảnh hưởng bất lợi đến hiệu suất của lưới của bạn so với các đối tác gốc của chúng. Chúng không được xây dựng lại cho mọi khuôn khổ hoặc ngôn ngữ. Do đó, các thư viện không phải gốc này có thể chậm, có thể không tận dụng được các tính năng vượt trội của khuôn khổ/ngôn ngữ, thiếu chức năng quan trọng và yêu cầu thiết lập bổ sung để hoạt động.

Một đặc điểm khác của các thư viện này là trải nghiệm người dùng kém. Chúng thường không triển khai được thiết kế đáp ứng cho các kích thước và hướng màn hình khác nhau, không thể khóa hoặc làm cho các phần của lưới cố định và khiến khả năng truy cập trở thành một suy nghĩ muộn màng. Bên cạnh đó, chúng chỉ cung cấp chức năng chỉnh sửa ở dạng tách biệt với lưới, thường liên quan đến nhiều hành động để hoàn thành. Điều này có thể gây mệt mỏi và lặp đi lặp lại, đặc biệt là khi chỉnh sửa nhiều mục dữ liệu. Một số khác thậm chí không cung cấp chức năng chỉnh sửa. Thêm vào đó, chúng có xu hướng thiếu chức năng xuất dữ liệu và khiến người dùng phải phụ thuộc vào chức năng in trang web để xuất.

Do chức năng và tính năng hạn chế, bạn phải bổ sung chúng bằng các thư viện riêng biệt để xây dựng một lưới phù hợp. Ví dụ, để biểu đồ dữ liệu, bạn sẽ phải sử dụng một thư viện biểu đồ khác vì thư viện lưới sẽ không cung cấp chức năng này. Hơn nữa, bạn không thể nhúng các thành phần không liên quan này vào lưới vì không tích hợp sẵn hỗ trợ cho chúng.

Để giải quyết những vấn đề này, bạn sẽ phải sử dụng một thư viện không chỉ được xây dựng để trở thành gốc mà còn kết hợp một loạt các thành phần bổ sung và tập trung vào trải nghiệm và hiệu suất tuyệt vời của người dùng. Để chứng minh các tính năng của một lưới dữ liệu lý tưởng, chúng tôi sẽ sử dụng Kendo UI Data Grids làm ví dụ. Các lưới dữ liệu này là một trong hơn 100 thành phần có sẵn trong một gói thư viện có tên là Progress® Kendo UI®. Gói này bao gồm bốn thư viện thành phần được xây dựng gốc cho một số khuôn khổ giao diện người dùng. Đây là Giao diện người dùng Kendo cho Angular, KendoReact, Kendo UI cho Vue và Kendo UI cho jQuery. Các ví dụ được đưa ra trong toàn bộ bài viết này sẽ giới thiệu các lưới từ cả bốn thư viện này.

Thiết kế đáp ứng​

Khi nói đến lưới dữ liệu, người dùng của bạn phải có chế độ xem đầy đủ dữ liệu mà họ đang làm việc. Dữ liệu bị ẩn hoặc khó truy cập sẽ gây khó chịu khi đọc và khiến người dùng hoàn toàn không sử dụng lưới của bạn. Nhiều thư viện lưới không làm cho lưới của họ phản hồi và bạn phải triển khai nó bằng cách sử dụng kiểu dáng và một số logic. Điều này có thể đặc biệt phức tạp với dữ liệu chứa rất nhiều cột. Nếu bạn đang xây dựng nhiều lưới với các loại dữ liệu khác nhau với các nhu cầu biểu diễn khác nhau, điều này sẽ làm phức tạp thêm. Bạn phải tìm ra cách cuộn, truy vấn phương tiện, kích thước phông chữ, tỷ lệ, có nên bỏ qua một số phần dữ liệu hay không, v.v.

Các bảng dữ liệu hiện đại phải có khả năng phản hồi các thay đổi về hướng và hiển thị tất cả dữ liệu tốt trên mọi kích thước màn hình. Ví dụ: Lưới dữ liệu Kendo UI điều chỉnh kích thước của chúng tùy thuộc vào kích thước khung nhìn và số lượng hàng mà nó chứa. Ví dụ: trong Lưới góc, bạn có thể đặt chiều cao của lưới và lưới sẽ có thể cuộn được nếu một số nội dung của lưới không vừa. Thiết lập chiều cao chỉ bao gồm việc chỉ định giá trị cho thuộc tính CSS chiều cao của lưới và đảm bảo rằng phần tử cha cũng có chiều cao được thiết lập. Không cần cấu hình nào khác. Bạn có thể xem cách thực hiện trong bảng chứng khoán mẫu này tại đây.

Ngoài ra, bạn có thể chọn chuyển đổi chế độ hiển thị của các cột trong lưới trong khi vẫn hiển thị tất cả dữ liệu bắt buộc. Bạn thực hiện điều này bằng cách tạo các cột khác nhau cho các phạm vi kích thước màn hình khác nhau và sử dụng thuộc tính media trên một cột để quyết định nơi hiển thị chúng. Ví dụ, trong bảng dữ liệu Angular này, đối với kích thước màn hình lớn hơn (media="(min-width: 450px)"), các cột được hiển thị đầy đủ và trông như thế này.



Tuy nhiên, bạn có thể chọn ẩn các cột giá, còn hàng và ngừng sản xuất trên màn hình trung bình (media="(min-width: 680px)"). Nó sẽ trông như thế này:



Trên màn hình nhỏ hơn ( media="(max-width: 450px)" ), bạn có thể tạo một cột tùy chỉnh duy nhất để hiển thị tất cả dữ liệu tương tự như sau:



Lưới dữ liệu Kendo UI cũng hỗ trợ Các mã định danh thiết bị Bootstrap 4 như xs, sm, md, lg và xl. Mặc dù cách này dễ sử dụng hơn, nhưng lại không linh hoạt vì nó giới hạn số lượng truy vấn bạn có thể đưa vào thành một. Ví dụ, với các điểm ngắt của riêng bạn, bạn có thể có thứ gì đó như media="(min-width: 500px) và (max-width: 1200px)". Không thể kết hợp nhiều mã định danh với mã định danh thiết bị Bootstrap 4.

Tuân thủ khả năng truy cập​

Đảm bảo rằng lưới của bạn đáp ứng các tiêu chuẩn về khả năng truy cập hiện đại nên là ưu tiên hàng đầu. Việc này đảm bảo rằng những người khuyết tật có thể tham gia vào lưới của bạn và đảm bảo rằng có sự công bằng giữa những người dùng của bạn. Tuy nhiên, một số thư viện không làm gì để đảm bảo lưới của họ có thể truy cập được. Những thư viện khác chỉ làm những điều tối thiểu dẫn đến lưới dưới tiêu chuẩn khi được đánh giá về khả năng truy cập. Việc tăng cường các lưới này để có thể truy cập được đòi hỏi một lượng công việc kha khá. Điều này càng trở nên phức tạp hơn do các thiết kế lưới phức tạp hơn. Mặc dù công việc này sẽ mang lại lợi ích sau này cho bạn và người dùng của bạn, nhưng các thư viện này nên đưa khả năng truy cập trở thành một phần cốt lõi trong sản phẩm của họ.

Kendo UI Data Grids ưu tiên khả năng truy cập bằng cách hỗ trợ các tiêu chuẩn khả năng truy cập chính như WAI-ARIA, Mục 508 và WCAG 2.1. Ví dụ, KendoReact tuân theo tiêu chuẩn Mục 508 bằng cách đảm bảo rằng hầu hết các thành phần của nó đều có thể truy cập hoàn toàn và hỗ trợ điều hướng bằng bàn phím. Nó tuân theo Hướng dẫn có thể truy cập bằng bàn phím của WCAG bằng cách làm cho lưới và tất cả các thành phần nhúng của nó có thể hoạt động bằng bàn phím. Do đó, React Grid đạt được mức tuân thủ WCAG cao nhất là AAA. Là một thành phần web, KendoReact Data Grid đáp ứng thông số kỹ thuật WAI-RAI để đảm bảo rằng người dùng khuyết tật có thể tương tác đầy đủ với nó trên các trang web. Trong Lưới dữ liệu React này, ví dụ, bạn có thể điều hướng đến các thành phần và hàng khác nhau bằng bàn phím.

Cuộn ảo​

Với cuộn ảo, chỉ một phân đoạn dữ liệu được hiển thị trong lưới. Thông thường, phân đoạn này được đặt thành số bản ghi cần tìm nạp. Khi người dùng cuộn qua phân đoạn này, một phân đoạn khác có cùng kích thước sẽ được hiển thị. Điều này giúp cải thiện hiệu suất vì việc hiển thị một tập dữ liệu lớn sẽ chiếm nhiều bộ nhớ và làm chậm hiệu suất cũng như tốc độ của lưới. Cuộn ảo tạo ra ảo giác về việc hiển thị toàn bộ dữ liệu mà không có bất kỳ hậu quả nào về hiệu suất.

Thư viện lưới thường không hỗ trợ cuộn ảo. Thay vào đó, chúng khuyến khích phân trang, có thể không phải là trải nghiệm tốt nhất cho người dùng khi xem lượng dữ liệu khổng lồ. Khi cố gắng hiển thị lượng dữ liệu khổng lồ, hiệu suất của lưới càng giảm, góp phần gây ra trải nghiệm người dùng tồi tệ. Đối với các thư viện hỗ trợ cuộn ảo, nó chỉ áp dụng cho các bản ghi trong dữ liệu chứ không phải các phần cụ thể của bản ghi. Điều này đặc biệt hạn chế khi dữ liệu có nhiều cột.

Kendo UI hỗ trợ cuộn ảo cho cả dữ liệu cục bộ và dữ liệu từ xa. Ví dụ, trong Kendo UI for jQuery Grid, bạn bật nó bằng cách đặt thuộc tính scrollable.virtual của lưới thành true. Bằng cách đặt thuộc tính này, lưới chỉ tải số lượng mục được chỉ định bởi thuộc tính pageSize của nguồn dữ liệu lưới. Bạn có thể xem cách thức hoạt động của nó trong Lưới dữ liệu jQuery sử dụng dữ liệu cục bộ.

 ...  ...   var dataSource = new kendo.data.DataSource({ pageSize: 20, ... }); $("#grid").kendoGrid({ dataSource: dataSource, scrollable: { virtual: true }, ... });

Cùng một thiết lập này sẽ hoạt động với dữ liệu từ xa như được thấy trong bảng dữ liệu jQuery này. Ngoài ra, bạn có thể sử dụng một thiết lập tương tự để ảo hóa các cột của lưới nếu các bản ghi chứa nhiều thuộc tính có thể tốn kém để hiển thị tất cả cùng một lúc. Thuộc tính scrollable.virtual cần được đặt thành true. Tuy nhiên, việc ảo hóa các cột không phụ thuộc vào thuộc tính pageSize. Ví dụ này minh họa tính năng này.

Xuất PDF và Excel​

Khả năng xuất dữ liệu từ lưới là rất quan trọng. Người dùng có thể cần phân phối hoặc thao tác thêm dữ liệu bằng các ứng dụng như bảng tính. Người dùng của bạn phải có tùy chọn chia sẻ dữ liệu dễ dàng mà không bị giới hạn trong lưới. Dữ liệu lưới cũng có thể cần xử lý bổ sung mà lưới của bạn không cung cấp, như trong bảng tính và phần mềm trình bày.

Mặc dù đây là trường hợp sử dụng thiết yếu, nhưng nhiều thư viện không cung cấp tính năng này. Người dùng phải in toàn bộ trang web để truy cập dữ liệu ở định dạng PDF. Khi chuyển dữ liệu sang các ứng dụng bên ngoài, họ phải sao chép và dán nhiều lần. Điều này dễ hiểu là khá khó chịu.

Lưới dữ liệu Kendo UI cung cấp dữ liệu xuất từ lưới ở hai định dạng: PDF và Excel. Ví dụ, trong Lưới dữ liệu Kendo UI cho Vue, để xử lý dữ liệu xuất PDF, bạn sẽ sử dụng thành phần GridPDFExport. Với phương thức save của thành phần này, bạn sẽ truyền dữ liệu mà bạn muốn đưa vào dữ liệu xuất PDF. Dữ liệu có thể được phân trang hoặc toàn bộ tập hợp.

 Xuất PDF 
  import { GridPdfExport } from '@progress/kendo-vue-pdf';import { Grid } from '@progress/kendo-vue-grid';export default { components: { 'Grid': Grid, 'pdfexport': GridPdfExport }, data: function () { return { products: [], ... }; }, methods: { exportPDF: function() { (this.$refs.gridPdfExport).save(this.products); }, ... }, ...};

Thành phần GridPDFExport cho phép bạn chỉ định kích thước trang để xuất, lề trang, cách chia tỷ lệ lưới trên trang, v.v. Điều này hữu ích để tùy chỉnh lưới lớn hơn để phù hợp với các trang PDF. Bạn sẽ truyền những thứ này dưới dạng thuộc tính cho thành phần. Sau đây là ví dụ:

Bạn có thể tùy chỉnh thêm bản xuất bằng cách sử dụng mẫu. Trong mẫu, bạn có thể thêm kiểu dáng, chỉ định tiêu đề và chân trang, thay đổi bố cục của trang và thêm các thành phần mới vào đó. Bạn sẽ sử dụng CSS để tạo kiểu dáng. Sau khi hoàn tất việc định cấu hình mẫu, bạn sẽ chỉ định mẫu bằng thuộc tính page-template của thành phần GridPDFExport.

Để xuất tệp Excel từ Kendo UI Vue Grid, bạn sẽ sử dụng thành phần ExcelExport. Với phương thức saveExcel, bạn truyền tên tệp, dữ liệu lưới, cột cần hiển thị, v.v. vào đó và gọi phương thức để tạo tệp. Lưới dữ liệu Vue này là một ví dụ tuyệt vời về cách bạn có thể xuất dữ liệu Excel bằng Kendo UI Vue Grid.

Cột cố định​

Khi người dùng cuộn ngang qua lưới, họ có thể cần phải cố định một số cột hoặc liên tục trong tầm nhìn. Các cột này thường chứa thông tin quan trọng như ID, tên, v.v. Các cột cố định/dính luôn hiển thị nhưng có thể di chuyển sang cạnh trái hoặc phải của lưới tùy thuộc vào hướng cuộn của bạn hoặc không di chuyển chút nào. Ví dụ, trong bản demo lưới dữ liệu Vue này, ID bị cố định và cột Không còn nữa là cố định.

Cột cố định trong thư viện lưới có thể là một hiện tượng hiếm gặp. Nếu không có, việc triển khai nó từ đầu có thể là một nỗ lực khó khăn. Sẽ cần phải tạo kiểu đáng kể để hoàn thành và có thể không mở rộng tốt nếu bạn cần nhiều lưới.

Thiết lập các cột cố định trong Kendo UI chỉ cần thiết lập tối thiểu. Ví dụ, trong Kendo UI Vue Grid, bạn sẽ cần đặt thuộc tính locked của một cột thành true để làm cho nó cố định. Trong bảng dữ liệu Vue này, các cột ID và Discontinued được làm cố định bằng cách đặt thuộc tính locked. Trong ví dụ bên dưới, ID và Age bị khóa.

  import { Grid } from '@progress/kendo-vue-grid';import { people } from './people'export default { components: { 'grid': Grid }, data: function () { return { people: this.getPeople(), columns: [ { field: 'ID', title: 'ID', locked: true}, { field: 'FirstName', title: 'FirstName' }, { field: 'LastName', title: 'LastName' }, { field: 'Age', title: 'Age', locked: true}, ] }; }, methods: { getPeople() { return people; } }};

Chỉnh sửa​

Trường hợp sử dụng chính của lưới là để xem lượng dữ liệu lớn. Một số thư viện chỉ sử dụng tính năng này và không xem xét khả năng cần chỉnh sửa. Điều này gây bất lợi cho người dùng vì chỉnh sửa là một tính năng khá hữu ích. Khi người dùng yêu cầu, các nhà phát triển buộc phải tạo một trang riêng để chỉnh sửa từng mục nhập. Thêm vào đó, người dùng chỉ có thể chỉnh sửa một mục nhập sau mục nhập khác trên một biểu mẫu. Điều này gây mệt mỏi và tạo ra trải nghiệm người dùng không tốt, đặc biệt là khi xử lý lượng dữ liệu lớn.

Một trường hợp sử dụng quan trọng của chỉnh sửa lưới là tạo điều kiện chỉnh sửa hàng loạt. Tính năng này hữu ích để chỉnh sửa lượng dữ liệu lớn cùng một lúc. Điều này có thể liên quan đến việc xóa, tạo và cập nhật dữ liệu.

Lưới dữ liệu Kendo UI cho phép chỉnh sửa theo hai dạng: nội tuyến và sử dụng cửa sổ bật lên. Với chỉnh sửa nội tuyến, tất cả dữ liệu được chỉnh sửa trong lưới. Khi nhấp vào một ô, ô đó sẽ có thể chỉnh sửa được. Trong cửa sổ bật lên, biểu mẫu bật lên được sử dụng để chỉnh sửa từng mục nhập riêng lẻ. Trong ví dụ về bảng Kendo UI cho jQuery này, việc tạo một lưới có thể chỉnh sửa bao gồm ba bước: thiết lập cấu hình có thể chỉnh sửa của lưới, thiết lập nguồn dữ liệu và cấu hình các hoạt động CRUD trên nguồn dữ liệu. Một vài bước này giúp giảm bớt sự phức tạp liên quan đến việc thiết lập chỉnh sửa hàng loạt. Cấu hình chỉnh sửa bật lên theo các bước tương tự nhưng với các tùy chọn khác nhau khi bắt đầu.

Ngoài việc hỗ trợ chỉnh sửa, Kendo UI cho jQuery Grid còn cho phép xác thực đầu vào. Ví dụ, bạn có thể yêu cầu đầu vào hoặc áp dụng độ dài tối thiểu. Bên cạnh đó, bạn có thể tạo các điều khiển đầu vào tùy chỉnh. Các điều khiển đầu vào không chỉ giới hạn ở các trường văn bản. Bạn có thể sử dụng danh sách thả xuống, hộp kiểm, bộ chọn ngày, thanh trượt phạm vi, v.v. Những điều này có thể là cả nội tuyến và trong cửa sổ bật lên. Trong bảng dữ liệu jQuery này, trường Category là một danh sách thả xuống. Xác thực cũng được chứng minh trong cùng một ví dụ. Trường giá đơn vị có xác thực được áp dụng, đảm bảo giá trị nhỏ nhất của nó là 1.

Các thành phần bổ sung​

Hầu hết các thư viện lưới đều có một mục đích duy nhất: cung cấp lưới. Chúng không được cung cấp kèm theo bất kỳ thứ gì khác, chỉ có lưới. Bạn bị giới hạn ở các tính năng mà nó cung cấp. Nếu bạn cần bổ sung lưới, điều đó có thể khó khăn vì các thư viện khác có thể không tương thích với nó. Vì vậy, bạn chỉ cần tuân thủ các ranh giới của thư viện khi xây dựng lưới.

Kendo UI giải quyết vấn đề này vì cách tiếp cận của người tạo ra nó là cung cấp một thư viện toàn diện gồm các thành phần dễ dàng tích hợp với nhau thay vì các thành phần riêng lẻ. Lưới là một phần của thư viện gồm nhiều thành phần cho phép bạn thực hiện mọi thứ từ quản lý dữ liệu, điều hướng, lập biểu đồ, chỉnh sửa, trình bày phương tiện, tạo điều kiện trò chuyện,, v.v. Bạn có thể chọn nhúng các thành phần này vào lưới mà không cần phải thực hiện một số thiết lập phức tạp và có thể phá vỡ nó. Việc tích hợp chúng diễn ra liền mạch và chỉ cần cấu hình tối thiểu. Lấy ví dụ bảng dữ liệu Angular này, cột 1 Ngày của nó nhúng một biểu đồ hoàn toàn tương tác cho mỗi hàng một cách liền mạch. Bạn có thể nhúng bất kỳ số lượng thành phần nào vào lưới, tin tưởng rằng nó sẽ hoạt động và có tất cả các tính năng hoạt động như mong đợi.

Kết luận​

Lưới dữ liệu cần phải dễ hiểu, hấp dẫn, phản hồi và dễ truy cập. Chúng cần hoạt động tốt và tải dữ liệu nhanh. Tuy nhiên, việc xây dựng một lưới dữ liệu đáp ứng các tiêu chuẩn này ngay từ đầu có thể mất nhiều thời gian và là một công việc rất lớn. Bạn có thể chọn sử dụng thư viện lưới dữ liệu nhưng thường thì chúng không được tối ưu hóa cho hiệu suất, không thể truy cập và chỉ được cung cấp cùng với một thành phần lưới duy nhất.

Để tạo lưới dữ liệu hấp dẫn, dễ sử dụng, bạn cần một thư viện tập trung vào hiệu suất. Thư viện có thể thực hiện điều này bằng cách xây dựng theo cách gốc và hỗ trợ cuộn ảo. Lưới dữ liệu mà nó cung cấp cần phải phản hồi và sử dụng các cột cố định. Điều này giúp người dùng có thể dễ dàng xem dữ liệu bất kể kích thước hoặc hướng màn hình. Khả năng truy cập phải là mối quan tâm cốt lõi của lưới. Điều này đảm bảo rằng tất cả người dùng đều có thể có trải nghiệm như nhau khi sử dụng chúng.

Bảng dữ liệu phải mở rộng những gì người dùng có thể làm với dữ liệu. Điều này có thể đạt được thông qua việc chỉnh sửa và tạo điều kiện xuất ở nhiều định dạng. Bên cạnh đó, các thư viện này phải được cung cấp cùng với các thành phần khác để bổ sung cho lưới. Việc có các thành phần tương thích trong một thư viện sẽ loại bỏ nhu cầu sử dụng nhiều thư viện xung đột khác nhau trong một ứng dụng. Thư viện lưới dữ liệu cung cấp các tính năng này sẽ giúp bạn tạo ra một sản phẩm tuyệt vời cho người dùng mà không gặp nhiều phức tạp.

Đọc thêm​

• Tạo hoạt ảnh UI có thể truy cập
• Những điều người dùng sẽ đánh giá cao trong ứng dụng di động
• Tiêu đề cố định và phần tử toàn chiều cao: Sự kết hợp khó khăn
• Kỷ nguyên của nền tảng nguyên thủy cuối cùng đã đến