实例详解BootStrap TreeView使用方法

本文主要为大家详细介绍了bootstrap treeview使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助大家。
【相关视频推荐：bootstrap教程】
<html><head> <title></title> <link href="/scripts/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/scripts/bootstrap/css/bootstrap-treeview.css" rel="stylesheet"> <script src="/scripts/bootstrap/js/jquery.js" type="text/javascript"></script> <script src="/scripts/bootstrap/js/bootstrap-treeview.js" type="text/javascript"></script></head><body><p id="tree"></p><input type="button" id="btn" value="查询" /><script type="text/javascript"> $(function () { function gettree() { // some logic to retrieve, or generate tree structure var data = [{ text: "p1", nodes: [{ text: "p1-1", id: '00001', nodeid: '00001' }, { text: "p1-2", id: '00002' }, { text: "p1-3", id: '00003' }, { text: "p1-4", id: '00004', nodes: [{ text: 'p1-1-1', id: '00005'}]}] }] return data; } var obj = {}; obj.text = "123"; $('#tree').treeview({ data: gettree(), // data is not optional levels: 5, multiselect: true }); $("#btn").click(function (e) { var arr = $('#tree').treeview('getselected'); alert(json.stringify(arr)); for (var key in arr) { alert(arr[key].id); } }) }) </script></body></html>
弹窗口+树形菜单的具体代码
<html><head> <title></title> <link href="/scripts/bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/scripts/bootstrap/css/bootstrap-treeview.css" rel="stylesheet"> <script src="/scripts/bootstrap/js/jquery.js" type="text/javascript"></script> <script src="/scripts/bootstrap/js/bootstrap.js" type="text/javascript"></script> <script src="/scripts/bootstrap/js/bootstrap-treeview.js" type="text/javascript"></script></head><body><p id="c"></p><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal"> 开始演示模态框</button><p class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <p class="modal-dialog"> <p class="modal-content"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="mymodallabel"> 模态框（modal）标题 </h4> </p> <p class="modal-body"> <p id="tree"></p> </p> <p class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <button type="button" class="btn btn-primary" id="btn"> 提交更改 </button> </p> </p></p></p><script type="text/javascript"> $(function () { function gettree() { // some logic to retrieve, or generate tree structure var data = [{ text: "p1", nodes: [{ text: "p1-1", id: '00001', nodeid: '00001' }, { text: "p1-2", id: '00002' }, { text: "p1-3", id: '00003' }, { text: "p1-4", id: '00004', nodes: [{ text: 'p1-1-1', id: '00005'}]}] }] return data; } var obj = {}; obj.text = "123"; $('#tree').treeview({ data: gettree(), // data is not optional levels: 5, multiselect: true }); $("#btn").click(function (e) { var arr = $('#tree').treeview('getselected'); for (var key in arr) { c.innerhtml = c.innerhtml + "," + arr[key].id; } }) }) </script></body></html>
相关推荐：
bootstrap中插件treeview的介绍与使用
jquery treeview树形控件之数据支持json字符串、list集合
js控制treeview的结点选择
以上就是实例详解bootstrap treeview使用方法的详细内容。

实例详解BootStrap TreeView使用方法

推荐信息