Bootstrap Treeview, Một plugin rất đơn giản để xây dựng Treeview cơ bản và thanh lịch với bootstrap 4. Xem bản trình diễn
nút bootstrap bootstrap4 cấu trúc cây treeview bootstrap-treeview treenode bstreeview
- Cập nhật28 tháng 4 năm 2022
- JavaScript
jbtronic / bs-treeview
Nhà tài trợ
Sao 2
- Mã số
- Vấn đề
- Yêu cầu kéo
Phần tử TreeView cho trình duyệt mà không có bất kỳ phụ thuộc nào
javascript bootstrap treeview bootstrap-treeview treeview-bootstrap treeview-component javascript-treeview
- Cập nhật ngày 13 tháng 8 năm 2022
- bản đánh máy
gil9red / js__played_games_parser
Sao 1
- Mã số
- Vấn đề
- Yêu cầu kéo
https. //gil9red. github. io/js__played_games_parser/
trình phân tích cú pháp jquery ajax bootstrap4 jquery-jsonview bootstrap-treeview cors-anywhere
- Cập nhật24/12/2021
- JavaScript
lesha724 / yii2-bootstrap-tree
Sao 1
- Mã số
- Vấn đề
- Yêu cầu kéo
tiện ích yii2 cho cây bootstrap [ https. //github. com/patternfly/patternfly-bootstrap-treeview ]
tiện ích cây bootstrap yii2 yii2-extension yii2-widgets treeview yii2-bootstrap-tree bootstrap-treeview bootstrap-tree
Một giải pháp đơn giản và tao nhã để hiển thị cấu trúc cây phân cấp [i. e. một Chế độ xem dạng cây] trong khi tận dụng những gì tốt nhất mà Twitter Bootstrap cung cấp
phụ thuộc
Với điều kiện đây là những phiên bản bootstrap-treeview thực tế đã được thử nghiệm đối với
- Bootstrap v3. 3. 4 [>= 3. 0. 0]
- jQuery v2. 1. 3 [>= 1. 9. 0]
Bắt đầu
Cài đặt
Bạn có thể cài đặt bằng bower [được khuyến nghị]
$ bower install bootstrap-treeview
hoặc sử dụng npm
$ npm install bootstrap-treeview
hoặc tải thủ công
Cách sử dụng
Thêm các tài nguyên sau để bootstrap-treeview hoạt động chính xác
Thành phần này sẽ liên kết với bất kỳ phần tử DOM hiện có nào
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'].treeview[{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 cung cấp một mảng các đối tượng JavaScript lồng nhau
Ví dụ
var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
Ở mức thấp nhất, nút cây được biểu diễn dưới dạng đối tượng JavaScript đơn giản. Tài sản bắt buộc này
4 sẽ xây dựng cho bạn một cái câyfunction getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
{
text: "Node 1"
}
Nếu bạn muốn làm nhiều hơn nữa, đây là thông số đầy đủ của nút
________số 8_______
Thuộc tính nút
Các thuộc tính sau được xác định để cho phép ghi đè mức nút, chẳng hạn như các biểu tượng, màu sắc và thẻ cụ thể của nút
chữ
5function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
6function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
Giá trị văn bản được hiển thị cho một nút cây nhất định, thường ở bên phải của biểu tượng nút
biểu tượng
5function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
8function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
Biểu tượng được hiển thị trên một nút nhất định, thường ở bên trái của văn bản
Để đơn giản, chúng tôi tận dụng trực tiếp và do đó, bạn nên cung cấp cả lớp cơ sở và lớp biểu tượng riêng lẻ được phân tách bằng dấu cách
Bằng cách cung cấp lớp cơ sở, bạn có toàn quyền kiểm soát các biểu tượng được sử dụng. Nếu bạn muốn sử dụng của riêng mình thì chỉ cần thêm lớp của bạn vào trường biểu tượng này
đã chọnBiểu tượng
5function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
8function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
Biểu tượng hiển thị trên một nút nhất định khi được chọn, thường ở bên trái văn bản
màu sắc
5function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
8function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
Màu nền trước được sử dụng trên một nút nhất định, ghi đè tùy chọn màu chung
màu nền
5function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
8function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
Màu nền được sử dụng trên một nút nhất định, ghi đè tùy chọn màu chung
href
5function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
8function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
Được sử dụng cùng với tùy chọn enableLinks toàn cầu để chỉ định URL thẻ neo trên một nút nhất định
có thể lựa chọn
7var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
8var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
Có hay không một nút có thể được chọn trong cây. Sai cho biết nút sẽ hoạt động như một tiêu đề mở rộng và sẽ không kích hoạt các sự kiện lựa chọn
tình trạng
9var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
8 Mô tả trạng thái ban đầu của nútfunction getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
tình trạng. đã kiểm tra
7var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
2{
text: "Node 1"
}
Nút có được kiểm tra hay không, được biểu thị bằng biểu tượng kiểu hộp kiểm
tình trạng. tàn tật
7var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
2{
text: "Node 1"
}
Nút có bị vô hiệu hóa hay không [không thể chọn, có thể mở rộng hoặc có thể kiểm tra]
tình trạng. mở rộng
7var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
2{
text: "Node 1"
}
Có hay không một nút được mở rộng i. e. mở. Được ưu tiên hơn các mức tùy chọn toàn cầu
tình trạng. đã chọn
7var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
2{
text: "Node 1"
}
Nút có được chọn hay không
thẻ
9{
text: "Node 1"
}
8function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
Được sử dụng cùng với tùy chọn showTags toàn cầu để thêm thông tin bổ sung vào bên phải của mỗi nút;
có thể mở rộng
Bạn có thể mở rộng đối tượng nút bằng cách thêm bất kỳ số cặp giá trị khóa bổ sung nào mà bạn yêu cầu cho ứng dụng của mình. Hãy nhớ rằng đây là đối tượng sẽ được chuyển trong các sự kiện lựa chọn
Tùy chọn
Các tùy chọn cho phép bạn tùy chỉnh giao diện và hành vi mặc định của treeview. Chúng được chuyển đến plugin khi khởi tạo, dưới dạng một đối tượng
// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
Bạn có thể chuyển một đối tượng tùy chọn mới cho treeview bất cứ lúc nào nhưng điều này sẽ có tác dụng khởi tạo lại treeview
Danh sách Tùy chọn
Sau đây là danh sách tất cả các tùy chọn có sẵn
dữ liệu
Mảng đối tượng. Không có mặc định, mong đợi dữ liệu
Đây là dữ liệu cốt lõi sẽ được hiển thị bởi chế độ xem dạng cây
màu nền
Chuỗi, bất kỳ giá trị màu hợp pháp nào. Mặc định. kế thừa từ Bootstrap. css
Đặt màu nền mặc định được sử dụng bởi tất cả các nút, trừ khi bị ghi đè trên cơ sở mỗi nút trong dữ liệu
màu viền
Chuỗi, bất kỳ giá trị màu hợp pháp nào. Mặc định. kế thừa từ Bootstrap. css
Đặt màu đường viền cho thành phần;
đã chọnBiểu tượng
Chuỗi, tên lớp. Mặc định. "glyphicon glyphicon-check" như được định nghĩa bởi
Đặt biểu tượng thành hộp kiểm đã chọn, được sử dụng cùng với showCheckbox
sụp đổBiểu tượng
Chuỗi, tên lớp. Mặc định. "glyphicon glyphicon-minus" như được định nghĩa bởi
Đặt biểu tượng sẽ được sử dụng trên nút cây có thể thu gọn
màu sắc
Chuỗi, bất kỳ giá trị màu hợp pháp nào. Mặc định. kế thừa từ Bootstrap. css
Đặt màu nền trước mặc định được sử dụng bởi tất cả các nút, ngoại trừ khi bị ghi đè trên cơ sở mỗi nút trong dữ liệu
Biểu tượng rỗng
Chuỗi, tên lớp. Mặc định. "glyphicon" như được định nghĩa bởi
Đặt biểu tượng được sử dụng trên nút cây không có nút con
enableLinks
Boolean. Mặc định. SAI
Có hay không trình bày văn bản nút dưới dạng siêu liên kết. Giá trị href phải được cung cấp trong cấu trúc dữ liệu trên cơ sở mỗi nút
mở rộngBiểu tượng
Chuỗi, tên lớp. Mặc định. "glyphicon glyphicon-plus" như được định nghĩa bởi
Đặt biểu tượng được sử dụng trên nút cây có thể mở rộng
nổi bậtTìm kiếmKết quả
Boolean. Mặc định. ĐÚNG VẬY
Có hay không làm nổi bật kết quả tìm kiếm
nổi bậtĐã chọn
Boolean. Mặc định. ĐÚNG VẬY
Có hay không đánh dấu nút đã chọn
cấp độ
số nguyên. Mặc định. 2
Đặt số cấp độ phân cấp mà cây sẽ được mở rộng theo mặc định
đa lựa chọn
Boolean. Mặc định. SAI
Có hay không nhiều nút có thể được chọn cùng một lúc
nútBiểu tượng
Chuỗi, tên lớp. Mặc định. "glyphicon glyphicon-stop" như được định nghĩa bởi
Đặt biểu tượng mặc định sẽ được sử dụng trên tất cả các nút, ngoại trừ khi bị ghi đè trên cơ sở mỗi nút trong dữ liệu
onhoverMàu sắc
Chuỗi, bất kỳ giá trị màu hợp pháp nào. Mặc định. '#F5F5F5'
Đặt màu nền mặc định được kích hoạt khi con trỏ của người dùng di chuyển qua một nút
đã chọnBiểu tượng
Chuỗi, tên lớp. Mặc định. "glyphicon glyphicon-stop" như được định nghĩa bởi
Đặt biểu tượng mặc định sẽ được sử dụng trên tất cả các nút đã chọn, ngoại trừ khi bị ghi đè trên cơ sở mỗi nút trong dữ liệu
tìm kiếmResultBackColor
Chuỗi, bất kỳ giá trị màu hợp pháp nào. Mặc định. không xác định, kế thừa
Đặt màu nền của nút đã chọn
tìm kiếmKết quảMàu
Chuỗi, bất kỳ giá trị màu hợp pháp nào. Mặc định. '#D9534F'
Đặt màu nền trước của nút đã chọn
đã chọnBackColor
Chuỗi, bất kỳ giá trị màu hợp pháp nào. Mặc định. '#428bca'
Đặt màu nền của nút đã chọn
đã chọnMàu
Chuỗi, bất kỳ giá trị màu hợp pháp nào. Mặc định. '#FFFFFF'
Đặt màu nền trước của nút đã chọn
hiệnBiên giới
Boolean. Mặc định. ĐÚNG VẬY
Có hay không hiển thị đường viền xung quanh các nút
hiển thịHộp kiểm
Boolean. Mặc định. SAI
Có hay không hiển thị các hộp kiểm trên các nút
showIcon
Boolean. Mặc định. ĐÚNG VẬY
Có hay không hiển thị biểu tượng nút
showTags
Boolean. Mặc định. SAI
Có hay không hiển thị các thẻ ở bên phải của mỗi nút. Các giá trị phải được cung cấp trong cấu trúc dữ liệu trên cơ sở mỗi nút
bỏ chọnBiểu tượng
Chuỗi, tên lớp. Mặc định. "không chọn glyphicon glyphicon" như được định nghĩa bởi
Đặt biểu tượng thành hộp kiểm không được chọn, được sử dụng cùng với showCheckbox
phương pháp
Các phương thức cung cấp cách tương tác với plugin theo chương trình. Ví dụ: có thể mở rộng một nút thông qua phương thức expandNode
Bạn có thể gọi các phương thức theo một trong hai cách, sử dụng một trong hai cách
1. Trình bao bọc của plugin
Trình bao bọc của plugin hoạt động như một proxy để truy cập các phương thức cơ bản
$['#tree'].treeview['methodName', args]
Hạn chế, nhiều đối số phải được truyền dưới dạng một mảng đối số
2. treeview trực tiếp
Bạn có thể lấy một phiên bản của treeview bằng một trong hai phương pháp sau
0$ npm install bootstrap-treeview
Một cách tiếp cận tốt hơn, nếu bạn có kế hoạch tương tác nhiều
Danh sách các phương pháp
Sau đây là danh sách tất cả các phương pháp có sẵn
kiểm tra tất cả [tùy chọn]
Kiểm tra tất cả các nút cây
1$ npm install bootstrap-treeview
Kích hoạt sự kiện
1;{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
checkNode[nút. nútId, tùy chọn]
Kiểm tra một nút cây nhất định, chấp nhận nút hoặc nútId
2$ npm install bootstrap-treeview
Kích hoạt sự kiện
1;{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
tìm kiếm rõ ràng[]
Xóa chế độ xem dạng cây của mọi kết quả tìm kiếm trước đó e. g. xóa trạng thái được đánh dấu của họ
3$ npm install bootstrap-treeview
Kích hoạt sự kiện
3{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
thu gọnTất cả [tùy chọn]
Thu gọn tất cả các nút của cây, thu gọn toàn bộ cây
4$ npm install bootstrap-treeview
Kích hoạt sự kiện
4;{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
sụp đổNode[nút. nútId, tùy chọn]
Thu gọn một nút cây đã cho và đó là các nút con. Nếu bạn không muốn thu gọn các nút con, hãy vượt qua tùy chọn
5{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
5$ npm install bootstrap-treeview
Kích hoạt sự kiện
4;{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
vô hiệu hóaTất cả [tùy chọn]
Vô hiệu hóa tất cả các nút cây
6$ npm install bootstrap-treeview
Kích hoạt sự kiện
7;{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
vô hiệu hóaNode[nút. nútId, tùy chọn]
Vô hiệu hóa một nút cây nhất định, chấp nhận nút hoặc nútId
7$ npm install bootstrap-treeview
Kích hoạt sự kiện
7;{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
enableAll [tùy chọn]
Kích hoạt tất cả các nút cây
8$ npm install bootstrap-treeview
Kích hoạt sự kiện
9;{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
enableNode[nút. nútId, tùy chọn]
Kích hoạt một nút cây nhất định, chấp nhận nút hoặc nútId
9$ npm install bootstrap-treeview
Kích hoạt sự kiện
9;{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
mở rộngTất cả [tùy chọn]
Mở rộng tất cả các nút cây. Tùy chọn có thể được mở rộng thành bất kỳ số lượng cấp độ nhất định nào
0
Kích hoạt sự kiện
1;// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
expandNode[nút. nútId, tùy chọn]
Mở rộng một nút cây nhất định, chấp nhận nút hoặc nútId. Tùy chọn có thể được mở rộng thành bất kỳ số lượng cấp độ nhất định nào
1
Kích hoạt sự kiện
1;// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
getCollapsed[]
Trả về một mảng các nút được thu gọn e. g. tình trạng. mở rộng = sai
2
bị vô hiệu hóa []
Trả về một mảng các nút bị vô hiệu hóa e. g. tình trạng. bị vô hiệu hóa = đúng
3
getEnabled[]
Trả về một mảng các nút được kích hoạt e. g. tình trạng. bị vô hiệu hóa = sai
4
getExpanded[]
Trả về một mảng các nút mở rộng e. g. tình trạng. mở rộng = đúng
5
getNode[nodeId]
Trả về một đối tượng nút khớp với id nút đã cho
6
getParent[nút. nútId]
Trả về nút cha của một nút đã cho, nếu hợp lệ, ngược lại trả về không xác định
7
getSelected[]
Trả về một mảng các nút đã chọn e. g. tình trạng. đã chọn = đúng
8
getSiblings[nút. nútId]
Trả về một mảng các nút anh chị em cho một nút nhất định, nếu hợp lệ, ngược lại trả về không xác định
9
getUnselected[]
Trả về một mảng các nút không được chọn e. g. tình trạng. đã chọn = sai
0
di dời[]
Xóa thành phần xem dạng cây. Xóa các sự kiện đính kèm, các đối tượng đính kèm bên trong và các phần tử HTML đã thêm
1
RevealNode[nút. nútId, tùy chọn]
Hiển thị một nút cây nhất định, mở rộng cây từ nút đến gốc
2
Kích hoạt sự kiện
1;// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
tìm kiếm [mẫu, tùy chọn]
Tìm kiếm các nút khớp với một chuỗi nhất định trong chế độ xem dạng cây, đánh dấu chúng trong cây
Trả về một mảng các nút phù hợp
3
Kích hoạt sự kiện
4// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
selectNode[nút. nútId, tùy chọn]
Chọn một nút cây nhất định, chấp nhận nút hoặc nútId
4
Kích hoạt sự kiện
5;// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
toggleNodeChecked[nút. nútId, tùy chọn]
Chuyển đổi trạng thái đã kiểm tra các nút;
5
Kích hoạt sự kiện
1 hoặc{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
7;// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
toggleNodeDisabled[nút. nútId, tùy chọn]
Chuyển đổi trạng thái vô hiệu hóa nút;
6
Kích hoạt sự kiện
7 hoặc{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
9;{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
toggleNodeExpanded[nút. nútId, tùy chọn]
Chuyển đổi trạng thái mở rộng nút;
7
Kích hoạt sự kiện
1 hoặc// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
4;{
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
state: {
checked: true,
disabled: true,
expanded: true,
selected: true
},
tags: ['available'],
nodes: [
{},
...
]
}
toggleNodeSelected[nút. nútId, tùy chọn]
Chuyển đổi trạng thái nút đã chọn;
8
Kích hoạt sự kiện
5 hoặc// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
3;$['#tree'].treeview['methodName', args]
bỏ chọn Tất cả [tùy chọn]
Bỏ chọn tất cả các nút cây
9
Kích hoạt sự kiện
7;// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
bỏ chọnNode[nút. nútId, tùy chọn]
Bỏ chọn một nút cây nhất định, chấp nhận nút hoặc nútId
0function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
Kích hoạt sự kiện
7;// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
bỏ chọnNode[nút. nútId, tùy chọn]
Bỏ chọn một nút cây nhất định, chấp nhận nút hoặc nútId
1function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
Kích hoạt sự kiện
3;$['#tree'].treeview['methodName', args]
Sự kiện
Các sự kiện được cung cấp để ứng dụng của bạn có thể đáp ứng những thay đổi trong trạng thái của treeview. Ví dụ: nếu bạn muốn cập nhật hiển thị khi một nút được chọn, hãy sử dụng sự kiện
5// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$['#tree'].treeview[{
data: data, // data is not optional
levels: 5,
backColor: 'green'
}];
Bạn có thể liên kết với bất kỳ sự kiện nào được xác định bên dưới bằng cách sử dụng trình xử lý gọi lại tùy chọn hoặc jQuery tiêu chuẩn. về phương pháp
Ví dụ sử dụng trình xử lý gọi lại tùy chọn
2function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
và sử dụng jQuery. về phương pháp
3function getTree[] {
// Some logic to retrieve, or generate tree structure
return data;
}
$['#tree'].treeview[{data: getTree[]}];
Danh sách sự kiện
8 - Một nút được chọn$['#tree'].treeview['methodName', args]
9 - Một nút bị sập$['#tree'].treeview['methodName', args]
00 - Một nút bị vô hiệu hóa$ npm install bootstrap-treeview
01 - Một nút được kích hoạt$ npm install bootstrap-treeview
02 - Một nút được mở rộng$ npm install bootstrap-treeview
03 - Một nút được chọn$ npm install bootstrap-treeview
04 - Nút không được chọn$ npm install bootstrap-treeview
05 - Nút không được chọn$ npm install bootstrap-treeview
06 - Sau khi tìm kiếm hoàn tất$ npm install bootstrap-treeview
07 - Sau khi xóa kết quả tìm kiếm$ npm install bootstrap-treeview
Bản quyền và cấp phép
Bản quyền 2013 Jonathan Miles
Được cấp phép theo Giấy phép Apache, Phiên bản 2. 0 ["Giấy phép"]; . Bạn có thể lấy một bản sao của Giấy phép tại http. //www. apache. org/giấy phép/GIẤY PHÉP-2. 0
Trừ khi luật hiện hành yêu cầu hoặc được đồng ý bằng văn bản, phần mềm được phân phối theo Giấy phép sẽ được phân phối trên CƠ SỞ "NGUYÊN TRẠNG", KHÔNG CÓ BẢO ĐẢM HAY ĐIỀU KIỆN DƯỚI BẤT KỲ HÌNH THỨC NÀO, rõ ràng hay ngụ ý. Xem Giấy phép để biết các quyền và giới hạn quản lý ngôn ngữ cụ thể theo Giấy phép