bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用。
废话不多说，直接上干干货。
1、bootstrap-treeview Github网址：
https://github.com/jonmiles/bootstrap-treeview
2、使用要求：
云点滴客户解决方案是针对中小企业量身制定的具有简单易用、功能强大、永久免费使用、终身升级维护的智能化客户解决方案。依托功能强大、安全稳定的阿里云平 台，性价比高、扩展性好、安全性高、稳定性好。高内聚低耦合的模块化设计，使得每个模块最大限度的满足需求，相关模块的组合能满足用户的一系列要求。简单 易用的云备份使得用户随时随地简单、安全、可靠的备份客户信息。功能强大的报表统计使得用户大数据分析变的简单，
3、数据格式：（注意了，使用过程中，树的数据格式可以Json格式，也可以写死，当然写死的代码肯定不灵活。Json格式的字段名一定要按照tree的字段要求，即文本格式text，子节点名称nodes等）
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 添加容器：
4.2 定义树结构：（data为Json格式数据，这里采用ajax，从后台获取，代码如下）
注：onNodeChecked 和 onNodeSelected 方法是说明文档中默认的方法，还有其他的方法，自己自己查阅说明文档，或者查看 bootstrap-treeview.js 文件，未压缩的js文件内容非常详细，易懂。
4.3 Json格式数据源：（采用.net MVC框架，列出简单的Control代码）
////// 返回Json格式数据 /// ///[HttpPost] public JsonResult GetTreeJson() { var nodeA = new List (); 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 (); 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 (); 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); } /// /// Tree类 /// public class Node { public Node() { } public Node(int id, string str, Listnode) { nodeId = id; text = str; nodes = node; } public int nodeId; //树的节点Id，区别于数据库中保存的数据Id。若要存储数据库数据的Id，添加新的Id属性；若想为节点设置路径，类中添加Path属性 public string text; //节点名称 public List nodes; //子节点，可以用递归的方法读取，方法在下一章会总结 }
5、总结：
简单的创建了树，复杂的功能以及逻辑判断还需要进一步设计，自己阅读bootstrap-treeview.js 还是很有启发和发现的0-0,。
补充：
以上所述是小编给大家介绍的bootstrap treeview的简单使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对PHP中文网的支持！
更多浅析BootStrap Treeview的简单使用相关文章请关注PHP中文网！
