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
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
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;
}
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"];
}];
}
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 thuộc tính. Cách sử dụng
Thí dụ
Tùy chọn
câyKích hoạt
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-enable
1
câyShowField
thuộc tính.
data-tree-enable
2loại.
String
Chi tiết
Đặt
data-tree-enable
4 sẽ tự động kích hoạt lưới câyVỡ nợ.
data-tree-enable
5
rootParentId
thuộc tính.
data-tree-enable
6loại.
String
Chi tiết
Đặt id cha gốc
Vỡ nợ.
data-tree-enable
8