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 相关文章推荐
js计算页面刷新的次数
Jul 20 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
微信小程序实现多图上传
Jun 19 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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中的Class的几点个人看法
2006/10/09 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
初识Laravel
2014/10/30 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
JScript的条件编译
2007/05/29 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
小学假期安全广播稿
2014/09/28 职场文书
教师党员个人整改措施
2014/10/27 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
mysql部分操作
2021/04/05 MySQL
解决hive中导入text文件遇到的坑
2021/04/07 Python
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
python基于turtle绘制几何图形
2021/06/15 Python
redis 存储对象的方法对比分析
2021/08/02 Redis