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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
JS中Array数组学习总结
Jan 18 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
详解vue-router基本使用
2017/04/18 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
基于python plotly交互式图表大全
2019/12/07 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
Python实现微信表情包炸群功能
2021/01/28 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
IBatis持久层技术
2016/07/18 面试题
总经理助理工作职责
2014/02/06 职场文书
创意婚礼策划方案
2014/05/18 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis
Python序列化模块JSON与Pickle
2022/06/05 Python