<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

<div id="tree"></div>

<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>

弹窗口+树形菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" 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">

                  &times;

            </button>

            <h4 class="modal-title" id="myModalLabel">

               模态框（Modal）标题

            </h4>

         </div>

         <div class="modal-body">

          <div id="tree"></div>

         </div>

         <div class="modal-footer">

            <button type="button" class="btn btn-default"

               data-dismiss="modal">关闭

            </button>

            <button type="button" class="btn btn-primary" id="btn">

               提交更改

            </button>

         </div>

      </div><!-- /.modal-content -->

</div><!-- /.modal -->

</div>

<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使用示例的更多相关文章

  1. Bootstrap treeview增加或者删除节点

    参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.ne ...

  2. 初始化bootstrap treeview树节点

    最近在做启明星图库时,使用了Jquery Bootstrap  Treeview插件.但是,遇到了一个初始化的问题.先看效果如下: 当用户打开图库时,左边分类第一个类别是“所有分类”,默认需要选中. ...

  3. bootstrap treeview 树形数据生成

    这个问题还是挺经典的,后台只是负责查出所有的数据,前台js来处理数据展示给treeview;show you the code below:<script> $(function () { ...

  4. bootstrap treeview实现菜单树

    本博客,介绍通过Bootstrap的treeview插件实现菜单树的功能. treeview链接:http://www.htmleaf.com/Demo/201502141380.html ORM框架 ...

  5. 在vue-cli项目中使用bootstrap的方法示例

    在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-cli生成的前端项目中如何加入?因为框架不一样了,略微要适应一 ...

  6. Bootstrap 实现CRUD示例及代码

    https://github.com/wenzhixin/bootstrap-table-examples/blob/master/crud/index.html <!DOCTYPE html& ...

  7. Bootstrap Table 使用示例及代码

    http://issues.wenzhixin.net.cn/bootstrap-table/ <!DOCTYPE html> <html> <head> < ...

  8. Bootstrap导航栏示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Bootstrap 表单示例

    1.打开https://getbootstrap.com/docs/4.3/examples/checkout/复制表单源码 2.清空main标签内容 3.粘贴表单源码 4.示例图

随机推荐

  1. angular.js简介

    angularJS是一个javaScript框架.可通过<script>标签添加到HTML页面 angular通过指令扩展了HTML,且通过表达式绑定数据到html 当网页加载完毕,Ang ...

  2. Node.js学习 - CallBack Function

    Node.js异步编程的直接体现就是回调,Node使用了大量的回调函数,其所有的API都支持回调. 阻塞代码实例(同步) var fs = require("fs"); var d ...

  3. Problem A: 小火山的跳子游戏 多校训练2（小火山专场）（周期）

    题目链接:http://acm.zzuli.edu.cn/zzuliacm/problem.php?cid=1158&pid=0 zzuli 1905  题意:如果k=1的话是1,2,3,4. ...

  4. C#中：函数访问级别对函数形参访问级别的约束

    Inconsistent accessibility: parameter type 'Program.CommandLineInfo' is less accessible than method ...

  5. select 通过表单提交获取select中的值

    <select class="txt" name="choice">       <option value="name" ...

  6. Android --- 读取系统资源函数getResources()小结

    http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1201/655.html 编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用, ...

  7. 服务器 vps 空间

    服务器 服务器是一台独立的机器,拥有独立的ip,磁盘空间,内存空间,可以认为是一台功能强大的电脑. VPS VPS是利用虚拟化技术将服务器虚拟成多台服务器,独立的ip,磁盘空间,内存空间,服务器的vp ...

  8. JSP标准标签库(JSTL)--国际化标签库 fmt

    JSTL中使用fmt.tld作为格式化标签库的定义文件 No. 功能分类 标签名称 描述 1 国际化标签 <fmt:setLocale> 设置一个全局的地区代码 2 <fmt:req ...

  9. 【嵌入式linux】（第三步）：安装串口终端 (ubuntu安装minicom串口终端）

    1.前言 我使用的是USB转串口,芯片是PL2303,貌似ubuntu自带了PL2303的USB驱动,可以直接使用,其它的USB转串口的没试过. 2.minicom安装 在终端中输入 : sudo a ...

  10. angularJS在创建指令需要注意的问题(指令中使用ngRepeat)

    现在发现,当初的自己真的是太菜了,为什么你在指令中更改数据,没有作用呢?这其实是原型链的问题. 详细的我就不在这里说了,有位大神早已发布了这个内容,在这里复制个地址给大家,有兴趣的可以看看 http: ...