Trong thực tế, ta phải làm việc rất nhiều với các dữ liệu phân cấp (Hierachical Data). Các loại dữ liệu thường gặp như cây đơn vị, cây danh mục, cây thư mục. Tuy nhiên, đưa dữ liệu phân cấp lên phần mềm và giải quyết bài toán UX cho nó là tương đối khó. Ad sẽ giới thiệu với các bạn một vài kỹ thuật để xử lý UX dữ liệu cây.
1. Tách API hiển thị cây và API hiển thị danh sách
Thông thường dữ liệu của các bạn sẽ hiển thị theo 2 cửa sổ như sau
Trong đó cửa sổ bên trái sẽ là cây, và cửa sổ bên phải sẽ là danh sách dữ liệu. Thông thường, developer sẽ muốn viết chung một API để hiển thị 2 loại dữ liệu này, để tái sử dụng code. Và cuối cùng là developer sẽ loay hoay không biết viết thế nào cho đúng. Lời khuyên của Ad cho trường hợp này là mình nên tách API. 1 API để lấy dữ liệu cây, sẽ bao gồm các dữ liệu tối thiểu như id, tên, id cha. API lấy dữ liệu cây có thể lấy toàn bộ hoặc một phần dữ liệu theo quy mô dữ liệu. Và 1 API khác để lấy dữ liệu danh sách, có dữ liệu chi tiết hơn, có phân trang, sắp xếp.
Dữ liệu danh sách có thể là cùng dữ liệu với cây, hoặc có thể là dữ liệu khác, ví dụ như cây đơn vị và người dùng.
Như vậy, với dữ liệu danh sách, bạn hoàn toàn có thể dùng các kỹ thuật ở bài viết UX trang tìm kiếm trên Web để xử lý.
2. Thêm tìm kiếm trên cây
Với cây bên trái có số lượng lớn, việc lần từ gốc để tìm từng dữ liệu một sẽ rất mất thời gian. Lúc này, nên có tìm kiếm để giúp người dùng dễ dàng thấy dữ liệu mà mình cần. Việc tìm kiếm này chỉ cần thực hiện ở phía Frontend.
3. Select 1 node trên cây
Khi 1 node trên cây được select, node đó sẽ tự động được chọn khi tạo một dữ liệu mới. Có thể tự động được chọn làm node cha khi tạo mới đơn vị. Hoặc có thể được chọn là đơn vị khi tạo mới người dùng.
Trong trường hợp cây không có checkbox, thì select 1 node sẽ là đầu vào để tìm kiếm dữ liệu trong danh sách.
4. Check 1 node trên cây
Trong trường hợp cây hỗ trợ cả checkbox, một node được check thì tất cả các node con của nó cũng được check. Lúc này, các node check là đầu vào để tìm kiếm dữ liệu trong danh sách.
5. Thay đổi dữ liệu trên cây
Khi dữ liệu cây và dữ liệu trong danh sách là cùng một loại dữ liệu, nếu có thêm dữ liệu thì trạng thái đóng mở các node ở trên cây không được thay đổi. Các node được thêm, được di chuyển, được xóa bỏ không ảnh hưởng đến trạng thái đóng mở của các node khác trên cây.
6. Kết luận
Hy vọng những chia sẻ của Ad về UX dữ liệu cây sẽ giúp bạn không còn gặp bối rối với loại dữ liệu này nữa.
Bạn có thể tham khảo thêm về tương tác với cây.
Bạn có thể đọc thêm các bài khác trong Series trải nghiệm người dùng này nhé.
