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 相关文章推荐
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
原生实现一个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的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP处理会话函数大总结
2015/08/05 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
python列表与元组详解实例
2013/11/01 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
监理员的岗位职责
2013/11/13 职场文书
有个性的自我评价范文
2013/11/15 职场文书
法人任命书范本
2014/06/04 职场文书
护士先进个人总结
2015/02/13 职场文书
聘任书范文大全
2015/09/21 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
python开发人人对战的五子棋小游戏
2022/05/02 Python
Django框架中表单的用法
2022/06/10 Python