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>/// <retus></retus>[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));retu 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,。

本人毕业刚开始工作，如有不当和不规范的地方，还请指正！