bootstrap treeview 树形菜单带复选框及级联选择功能


Posted in Javascript onJune 08, 2018

具体代码如下所示:

<div id="searchTree"></div> 
 <script>
  var treeData = [{
   text: "Parent 1",
   nodes: [{
    text: "Child 1",
    nodes: [{
     text: "Grandchild 1"
    }, {
     text: "Grandchild 2",
     nodes: [{
      text: "Grandchild 2-1",
      nodes: [{
       text: "Grandchild 2-1-1"
      }, {
       text: "Grandchild 2-2-1",
      }]
     }, {
      text: "Grandchild 1-2",
     }]
    }]
   }, {
    text: "Child 2",
    nodes: [{
     text: "Grandchild 2-1"
    }, {
     text: "Grandchild 2-2",
    }]
   }]
  }, {
   text: "Parent 2",
   id:'11111'
  }, {
   text: "Parent 3"
  }, {
   text: "Parent 4"
  }, {
   text: "Parent 5"
  }];
  var nodeCheckedSilent = false;
  function nodeChecked(event, node) {
   if (nodeCheckedSilent) {
    return;
   }
   nodeCheckedSilent = true;
   checkAllParent(node);
   checkAllSon(node);
   nodeCheckedSilent = false;
  }
  var nodeUncheckedSilent = false;
  function nodeUnchecked(event, node) {
   if (nodeUncheckedSilent)
    return;
   nodeUncheckedSilent = true;
   uncheckAllParent(node);
   uncheckAllSon(node);
   nodeUncheckedSilent = false;
  }
  //选中全部父节点 
  function checkAllParent(node) {
   $('#searchTree').treeview('checkNode', node.nodeId, {
    silent: true
   });
   var parentNode = $('#searchTree').treeview('getParent', node.nodeId);
   if (!("nodeId" in parentNode)) {
    return;
   } else {
    checkAllParent(parentNode);
   }
  }
  //取消全部父节点 
  function uncheckAllParent(node) {
   $('#searchTree').treeview('uncheckNode', node.nodeId, {
    silent: true
   });
   var siblings = $('#searchTree').treeview('getSiblings', node.nodeId);
   var parentNode = $('#searchTree').treeview('getParent', node.nodeId);
   if (!("nodeId" in parentNode)) {
    return;
   }
   var isAllUnchecked = true; //是否全部没选中 
   for (var i in siblings) {
    if (siblings[i].state.checked) {
     isAllUnchecked = false;
     break;
    }
   }
   if (isAllUnchecked) {
    uncheckAllParent(parentNode);
   }
  }
  //级联选中所有子节点 
  function checkAllSon(node) {
   $('#searchTree').treeview('checkNode', node.nodeId, {
    silent: true
   });
   if (node.nodes != null && node.nodes.length > 0) {
    for (var i in node.nodes) {
     checkAllSon(node.nodes[i]);
    }
   }
  }
  //级联取消所有子节点 
  function uncheckAllSon(node) {
   $('#searchTree').treeview('uncheckNode', node.nodeId, {
    silent: true
   });
   if (node.nodes != null && node.nodes.length > 0) {
    for (var i in node.nodes) {
     uncheckAllSon(node.nodes[i]);
    }
   }
  }
  $('#searchTree').treeview({
   showCheckbox: true,
   data: treeData,
   onNodeChecked: nodeChecked,
   onNodeUnchecked: nodeUnchecked
  });
  </script>

总结

以上所述是小编给大家介绍的bootstrap treeview 树形菜单带复选框及级联选择功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
vue视频播放暂停代码
Nov 08 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
原生实现一个react-redux的代码示例
Jun 08 #Javascript
vue项目中使用百度地图的方法
Jun 08 #Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 #Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 #Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 #Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 #Javascript
You might like
收集的DedeCMS一些使用经验
2007/03/17 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
js和as的稳定传值问题解决
2013/07/14 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
查看django版本的方法分享
2018/05/14 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
python操作gitlab API过程解析
2019/12/27 Python
Python tkinter三种布局实例详解
2020/01/06 Python
python__new__内置静态方法使用解析
2020/01/07 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
《花木兰》教学反思
2014/04/09 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers