Chế độ xem cây bootstrap

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ội dung chính Show

jbtronic / bs-treeview
gil9red / js__played_games_parser
lesha724 / yii2-bootstrap-tree
phụ thuộc
Bắt đầu
Cài đặt
Cách sử dụng
Cấu trúc dữ liệu
Thuộc tính nút
có thể mở rộng
Tùy chọn
Danh sách Tùy chọn
phương pháp
Danh sách các phương pháp
Sự kiện
Danh sách sự kiện
Bản quyền và cấp phép

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


<link href="bootstrap.css" rel="stylesheet">
 
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

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

<div id="tree"></div>

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

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}
 
$('#tree').treeview({data: getTree()});

4 sẽ xây dựng cho bạn một cái cây

{
  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ữ

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}
 
$('#tree').treeview({data: getTree()});

function 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

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}
 
$('#tree').treeview({data: getTree()});

function 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

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}
 
$('#tree').treeview({data: getTree()});

function 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

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}
 
$('#tree').treeview({data: getTree()});

function 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

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}
 
$('#tree').treeview({data: getTree()});

function 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

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}
 
$('#tree').treeview({data: getTree()});

function 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

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"
  }
];

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"
  }
];

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

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"
  }
];

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}
 
$('#tree').treeview({data: getTree()});

8 Mô tả trạng thái ban đầu của nút

tình trạng. đã kiểm tra

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"
  }
];

{
  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

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"
  }
];

{
  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

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"
  }
];

{
  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

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"
  }
];

{
  text: "Node 1"
}

Nút có được chọn hay không

thẻ

{
  text: "Node 1"
}

function 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

$ 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

$ npm install bootstrap-treeview

Kích hoạt sự kiện

{

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

$ npm install bootstrap-treeview

Kích hoạt sự kiện

{
  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ọ

$ npm install bootstrap-treeview

Kích hoạt sự kiện

{
  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

$ npm install bootstrap-treeview

Kích hoạt sự kiện

{
  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

{
  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: [
    {},
    ...
  ]
}

$ npm install bootstrap-treeview

Kích hoạt sự kiện

{
  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

$ npm install bootstrap-treeview

Kích hoạt sự kiện

{
  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

$ npm install bootstrap-treeview

Kích hoạt sự kiện

{
  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

$ npm install bootstrap-treeview

Kích hoạt sự kiện

{
  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

$ npm install bootstrap-treeview

Kích hoạt sự kiện

{
  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


<link href="bootstrap.css" rel="stylesheet">
 
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

Kích hoạt sự kiện

// 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


<link href="bootstrap.css" rel="stylesheet">
 
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

Kích hoạt sự kiện

// 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


<link href="bootstrap.css" rel="stylesheet">
 
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

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


<link href="bootstrap.css" rel="stylesheet">
 
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

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


<link href="bootstrap.css" rel="stylesheet">
 
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

getExpanded()

Trả về một mảng các nút mở rộng e. g. tình trạng. mở rộng = đúng


<link href="bootstrap.css" rel="stylesheet">
 
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

getNode(nodeId)

Trả về một đối tượng nút khớp với id nút đã cho


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



 
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

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


<link href="bootstrap.css" rel="stylesheet">
 
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

getSelected()

Trả về một mảng các nút đã chọn e. g. tình trạng. đã chọn = đúng


<link href="bootstrap.css" rel="stylesheet">
 
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

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


<link href="bootstrap.css" rel="stylesheet">
 
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

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

<div id="tree"></div>

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

<div id="tree"></div>

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

<div id="tree"></div>

Kích hoạt sự kiện

// 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

<div id="tree"></div>

Kích hoạt sự kiện

// 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

<div id="tree"></div>

Kích hoạt sự kiện

// 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;

<div id="tree"></div>

Kích hoạt sự kiện

{
  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: [
    {},
    ...
  ]
}

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'
});

toggleNodeDisabled(nút. nútId, tùy chọn)

Chuyển đổi trạng thái vô hiệu hóa nút;

<div id="tree"></div>

Kích hoạt sự kiện

{
  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 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: [
    {},
    ...
  ]
}

toggleNodeExpanded(nút. nútId, tùy chọn)

Chuyển đổi trạng thái mở rộng nút;

<div id="tree"></div>

Kích hoạt sự kiện

// 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'
});

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: [
    {},
    ...
  ]
}

toggleNodeSelected(nút. nútId, tùy chọn)

Chuyển đổi trạng thái nút đã chọn;

<div id="tree"></div>

Kích hoạt sự kiện

// 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'
});

5 hoặc

$('#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

<div id="tree"></div>

Kích hoạt sự kiện

// 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

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}
 
$('#tree').treeview({data: getTree()});

Kích hoạt sự kiện

// 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

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}
 
$('#tree').treeview({data: getTree()});

Kích hoạt sự kiện

$('#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

// 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

function 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

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}
 
$('#tree').treeview({data: getTree()});

Danh sách sự kiện

$('#tree').treeview('methodName', args)

8 - Một nút được chọn

$('#tree').treeview('methodName', args)

9 - Một nút bị sập

$ npm install bootstrap-treeview

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

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

programming bootstrap