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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
js实现有趣的倒计时效果
Jan 19 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
简单采集了yahoo的一些数据
2007/02/14 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
prototype 的说明 js类
2006/09/07 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
JSON格式化输出
2014/11/10 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
javascript常用的设计模式
2017/02/09 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
python 装饰器的使用示例
2020/10/10 Python
怎样有效的进行自我评价
2013/10/06 职场文书
个人生活学习自我评价范文
2013/11/26 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
签约仪式致辞
2015/07/30 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书