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

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:

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>

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;
}
  
$('#tree').treeview({data: getTree()});

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

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

{
 text: "Node 1"
}

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

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
$('#tree').treeview({
 data: data,   // data is not optional
 levels: 5,
 backColor: 'green'
});

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的对象实例
$('#tree').treeview(true)
 .methodName(args);
  
//对象实例也保存在DOM元素的data中，
//可以使用'treeview'的id来访问它。
$('#tree').data('treeview')
 .methodName(args);