Bảng xem cây Bootstrap

Chế độ xem dạng cây biểu thị chế độ xem thông tin có thứ bậc, trong đó mỗi mục có thể có một số mục con

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

  • nước giải khát
    • Nước uống
    • Cà phê
    • Trà
      • Trà đen
      • Trà trắng
      • Trà xanh
        • Sencha
        • Gyokuro
        • Matcha
        • Pi Lo Chun

Tự mình thử »
Bước 1) Thêm HTML

Thí dụ


     
  • nước giải khát
       

           
    • Nước uống

    •      
    • Cà phê

    •      
    • Trà
             

                 
      • Trà đen

      •          
      • Trà trắng

      •          
      • Trà xanh
                   

                       
        • Sencha

        •              
        • Gyokuro

        •              
        • Matcha

        •              
        • Pi Lo Chun

        •            

                 

      •        

           

    •    

     


Bước 2) Thêm CSS

Thí dụ

/* Xóa dấu đầu dòng mặc định */
ul, #myUL {
kiểu danh sách. không ai;
}

/* Xóa lề và phần đệm khỏi phần tử cha */
#myUL {
lề. 0;
đệm. 0;
}

/* Tạo kiểu cho dấu mũ/mũi tên */
dấu mũ {
con trỏ. con trỏ;
người dùng chọn. không ai;
}

/* Tạo dấu mũ/mũi tên bằng unicode và tạo kiểu cho nó */
dấu mũ. trước {
nội dung. "\25B6";
màu. màu đen;
trưng bày. chặn Nội tuyến;
lề phải. 6px;
}

/* Xoay biểu tượng dấu mũ/mũi tên khi được nhấp vào (dùng JavaScript) */
dấu mũ xuống. trước {
biến đổi. xoay (90 độ);
}

/* Ẩn danh sách lồng nhau */
{ lồng nhau
trưng bày. không ai;
}

/* Hiển thị danh sách lồng nhau khi người dùng nhấp vào dấu mũ/mũi tên (với JavaScript) */
tích cực {
trưng bày. khối;
}



Bước 3) Thêm JavaScript

Thí dụ

var Toggler = tài liệu. getElementsByClassName("dấu mũ");
tôi;

cho (i = 0; i < bật tắt. chiều dài;
bật tắt [i]. addEventListener("click", function() {
cái này. phần tử cha mẹ. truy vấnSelector(". lồng nhau"). danh sách lớp học. chuyển đổi ("hoạt động");
cái này. danh sách lớp học. chuyển đổi ("dấu mũ xuống");
});
}

Tự mình thử »


Chế độ xem dạng cây hộp kiểm

Trong ví dụ này, chúng tôi sử dụng unicode "thùng phiếu" thay vì dấu mũ

Thành phần Treetable có thể hiển thị dữ liệu của bạn bằng một HTML đơn giản. Bạn chỉ cần tạo một đánh dấu HTML cho bảng của mình được lồng trong thẻ div với lớp "treetable" - bạn có thể tùy chỉnh bảng của mình sau bằng cách thêm thuộc tính data-mdb vào trình bao bọc

Ghi chú. Đọc tab API để tìm tất cả các tùy chọn khả dụng và tùy chỉnh nâng cao


Ví dụ cơ bản

Tạo Treetable mặc định bằng cách thêm một phần tử table vào một div với một lớp .treetable. Thêm thuộc tính data-depth vào một phần tử hàng cho biết đó là một tổ khác. Mỗi độ sâu của tổ sâu hơn nên được tăng thêm một

NameSizeTypePersonal15mbFolderindex5mbhtmlindex5mbhtmlmy-cat0mbwebpDocuments350mbFolderBill200mbpdfNewspapers mentions50mbPDFEbooks100mbzipSongs30mbFolderOde to JS10mbmp3One more style10mbmp3Bjork-Its-Oh-So-Quiet10mbmp3Images1,5gbFolderAlbum-cover500mbjpegNaruto-background500mbpngSasuke-background500mbwebp

Bảng mở rộng Treegrid của Bảng Bootstrap

Sự phụ thuộc. jquery-treegrid v0. 3. 0

Cách sử dụng

Thí dụ

Tùy chọn

câyKích hoạt

  • thuộc tính. data-tree-enable

  • loại. Boolean

  • Chi tiết

    Đặt true để bật lưới cây

  • Vỡ nợ. ________số 8_______

idField

  • thuộc tính. data-id-field

  • loại. String

  • Chi tiết

    Ghi đè idField mặc định thành 'id'

  • Vỡ nợ. 'id'

parentIdField

  • thuộc tính. data-parent-id-field

  • loại. String

  • Chi tiết

    Đặt trường id gốc

  • Vỡ nợ. data-tree-enable1

câyShowField

  • thuộc tính. data-tree-enable2

  • loại. String

  • Chi tiết

    Đặt data-tree-enable4 sẽ tự động kích hoạt lưới cây

  • Vỡ nợ. data-tree-enable5

rootParentId

  • thuộc tính. data-tree-enable6

  • loại. String

  • Chi tiết

    Đặt id cha gốc

  • Vỡ nợ. data-tree-enable8

Bootstrap có chế độ xem dạng cây không?

Bootstrap treeview được sử dụng để hiển thị thông tin phân cấp bắt đầu từ mục gốc và tiếp tục đến phần tử con và phần tử con tương ứng của chúng . Mỗi mục bên cạnh thư mục gốc có cha mẹ và có thể có con. Cha mẹ là nút cao hơn trong hệ thống phân cấp và con là nút thấp hơn.

Làm cách nào để tạo một treeview động trong jquery?

Đây là quy trình. .
Bước 1) Tải biểu định kiểu. Trước tiên hãy tải các biểu định kiểu cần thiết vào tệp html của bạn. .
Bước 2) Tải thư viện JavaScript. Tiếp theo, bạn phải tải các tệp javascript. .
Bước 3) Tạo Trình giữ chỗ cho Chế độ xem dạng cây. .
Bước 4) Xác định cấu trúc dữ liệu JSON. .
Bước 5) Kết xuất Treeview