Home > php教程 > PHP开发 > body text

Detailed explanation of how to use Bootstrap tree menu plug-in TreeView.js

高洛峰
Release: 2016-12-08 11:30:19
Original
1620 people have browsed it

The jQuery multi-level list tree plug-in is based on Twitter Bootstrap and displays some inheritance tree structures, such as view trees, list trees, etc., in a simple and elegant way.

Bootstrap Tree View is a practical Bootstrap tree menu special effects plug-in. It is a very good Bootstrap plug-in. Many pages produced by Bootstrap now need this function. This plug-in requires Bootstrap 3 version and jQuery 2.0 or above. It supports many parameter customization functions. , colors, background colors, icons, links, etc. are still very good.

Rendering:

Detailed explanation of how to use Bootstrap tree menu plug-in TreeView.js

Specific usage:

Plug-in dependencies

Bootstrap v3.0.3
jQuery v2.0.3

The above two external dependency files have been tested and can be used normally. Other versions Bootstrap needs to be tested separately. This plugin does not support bootstrap 2.

How to use

First, introduce the dependency file and bootstrap-treeview.js file into the page.

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

HTML structure

You can use any HTML DOM element as the container of the list tree:

The calling method is as follows:

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

Data structure

In order to create the inheritance structure of the tree, you need to provide a nested structure js object for the list tree plug-in. For example:

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

The simplest tree structure can only have one node, which can be implemented using a js object with a text attribute:

{
 text: "Node 1"
}
Copy after login

If you need to customize more content, you can Reference below:

{
 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: [&#39;available&#39;],
 nodes: [
 {},
 ...
 ]
}
Copy after login

Global parameters

Parameters can customize the default appearance and behavior of treeview. The parameter uses an object to be passed in when the plug-in is initialized:

// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$(&#39;#tree&#39;).treeview({
 data: data,   // data is not optional
 levels: 5,
 backColor: &#39;green&#39;
});
Copy after login

Available methods

You can call methods in two ways:

1. Plug-in wrapper: The wrapper of the plug-in can be used to access the underlying method agent.
$('#tree').treeview('methodName', args)

Multiple parameters must be passed in using array objects.



2. Use treeview directly: You can obtain the treeview object instance through one of the following two methods.

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template