首先，先要引入treeview的一些包，例如：
1. ` <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>`
2. `<link rel="stylesheet" type="text/css" href="css/bootstrap-treeview.css"/> `
3. `<script src="bootstrap-3.3.7-dist/js/jquery-1.10.2/jquery.js" type="text/javascript" charset="utf-8"></script>`
4.`<script src="bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>`
5.`<script src="js/bootstrap-treeview.js" type="text/javascript" charset="utf-8"></script>`
需要注意的就是，引入的方式最好是在bootstrap.js引入完成之后在引入treeview；
然后就是的开始正式的操作；
html页面只需要写一个放入的容器就可以了：例如：
<div id="Tree"></div>然后将树引入到这个id为Tree中即可
开始上js代码：
$.ajax({
type:"get",
url:"IndexTreeNode.json",
success:function(requert){
init(requert)
}
});
function init(dear){
$('#Tree').treeview({
data: dear,
levels:1 , //默认显示子级的数量
collapseIcon:" glyphicon glyphicon-folder-open", //收缩节点的图标
expandIcon:"glyphicon glyphicon-folder-close", //展开节点的图标
showIcon: false,//是否显示图标
showCheckbox:true//是否显示多选框
});
}到这里只是使用树的一些基本操作，
但是需要注意：如果按照这种方式敲出来后正常的话应该是可以出来的，但是需要注意的是，你的json文件的树名如果不是下图这种名称为数据的话，那数据是出不来的，如下：
[
{
"Review":"Parent1",
"nodes":[
{
"text":"Parent2",
"Review":[
{
"text":"Parent3"
},
{
"text":"Parent3"
}
]
},
{
"Review":"Parent2",
"nodes":[
{
"text":"Parent3"
},
{
"text":"Parent3"
}
]
},
{
"Review":"Parent2"
}
]
}
]显示文本的名称和下一级的名称一定要是这个，因为treeview树只认识这种格式的写法。
还需要说明一点的是：不管是本地的树文件还是数据库的树文件，一定要通过ajax进行获取才能使用，当初我就犯了一个错误直接将本地的树文件写在了data中，导致引入失败，哈哈，毕竟还是新手，见笑了，
如果大家觉得麻烦当然还有简便一点的做法，那就是将文件进行转化，
转化的过程如下所示：
var loopLevel = 0;
$.ajax({
type:"get",
url:"TreeNode.json",
success:function(requert){
var columnStructure = [{text: "Review", nodes: "nodes"},
{text: "Review", nodes: "nodes"},{text: "Review", nodes: "nodes"}];
//外来数据转化为treeView数据的转化结构
----------
**这里需要注意的是columnStructure 里面的text值，是树结构要显示的文字名称,例如：我的树结构名字为 “ Review ” 那么我columnStructure中text对应的值就是 “ Review ”;**
------------------------------------------------------------------------
obj2treeview(requert,columnStructure);//将外来数据转化为treeview数据
function obj2treeview(resp,structure){
var nodeArray = new Array();
var i = 0;
for(i= 0;i<resp.length;i++){
var treeViewNodeObj;
var textStr = structure[loopLevel].text;
var nodeStr = structure[loopLevel].nodes;
var subNode;
if(resp[i][nodeStr] != undefined){
loopLevel++;
subNode = obj2treeview(resp[i][nodeStr],structure);
loopLevel--;
}
if(subNode != undefined){
treeViewNodeObj = {
text: resp[i][textStr],
nodes: subNode
};
}else{
treeViewNodeObj = {
text: resp[i][textStr]
};
}
nodeArray.push(treeViewNodeObj);
}
init(nodeArray)
return nodeArray
}
}
});
function init(data){
$('#Tree').treeview({
data: data,
levels:1 , //默认显示子级的数量
collapseIcon:" glyphicon glyphicon-folder-open", //收缩节点的图标
expandIcon:"glyphicon glyphicon-folder-close", //展开节点的图标
showIcon: false,//是否显示图标
showCheckbox:true//是否显示多选框
});
}将数据转化完成后就可以显示成下面这个样子了。
以上部分是关于树的转化和一些简单使用；
下面的是一些增删改的功能实现：
因为只是一些小功能所以说，我没有把样式写的很好，大家将就看一下，知道如何使用就好。
首先会在页面写三个按钮 如：
防止大家不知道每个功能代码是什么意思，所以我就把html代码也写上了
<!--树-->
<div id="Tree">
</div>
<!--功能按钮-->
<span class="BtnNew btn btn-default">新增</span>
<span class="BtnRemove btn btn-danger">删除</span>
<span class="BtnModification btn btn-primary" >修改</span>
<!--新增-->
<div class="modal fade" id="myNew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">新增</h4>
</div>
<div class="modal-body">
<form action="">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<span class="col-lg-2 text-right" style="margin-top: 5px;">名称</span>
<div class="col-lg-10">
<input type="text" class="form-control TextInput" />
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary NewDetermine">确定</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<!--编辑-->
<div class="modal fade" id="myModification" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">新增</h4>
</div>
<div class="modal-body">
<form action="">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<span class="col-lg-2 text-right" style="margin-top: 5px;">名称</span>
<div class="col-lg-10">
<input type="text" class="form-control ModificationInput" />
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary ModificationDetermine">确定</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>*除了这三个按钮我还写了两个bootstrap的模态框用于新增和修改时获取相应的值；
然后开始先写新增按钮的功能，*
//新增 事件
//事件注册
function BindEvent()
{
//保存-新增
$(".NewDetermine").click(function () {
$('#myNew').modal('hide')//关闭新增输入窗口
//静态添加节点
var parentNode = $('#Tree').treeview('getSelected');//选中的行
var node = {
text: $('.TextInput').val()//获取新增内容；
};
$('#Tree').treeview('addNode', [node, parentNode]);//添加新增内容
});
}
//显示-新增
$(".BtnNew").click(function(){
var node = $('#Tree').treeview('getSelected');//选中的行
if (node.length == 0) { //当没有选中时的操作
alert("请选择节点")
}else{
$('#TextInput').val('');//让input清空
$('#myNew').modal('show');//显示新增输入窗口
}
});
需要注意的是一定要在init事件后再去调用方法BindEvent，不然是无法做到新增的，至于为什么我就不多说了，大家应该都知道的！
接下来的就是编辑功能了：
//编辑
$(".BtnModification").click(function(){
var node= $('#Tree').treeview('getSelected');//选中的当前行
if(node == 0){//判断是否有选中节点
alert("请选择节点")
}else{
$("#myModification").modal("show");//弹出编辑窗口
}
})
//保存-编辑
$('.ModificationDetermine').click(function(){
$("#myModification").modal("hide");//关闭编辑窗口
var node = $('#Tree').treeview('getSelected');//选中的当前行
var newNode={
text:$('.ModificationInput').val()//获取编辑的文本
};
$('#Tree').treeview('updateNode', [ node, newNode]);//修改当前选中行的文本
});
最后是删除功能：
//删除
$(".BtnRemove").click(function(){
var node = $('#Tree').treeview('getSelected');//选中的当前行
if(node == 0){
alert("请选择节点")
}else{
$('#Tree').treeview('removeNode', [ node, { silent: true } ]);//删除当前选中的节点
}
})删除功能很简单，也就没什么可说的了。
因为刚开始使用这个treeview插件的时候，可是研究了有一段时间呢！虽然看到网上有很多的例子，但是不管怎么试就是不对，后来发现原来是版本的更新，让一些功能进行了更改，然后呢就想贴出来看看能不能对大家有所帮助，也方便自己以后可以回顾；
好了需要说的就这么多，以上仅是本人在使用过程中的一点心得，希望能帮助到大家
如还有不明确的可以查阅官方文档：https://github.com/jonmiles/bootstrap-treeview
也可私信我一起交流心得