浅析BootStrap Treeview的简单使用
发布于 2017-06-13 08:54:00 | 329 次阅读 | 评论: 0 | 来源: 网友投递
Bootstrap Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用，涉及到使用要求及数据格式的介绍，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友参考下
bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用。
废话不多说，直接上干干货。
1、bootstrap-treeview Github网址：
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、数据格式：（注意了，使用过程中，树的数据格式可以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 添加容器：
<div id="tree"></div>4.2 定义树结构：（data为Json格式数据，这里采用ajax，从后台获取，代码如下）
<script>
$(function () {
$.ajax({
type: "Post",
url: "/Home/GetTreeJson",
dataType: "json",
success: function (result) {
$('#tree').treeview({
data: result, // 数据源
showCheckbox: true, //是否显示复选框
highlightSelected: true, //是否高亮选中
//nodeIcon: 'glyphicon glyphicon-user', //节点上的图标
nodeIcon: 'glyphicon glyphicon-globe',
emptyIcon: '', //没有子节点的节点图标
multiSelect: false, //多选
onNodeChecked: function (event,data) {
alert(data.nodeId);
},
onNodeSelected: function (event, data) {
alert(data.nodeId);
}
});
},
error: function () {
alert("树形结构加载失败！")
}
});
})
</script>注：onNodeChecked 和 onNodeSelected 方法是说明文档中默认的方法，还有其他的方法，自己自己查阅说明文档，或者查看 bootstrap-treeview.js 文件，未压缩的js文件内容非常详细，易懂。
4.3 Json格式数据源：（采用.net MVC框架，列出简单的Control代码）
/// <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、总结：
简单的创建了树，复杂的功能以及逻辑判断还需要进一步设计，自己阅读bootstrap-treeview.js 还是很有启发和发现的0-0,。
补充：
以上所述是小编给大家介绍的bootstrap treeview的简单使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phperz网站的支持！