bootstrap-treeview.js1 is a powerful tree menu plug-in. This article will introduce you to the simple use of bootstrap treeview.

No more nonsense, let’s get straight to the practical stuff.

1. bootstrap-treeview Github URL:

https://github.com/jonmiles/bootstrap-treeview

2. Usage requirements:

<!-- 樣式表 -->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/bootstrap-treeview.css" rel="stylesheet" />
<!-- JS文件 -->
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

3. Data format: (Note that during use, the data format of the tree can be Json format or hard-coded. Of course, hard-coded code is definitely not flexible. Json format The field names must follow the field requirements of the tree, that is, text format text, sub-node name nodes, etc.)

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

4. Simple use:

　4.1 Add container:

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

4.2 Define the tree structure: (data is in Json format, ajax is used here, obtained from the background, the code is as follows)

<script>
$(function () {
$.ajax({
type: "Post",
url: "/Home/GetTreeJson",
dataType: "json",
success: function (result) {
$(&#39;#tree&#39;).treeview({
data: result, // 數(shù)據(jù)源
showCheckbox: true, //是否顯示復(fù)選框
highlightSelected: true, //是否高亮選中
//nodeIcon: &#39;glyphicon glyphicon-user&#39;, //節(jié)點(diǎn)上的圖標(biāo)
nodeIcon: &#39;glyphicon glyphicon-globe&#39;,
emptyIcon: &#39;&#39;, //沒有子節(jié)點(diǎn)的節(jié)點(diǎn)圖標(biāo)
multiSelect: false, //多選
onNodeChecked: function (event,data) {
alert(data.nodeId);
},
onNodeSelected: function (event, data) {
alert(data.nodeId);
}
});
},
error: function () {
alert("樹形結(jié)構(gòu)加載失敗！")
}
});
})
</script>

Note: The onNodeChecked and onNodeSelected methods are the default methods in the documentation. There are other methods. Check the documentation yourself, or check the bootstrap-treeview.js file. The content of the uncompressed js file is very detailed and easy to use. Understand.

4.3 Json format data source: (using .net MVC framework, listing simple Control codes)

/// <summary>
/// 返回Json格式數(shù)據(jù)
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult GetTreeJson()
{
var nodeA = new List<Node>();
nodeA.Add(new Node(4, "A01", null));
nodeA.Add(new Node(5, "A02", null));
nodeA.Add(new Node(6, "A03", null));
 
var nodeB = new List<Node>();
nodeB.Add(new Node(7, "B07", null));
nodeB.Add(new Node(8, "B08", null));
nodeB.Add(new Node(9, "B09", null));
 
var nodes = new List<Node>();
nodes.Add(new Node(1, "A01", nodeA));
nodes.Add(new Node(2, "B02", nodeB));
nodes.Add(new Node(3, "A03", null));
return Json(nodes, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// Tree類
/// </summary>
public class Node
{
public Node() { }
public Node(int id, string str, List<Node> node)
{
nodeId = id;
text = str;
nodes = node;
}
public int nodeId; //樹的節(jié)點(diǎn)Id，區(qū)別于數(shù)據(jù)庫中保存的數(shù)據(jù)Id。若要存儲數(shù)據(jù)庫數(shù)據(jù)的Id，添加新的Id屬性；若想為節(jié)點(diǎn)設(shè)置路徑，類中添加Path屬性
public string text; //節(jié)點(diǎn)名稱
public List<Node> nodes; //子節(jié)點(diǎn)，可以用遞歸的方法讀取，方法在下一章會總結(jié)
}

5. Summary:

The tree is simply created. Complex functions and logical judgments need further design. Reading bootstrap-treeview.js yourself is still very inspiring and discoverable 0-0,.

Supplement:

The above is the simple use of bootstrap treeview introduced by the editor. I hope it will be helpful to everyone. If you have any questions If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more articles on the simple use of BootStrap Treeview, please pay attention to the PHP Chinese website!