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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
JQuery 网站换肤功能实现代码
Nov 02 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
微信小程序开发animation心跳动画效果
Aug 16 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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中实现简单的ACL 完结篇
2011/09/07 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
详解vue中使用微信jssdk
2019/04/19 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
python列表去重的二种方法
2014/02/14 Python
python类和继承用法实例
2015/07/07 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
Django中使用Celery的教程详解
2018/08/24 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
python字符串查找函数的用法详解
2019/07/08 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
高一军训决心书
2015/02/05 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL