Eine kurze Analyse der einfachen Verwendung von BootStrap Treeview

bootstrap-treeview.js1 ist ein leistungsstarkes Baummenü-Plug-in. Dieser Artikel führt Sie in die einfache Verwendung von Bootstrap Treeview ein.

Kommen wir ohne weitere Umschweife direkt zu den praktischen Dingen.

1. Bootstrap-Treeview Github-URL:

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

2. Nutzungsanforderungen:

<!-- 样式表 -->
<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. Datenformat: (Beachten Sie, dass das Datenformat des Baums während der Verwendung JSON-Format oder hartcodiert sein kann. Natürlich ist hartcodierter Code definitiv nicht flexibel. Die Feldnamen im JSON-Format müssen den Feldanforderungen des Baums entsprechen, d. h. Textformattext, Unterknotennamensknoten usw.)

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 >

4.1 Container hinzufügen:

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

4.2 Definieren Sie die Baumstruktur: (Daten sind im Json-Format, hier wird Ajax verwendet, erhalten von Hintergrund, der Code lautet wie folgt)

<script>
$(function () {
$.ajax({
type: "Post",
url: "/Home/GetTreeJson",
dataType: "json",
success: function (result) {
$(&#39;#tree&#39;).treeview({
data: result, // 数据源
showCheckbox: true, //是否显示复选框
highlightSelected: true, //是否高亮选中
//nodeIcon: &#39;glyphicon glyphicon-user&#39;, //节点上的图标
nodeIcon: &#39;glyphicon glyphicon-globe&#39;,
emptyIcon: &#39;&#39;, //没有子节点的节点图标
multiSelect: false, //多选
onNodeChecked: function (event,data) {
alert(data.nodeId);
},
onNodeSelected: function (event, data) {
alert(data.nodeId);
}
});
},
error: function () {
alert("树形结构加载失败！")
}
});
})
</script>

Hinweis: Die Methoden onNodeChecked und onNodeSelected sind die Standardmethoden in der Dokumentation Erstellen Sie die Dokumentation selbst oder überprüfen Sie die Datei „bootstrap-treeview.js“, die nicht komprimiert ist. Der Inhalt der js-Datei ist sehr detailliert und leicht zu verstehen.

4.3 Datenquelle im Json-Format: (unter Verwendung des .net MVC-Frameworks, Auflistung einfacher Steuercodes)

/// <summary>
/// 返回Json格式数据
/// </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; //树的节点Id，区别于数据库中保存的数据Id。若要存储数据库数据的Id，添加新的Id属性；若想为节点设置路径，类中添加Path属性
public string text; //节点名称
public List<Node> nodes; //子节点，可以用递归的方法读取，方法在下一章会总结
}

5 🎜>

Ein Baum ist einfach erstellt und erfordert weiteres Design. Bootstrap-treeview.js selbst zu lesen ist immer noch sehr inspirierend und auffindbar.

Ergänzung:

Das Obige ist die einfache Verwendung der vom Herausgeber eingeführten Bootstrap-Baumansicht, falls Sie welche haben Fragen Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Artikel zur einfachen Verwendung von BootStrap Treeview finden Sie auf der chinesischen PHP-Website!