内容简介：A very simple plugin to build a basic and elegant Treeview with boostrap 4.Where provided these are the actual versions bootstrap-treeview has been tested against.
Bootstrap 4 Tree View
A very simple plugin to build a basic and elegant Treeview with boostrap 4.
Dependencies
Where provided these are the actual versions bootstrap-treeview has been tested against.
Getting Started
Install
You can install using npm (recommended):
$ npm install bstreeview
or download manually.
Usage
Add the following resources for the bootstrap-treeview to function correctly.
<!-- Required Stylesheets --> <link href="bootstrap.css" rel="stylesheet"> <!-- Required Javascript --> <script src="jquery.js"></script> <script src="bstreeview.js"></script>
The component will bind to any existing DOM element.
<div id="tree"></div>
Basic usage may look something like this.
function getTree() {
// Some logic to retrieve, or generate tree structure
return data;
}
$('#tree').bstreeview({ data: getTree() });
Data Structure
In order to define the hierarchical structure needed for the tree it's necessary to provide a nested array of JavaScript objects.
Example
var tree = [
{
text: "Node 1",
icon: "fa fa-folder",
nodes: [
{
text: "Sub Node 1",
icon: "fa fa-folder",
nodes: [
{
text: "Sub Child Node 1",
icon: "fa fa-folder"
},
{
text: "Sub Child Node 2",
icon: "fa fa-folder"
}
]
},
{
text: "Sub Node 2",
icon: "fa fa-folder"
}
]
},
{
text: "Node 2",
icon: "fa fa-folder"
},
{
text: "Node 3",
icon: "fa fa-folder"
},
{
text: "Node 4",
icon: "fa fa-folder"
},
{
text: "Node 5",
icon: "fa fa-folder"
}
];
This property text is required to display nodes.
{
text: "Node 1"
}
Yes, we can make some options for bstreeview, i will explain them later :p
{
Node Properties
text
String Mandatory
The text value displayed for a given tree node.
icon
String Optional
The icon displayed on a given node.
Options
// Example: initializing the bstreeview
$('#tree').treeview({
data: data // data is required
});
Methods
Events
Copyright and Licensing
Copyright 2020 Sami CHNITER
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
以上所述就是小编给大家介绍的《Bootstrap 4 Treeview》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
