BootStrap TreeView使用实例详解


Posted in Javascript onNovember 01, 2017

本文实例为大家分享了BootStrap TreeView使用代码,供大家参考,具体内容如下

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

弹窗口+树形菜单的具体代码

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

<!-- 模态框(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">
         ×
      </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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 #Javascript
详解Vue组件实现tips的总结
Nov 01 #Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 #Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 #Javascript
js前端导出Excel的方法
Nov 01 #Javascript
JS二分查找算法详解
Nov 01 #Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 #Javascript
You might like
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
解析isset与is_null的区别
2013/08/09 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
详解python的四种内置数据结构
2019/03/19 Python
django Admin文档生成器使用详解
2019/07/22 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
工商技校毕业生自荐信
2013/11/15 职场文书
工作保证书范文
2014/04/29 职场文书
会议主持词通用版
2019/04/02 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL