关于bootstrap-treeview数型结构的转化及使用、增删改等操作
来源：互联网 发布：苹果mac系统os 编辑：程序博客网 时间：2024/06/07 20:57
首先，先要引入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
也可私信我一起交流心得
阅读全文
1 0
- 关于bootstrap-treeview数型结构的转化及使用、增删改等操作
- bootstrap treeview 增删改的正确姿势
- XML结合TreeView的使用添，删，改等操作
- bootstrap treeview 增删改查 的正确姿势
- TreeView 增删改使用记录
- oracle中关于表的所有操作（创建删除表，修改表结构，创建约束，操作表数据，增删改查等）
- oracle中关于表的所有操作（创建删除表，修改表结构，创建约束，操作表数据，增删改查等）
- oracle中关于表的所有操作（创建删除表，修改表结构，创建约束，操作表数据，增删改查等）
- oracle中关于表的所有操作（创建删除表，修改表结构，创建约束，操作表数据，增删改查等）
- 关于hbase增删改查的操作
- SQL Server 增删改查等操作及举例
- String深拷贝、比较及增删查改等操作
- 关于MySql中数据库、表的操作以及增删改查等一些SQL语句注意事项
- 顺序表静态与动态实现及基本的操作（增删查改等）
- bootstrap的treeview使用
- 关于MyBatis在eclipse中的配置及简单的增删改查操作
- jQuery实例--Ajax信息的增删改查等操作
- mongodb的增删查改等常用操作
- 如何生成密钥,私钥,签名
- ORA-12505
- 算法学习之旅，初级篇（4）--哈密尔顿距离
- HDU 6070 Dirt Ratio(二分+线段树 17多校第四场)
- docker容器和数据库数据分离
- 关于bootstrap-treeview数型结构的转化及使用、增删改等操作
- MD5对密码进行加密，用Apache codec 替换Sun内部API sun.misc.BASE64Encoder
- shell编程之结构化命令if-then
- 4步教你开发风控评分模型
- 1222 Wolf and Rabbit
- IIS配置支持跨域请求
- hadoop MapReduce集群模式调整匹配及shell脚本处理
- 传统企业转向互联网，如何快速提升研发效能？
- 关于Nginx部署多个项目（多个Tomcat）
