Hướng dẫn treeview bootstrap 5 - treeview bootstrap 5

Bước 1: Chuẩn bị nội dung HTML để tạo cấu trúc menu

 
 
 
  
 THIẾT KẾ WEB 
   
 
    
Photoshop
 
    
 Dreamweaver 
     
 
      
DW CS3
 
      
DW CS4
 
      
DW CS5
 
      
DW CS6
 
      
DW CC
 
     
 
    
 
    
Fireworks
 
   
 
  
 
  
 LẬP TRÌNH WEB 
   
 
    
Lập trình HTML5
 
    
Lập trình CSS3
 
    
Lập trình PHP 
     
 
      
PHP Frameworks 
       
 
        
Zend
 
        
Codeigniter
 
        
Laravel
 
        
CakePHP
 
       
 
      
 
     
 
    
    
Lập trình ASP.NET
 
   
 
  
 
 

Bước 2: Sử dụng JQUERY để tạo Tree menu

Bước 3: Định nghĩa CSS cho Tree menu

Bước 4: Gọi thư viện Bootstrap

Bước 5: Gọi thư viện JQUERY

Bootstrap 5 Chế độ xem cây

Đây là một ngã ba của https://github.com/chniter/bstreeview. Để sử dụng với BootStrap 5, các thuộc tính đã được thay đổi từ mục tiêu dữ liệu và dữ liệu chuyển thành dữ liệu sang cú pháp dữ liệu-bs-bs và dữ liệu-bs-togle mới.

Một plugin rất đơn giản để xây dựng một cái cây cơ bản và thanh lịch với Boostrap 5.

Phụ thuộc

Trường hợp được cung cấp, đây là những phiên bản thực tế Bootstrap-Treeview đã được thử nghiệm chống lại.

• Bootstrap v5)
• JQuery v3.4.1 (> = 1.9.0)

Cách sử dụng

Thêm các tài nguyên sau đây cho Bootstrap-Treeview để hoạt động chính xác.

<link href="bootstrap.css" rel="stylesheet">


<script src="jquery.js">script>
<script src="bstreeview.js">script>

Thành phần sẽ liên kết với bất kỳ phần tử DOM hiện có.

Cách sử dụng cơ bản có thể trông giống như thế này.

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}

$('#tree').bstreeview({ data: getTree() });

Cấu trúc dữ liệu

Để xác định cấu trúc phân cấp cần thiết cho cây, cần phải cung cấp một mảng các đối tượng JavaScript lồng nhau.

Thí dụ

var tree = [
  {
    text: "Node 1",
    icon: "fa fa-folder",
    expanded: true,
    nodes: [
      {
        text: "Sub Node 1",
        icon: "fa fa-folder",
        nodes: [
          {
            id:    "sub-node-1",
            text:  "Sub Child Node 1",
            icon:  "fa fa-folder",
            class: "nav-level-3",
            href:  "https://google.com"
          },
          {
            text: "Sub Child Node 2",
            icon: "fa fa-folder"
          }
        ]
      },
      {
        text: "Sub Node 2",
         icon: "fa fa-folder"
      }
    ]
  },
  {
    text: "Node 2",
    icon: "fa fa-folder"
  },
  {
    text: "Node 3",
    icon: "fa fa-folder"
  },
  {
    text: "Node 4",
    icon: "fa fa-folder"
  },
  {
    text: "Node 5",
    icon: "fa fa-folder"
  }
];

Thuộc tính này text được yêu cầu để hiển thị các nút.

Thuộc tính nút

chữ

Giá trị văn bản được hiển thị cho một nút cây đã cho.

biểu tượng

Giá trị lề trái của các nút mẹ, mặc định là

OpenNodelinkOnnewtab

Giá trị lề trái của các nút mẹ, mặc định là

class

Giá trị lề trái của các nút mẹ, mặc định là

OpenNodelinkOnnewtab

Mở Node Link trên tab Trình duyệt mới, mặc định là

9.

Mở Node Link trên tab Trình duyệt mới, mặc định là

Phương pháp

Sự kiện

Giá trị văn bản được hiển thị cho một nút cây đã cho.

biểu tượng

Biểu tượng được hiển thị trên một nút đã cho.

href

Giá trị thuộc tính

thụt lề

Tùy chỉnh tùy chỉnh giữa các cấp độ nút (REM), mặc định là

ParentMarginleft

Giá trị lề trái của các nút mẹ, mặc định là

OpenNodelinkOnnewtab

Mở Node Link trên tab Trình duyệt mới, mặc định là

// Example: initializing the bstreeview
$('#tree').bstreeview({
  data: data,
  expandIcon: 'fa fa-angle-down fa-fw',
  collapseIcon: 'fa fa-angle-right fa-fw',
  indent: 1.25,
  parentsMarginLeft: '1.25rem',
  openNodeLinkOnNewTab: true
});

Phương pháp

Sự kiện

Bản quyền và cấp phép

Bản quyền 2020 Sami Chniter

Được cấp phép theo giấy phép Apache, phiên bản 2.0 ("giấy phép"); Bạn không được sử dụng tệp này ngoại trừ tuân thủ giấy phép. Bạn có thể có được một bản sao giấy phép tại http://www.apache.org/licenses/license-2.0

Trừ khi theo yêu cầu của luật hiện hành hoặc đồng ý bằng văn bản, phần mềm được phân phối theo giấy phép được phân phối trên cơ sở "như là", không có bảo hành hoặc điều kiện dưới bất kỳ hình thức nào, thể hiện hoặc ngụ ý. Xem giấy phép cho các quyền và giới hạn ngôn ngữ cụ thể theo giấy phép.