Bootstrap 트리 메뉴 플러그인 TreeView.js 사용법에 대한 자세한 설명

jQuery 다중 레벨 목록 트리 플러그인은 Twitter Bootstrap을 기반으로 하며 뷰 트리, 목록 트리 등과 같은 일부 상속 트리 구조를 간단하고 우아한 방식으로 표시합니다.

실용적인 Bootstrap 트리 메뉴 특수 효과 플러그인 Bootstrap Tree View는 매우 우수한 Bootstrap 플러그인입니다. 이제 Bootstrap에서 제작한 많은 페이지에 이 기능이 필요합니다. 3 버전 및 jQuery 2.0 이상. 색상, 배경색, 아이콘, 링크 등과 같은 많은 매개변수 사용자 정의 기능을 지원하며 이는 여전히 매우 좋습니다.

렌더링:

구체적인 사용법:

플러그인 종속성

Bootstrap v3.0.3
jQuery v2.0.3

위의 두 외부 종속성 파일은 테스트되었으며 정상적으로 사용할 수 있습니다. 다른 버전의 Bootstrap은 별도로 테스트해야 합니다. 이 플러그인은 부트스트랩 2를 지원하지 않습니다.

사용방법

먼저 페이지에 의존성 파일과 bootstrap-treeview.js 파일을 소개합니다.

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

HTML 구조

모든 HTML DOM 요소를 목록 트리의 컨테이너로 사용할 수 있습니다.

🎜>플러그인 호출

리스트 트리 플러그인의 가장 기본적인 호출 방법은 다음과 같습니다.

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

데이터 구조

트리의 상속 구조를 생성하려면 목록 트리 플러그인에 중첩 구조 js 개체를 제공해야 합니다. 예:

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

가장 간단한 트리 구조에는 노드가 하나만 있을 수 있으며, 이는 텍스트 속성이 있는 js 객체를 사용하여 구현할 수 있습니다.

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

전역 매개변수

매개변수는 트리뷰의 기본 모양과 동작을 사용자 정의할 수 있습니다. 매개변수는 플러그인이 초기화될 때 전달되는 개체를 사용합니다.

// 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. 플러그인 래퍼: 플러그인 래퍼를 프록시로 사용하여 기본 메서드에 액세스할 수 있습니다.
$('#tree').treeview('methodName', args)
배열 객체를 사용하여 여러 매개변수를 전달해야 합니다.

2. treeview 직접 사용: 다음 두 가지 방법 중 하나를 통해 treeview 객체 인스턴스를 얻을 수 있습니다.

//该方法返回一个treeview的对象实例
$('#tree').treeview(true)
 .methodName(args);
  
//对象实例也保存在DOM元素的data中，
//可以使用'treeview'的id来访问它。
$('#tree').data('treeview')
 .methodName(args);