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 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
如何基于javascript实现贪吃蛇游戏
Feb 09 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 版本]
2007/03/20 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
详解PHP队列的实现
2019/03/14 PHP
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
python集合常见运算案例解析
2019/10/17 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
Python实现SMTP邮件发送
2020/06/16 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
简述安装Slackware Linux系统的过程
2012/01/12 面试题
最新茶叶店创业计划书
2014/01/14 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
新春寄语大全
2014/04/09 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
青涩记忆观后感
2015/06/18 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server