bootstrap-Treeview实现级联勾选


Posted in Javascript onNovember 23, 2017

本文实例为大家分享了bootstrap Treeview实现级联勾选的具体代码,供大家参考,具体内容如下

核心方法

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]); 
  } 
 } 
}

6-27 : 经部分网友反馈,图中的 if(!("id" in perentNode)) 需要改成 if(!("nodeId" in perentNode))才能正常运行,我想应该是版本问题,上面代码中已经改正了。如果运行不了,请改回 if(!("id" in perentNode))试一下。(谢谢大家提出)
因为treeview中silent属性指定了无效(我也不知道为什么委屈),所以多加了两个变量来控制

$('#searchTree').treeview({ 
  showCheckbox:true, 
  data:treeData, 
  onNodeChecked:nodeChecked , 
  onNodeUnchecked:nodeUnchecked 
 });

效果图:

bootstrap-Treeview实现级联勾选

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
Bootstrap表单布局
Jul 19 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
jQuery实现全选按钮
Jan 01 jQuery
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 #Javascript
sublime text配置node.js调试(图文教程)
Nov 23 #Javascript
Vue代码分割懒加载的实现方法
Nov 23 #Javascript
初探js和简单隐藏效果的实例
Nov 23 #Javascript
详解如何在angular2中获取节点
Nov 23 #Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 #Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 #Javascript
You might like
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
js实现常用排序算法
2016/08/09 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
小程序云开发实战小结
2018/10/25 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
Python函数参数操作详解
2018/08/03 Python
浅谈python常用程序算法
2019/03/22 Python
Python实现FTP文件传输的实例
2019/07/07 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
String和StringBuffer的区别
2015/08/13 面试题
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
运动会入场解说词
2014/02/07 职场文书
数学国培研修感言
2014/02/13 职场文书
2014年高考决心书
2014/03/11 职场文书
信用卡工资证明范本
2015/06/19 职场文书
Python内置的数据类型及使用方法
2022/04/13 Python