Hướng dẫn treeview html - html treeview

• • 13 giờ trước Trần Tuấn Lộc vừa tham gia khóa học Lập trình dự án Website bán hàng...
  • 14 giờ trước nguyen thanh minh vừa tham gia khóa học Làm dự án với ASP.NET Core 3.1
  • 14 giờ trước nguyen thanh minh vừa tham gia khóa học Lập trình ASP.NET Core từ cơ bản...
  • hôm qua Phuoc Hoang Duc vừa tham gia khóa học Lập trình ASP.NET Core từ cơ bản đến...
  • 2 ngày trước Đặng Tiến Dương vừa tham gia khóa học Lập trình C# toàn tập cho người mới...
  • 2 ngày trước Nguyễn Quang Bắc vừa tham gia khóa học Quản lý source code trong dự án với...
  • 3 ngày trước Lê Đặng vừa tham gia khóa học Khóa học Angular 2 căn bản
  • 4 ngày trước Trần Anh Quân vừa tham gia khóa học Khoá học ReactJS căn bản
  • 4 ngày trước Trần Anh Quân vừa tham gia khóa học Xây dựng ứng dụng Mobile với Flutter...
  • 4 ngày trước Nguyễn Quyết Thắng vừa tham gia khóa học Làm dự án với WebAPI, AngularJS và...
  Nội dung chính Show

  • Chế độ xem cây
  • Chế độ xem cây
  • Chế độ xem cây kiểm tra

Tài khoản

• Giới thiệu
• Ý kiến học viên
• Khóa học
• Giảng viên
• Combo
• Blog
• Chủ đề
• Lộ trình học
• Hướng dẫn

• Kiến thức
  • Chia sẻ kinh nghiệm
    • Thư viện mã nguồn
    • Lập trình JavaScript căn bản
    • Design Pattern
    • Thủ thuật lập trình
    • Lập trình Angular 2 căn bản
    • Bảo mật
  • Kiến thức
    • Cơ sở dữ liệu
    • Lập trình C#
    • Lập trình ASP.NET
    • Lập trình jQuery
    • Lập trình AngularJS

• Tất cả khóa học
• Học lập trình web
• Học lập trình cơ bản
• Học lập trình ứng dụng desktop
• Học lập trình di động
• Khóa học bổ trợ
• Tin công nghệ
• Chia sẻ
• Combo

• Khoá học
• Làm dự án thực tế với Angular 2+ Web API
• Bài 29: Hiển thị danh sách function với treeview

• Bài học
• Gửi câu hỏi

Nội dung khoá học

• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source
• Source

Tìm hiểu cách tạo chế độ xem cây với CSS và JavaScript.

Chế độ xem cây

Chế độ xem cây đại diện cho một cái nhìn phân cấp thông tin, trong đó mỗi mục có thể có một số tiểu mục.

Nhấp vào (các) mũi tên để mở hoặc đóng các nhánh cây.

• Đồ uống
  • Nước uống
  • Cà phê
  • Trà
    • Trà đen
    • Trà trắng
    • Trà xanh
      • Sencha
      • Gyokuro
      • Matcha
      • Pi lo chun

Hãy tự mình thử »

Chế độ xem cây

Chế độ xem cây đại diện cho một cái nhìn phân cấp thông tin, trong đó mỗi mục có thể có một số tiểu mục.

Thí dụ

Nhấp vào (các) mũi tên để mở hoặc đóng các nhánh cây.
 

Đồ uống

Thí dụ

Nước uống
ul, #myUL {
  list-style-type: none;
}

Cà phê
#myUL {
  margin: 0;
  padding: 0;
}

Trà
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

Trà đen
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

Trà trắng
.caret-down::before {
  transform: rotate(90deg);
}

Trà xanh
.nested {
  display: none;
}

Sencha
.active {
  display: block;
}

Gyokuro

Thí dụ

var toggler = document.getelementsbyClassName ("caret"); var i;
var i;

for (i = 0; i   toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

Hãy tự mình thử »

Chế độ xem cây kiểm tra

Trong ví dụ này, chúng tôi sử dụng unicode "bỏ phiếu" thay vì chăm sóc: