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 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
asp批量修改记录的代码
Jun 25 Javascript
DIV菜单层实现代码
Nov 19 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
详解JavaScript树结构
Jan 09 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
如何手写简易的 Vue Router
Oct 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中的超全局变量
2006/10/09 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
jquery创建div 实现代码
2009/04/27 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
python爬虫headers设置后无效的解决方法
2017/10/21 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
flask中过滤器的使用详解
2018/08/01 Python
python实现简单加密解密机制
2019/03/19 Python
ipad上运行python的方法步骤
2019/10/12 Python
Pytorch之contiguous的用法
2019/12/31 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
EJB的基本架构
2016/09/22 面试题
投标人法定代表人授权委托书格式
2014/09/28 职场文书
先进工作者申报材料
2014/12/23 职场文书
安全责任书
2015/01/29 职场文书
岗位聘任协议书
2015/09/21 职场文书
如何写好竞聘报告
2019/04/03 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android