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 开发中规范性的一点感想
Jun 23 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
JS如何生成动态列表
Sep 22 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
PHP获取windows登录用户名的方法
2014/06/24 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
大学生自我鉴定
2013/12/16 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL