1. Các sản phẩm
  2.   Người xem
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Xây dựng cấu trúc cây tương tác với jQuery

Tạo, quản lý và trực quan hóa dữ liệu phân cấp với plugin cây mạnh mẽ này

API jsTree là gì?

jsTree chuyển đổi dữ liệu JSON phức tạp thành cấu trúc cây phân cấp tương tác, cung cấp cho nhà phát triển cách mạnh mẽ để hiển thị và điều hướng các đối tượng JSON lồng nhau. Được xây dựng như một plugin jQuery, nó chuyển đổi JSON thô thành các nút có thể mở rộng/thu gọn - hoàn hảo để kiểm tra phản hồi API, tệp cấu hình hoặc bất kỳ tập dữ liệu phân cấp nào.

Tính năng chính cho hiển thị JSON:

  • Chuyển đổi JSON sang cây: Tự động hiển thị mảng/đối tượng JSON dưới dạng nút cha/con
  • Khám phá tương tác: Mở rộng/thu gọn nút để phân tích cấu trúc JSON sâu
  • Tải động: Tải chậm (lazy load) tập dữ liệu JSON lớn để tối ưu hiệu suất
  • Tuỳ chỉnh hiển thị nút: Tạo kiểu nút dựa trên loại dữ liệu JSON (mảng, đối tượng, giá trị)
  • Tìm kiếm & Lọc: Nhanh chóng tìm khóa/giá trị trong cây JSON phức tạp

Khác với trình xem JSON phẳng, jsTree duy trì hệ thống phân cấp và mối quan hệ trong dữ liệu của bạn, làm cho nó lý tưởng để gỡ lỗi API hoặc tài liệu lược đồ JSON lồng nhau.

GitHub

Thống kê GitHub

Tên:
Ngôn ngữ:
Ngôi sao:
Nĩa:
Giấy phép:
Kho lưu trữ được cập nhật lần cuối lúc

Tại sao chọn jsTree?

  • Giải pháp đã được chứng minh: Phát triển liên tục hơn 10 năm
  • Nhẹ: Chỉ yêu cầu jQuery làm phụ thuộc
  • Truy cập được: Tuân thủ WCAG 2.0
  • Tài liệu đầy đủ: Tham khảo API hoàn chỉnh
  • Giấy phép MIT: Miễn phí cho mục đích thương mại

Cài đặt

jsTree có thể được cài đặt qua trình quản lý gói hoặc bao gồm trực tiếp từ CDN.

Cài đặt NPM


npm install jstree

Lưu ý: Đừng quên bao gồm jQuery trước jsTree.

Ví dụ mã

Khám phá khả năng của jsTree với các ví dụ sau:

jsTree

Ví dụ 1: Cây cơ bản từ HTML

Cách đơn giản nhất để tạo jsTree là chuyển đổi danh sách HTML lồng nhau. Cách tiếp cận này lý tưởng khi cấu trúc cây của bạn là tĩnh hoặc khi tạo mẫu. Plugin tự động chuyển đổi cấu trúc UL/LI lồng nhau thành cây tương tác với chức năng mở rộng/thu gọn. Triển khai cơ bản yêu cầu JavaScript tối thiểu và hoạt động tốt cho menu điều hướng đơn giản hoặc cấu trúc nội dung.

Tính năng được trình diễn:

  • Chuyển đổi HTML sang cây
  • Chức năng mở rộng/thu gọn
  • Chủ đề cơ bản

Ví dụ 2: Tải dữ liệu qua JSON

Đối với ứng dụng động, jsTree có thể tải dữ liệu từ JSON. Cách tiếp cận này linh hoạt hơn và cho phép bạn xây dựng cấu trúc cây theo chương trình. Định dạng JSON trực quan, với mỗi nút có các thuộc tính như "id", "text", "children" và "state". Bạn cũng có thể chỉ định biểu tượng, trạng thái vô hiệu hóa và các thuộc tính khác cho mỗi nút. Phương pháp này đặc biệt hữu ích khi dữ liệu cây của bạn đến từ cơ sở dữ liệu hoặc API.

Ví dụ 3: Hộp kiểm và Kéo-thả

jsTree cung cấp plugin mở rộng chức năng cốt lõi. Plugin hộp kiểm thêm hộp kiểm có thể chọn vào mỗi nút, trong khi plugin dnd cho phép thao tác kéo-thả. Những tính năng này rất cần thiết để xây dựng giao diện như trình quản lý tệp hoặc hệ thống quyền nơi người dùng cần chọn nhiều mục hoặc tổ chức lại hệ thống phân cấp. Các plugin duy trì hiệu suất của cây ngay cả với hàng trăm nút.

Tính năng nâng cao

jsTree hỗ trợ quy trình làm việc chuyên nghiệp:

  • Tải chậm: Tải nút theo yêu cầu:

    Tải chậm

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Xử lý sự kiện: Phản hồi tương tác với cây:

    Trình nghe sự kiện

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Nút đã chọn:', data.selected);
    });
  • Chủ đề tùy chỉnh: Tạo kiểu cho cây của bạn:

    Chủ đề tùy chỉnh

    
    $('#tree').jstree({
      'themes': {
        'name': 'custom',
        'dots': false,
        'icons': false
      }
    });

Kết luận

jsTree cung cấp giải pháp mạnh mẽ cho việc trực quan hóa dữ liệu phân cấp. Lý tưởng cho:

  • Trình quản lý tệp: Điều hướng cấu trúc thư mục
  • Menu điều hướng: Tạo menu đa cấp
  • Giao diện CMS: Quản lý hệ thống phân cấp nội dung
  • Công cụ cấu hình: Chỉnh sửa cài đặt lồng nhau

Với hệ thống plugin mở rộng và bảo trì tích cực, jsTree vẫn là giải pháp hàng đầu cho cấu trúc cây trong ứng dụng web.

Sản Phẩm Tương Tự

 Vietnamese