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 相关文章推荐
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 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&MYSQL分页原理及实现
2007/01/02 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
短信提示使用 特效
2007/01/19 Javascript
js读取配置文件自写
2014/02/11 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
Javascript 之封装(Package)
2018/09/14 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
浅析Python基础-流程控制
2016/03/18 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
python调用支付宝支付接口流程
2019/08/15 Python
python能自学吗
2020/06/18 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
护理自荐信范文
2013/10/05 职场文书
2013年大学生的自我鉴定
2013/10/24 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
给交警的表扬信
2014/01/12 职场文书
校园环保建议书
2014/05/14 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书