Une brève analyse de l'utilisation simple de BootStrap Treeview

bootstrap-treeview.js1 est un puissant plug-in de menu arborescent. Cet article vous présentera l'utilisation simple de bootstrap treeview.

Sans plus attendre, passons directement aux choses pratiques.

1. URL Github bootstrap-treeview :

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

2.

<!-- 样式表 -->
<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. Format des données : (Notez que lors de l'utilisation, le format des données de l'arbre peut être au format Json ou codé en dur. Bien sûr, le code codé en dur est définitivement pas flexible. Les noms de champs au format Json doivent suivre les exigences de champ de l'arborescence, c'est-à-dire le format de texte, les nœuds de nom de sous-nœud, etc.)

4. Utilisation simple :

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.1 Ajouter un conteneur :

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

4.2 Définir l'arborescence : (les données sont au format Json, on utilise ici ajax, obtenu à partir du en arrière-plan, le code est le suivant)

<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>

Remarque : les méthodes onNodeChecked et onNodeSelected sont les méthodes par défaut dans la documentation. Il existe d'autres méthodes. documentation vous-même, ou vérifiez le fichier bootstrap-treeview.js, qui n'est pas compressé. Le contenu du fichier js est très détaillé et facile à comprendre.

4.3 Source de données au format Json : (en utilisant le framework .net MVC, répertoriant les codes de contrôle simples)

/// <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; //子节点，可以用递归的方法读取，方法在下一章会总结
}

Résumé :

Un arbre est simplement créé. Les fonctions complexes et les jugements logiques nécessitent une conception plus approfondie. La lecture de bootstrap-treeview.js par vous-même est toujours très inspirante et découvrable 0-0.

Supplément :

Ce qui précède est l'utilisation simple de l'arborescence bootstrap introduite par l'éditeur. J'espère que cela vous sera utile si vous en avez. questions Si vous avez des questions, laissez-moi un message et je vous répondrai à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles sur l'utilisation simple de BootStrap Treeview, veuillez faire attention au site Web PHP chinois !