bootstrap-Treeview实现级联勾选

 更新时间:2017年11月23日 09:02:04   作者:不怕孤单的123  
这篇文章主要为大家详细介绍了bootstrap-Treeview实现级联勾选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 
 }); 

效果图:

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

相关文章

  • JS动态修改图片的URL(src)的方法

    JS动态修改图片的URL(src)的方法

    这篇文章主要介绍了JS动态修改图片的URL(src)的方法,涉及javascript操作图片src属性的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 学习JavaScript设计模式之享元模式

    学习JavaScript设计模式之享元模式

    这篇文章主要为大家介绍了JavaScript设计模式中的享元模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 基于JavaScript开发一个有趣的分组抽签小程序

    基于JavaScript开发一个有趣的分组抽签小程序

    在团队合作开发中,经常需要将团队成员分组,来完成各自的任务,而抽签的方式自然是最公平、最简单的方法之一,所以本文就来开发一个有趣的分组抽签小程序吧
    2023-05-05
  • 鼠标移动到图片名上,显示图片的简单实例

    鼠标移动到图片名上,显示图片的简单实例

    鼠标移动到名(wait.gif)上,显示图片,鼠标移开则不显示图片
    2013-07-07
  • Javascript中的getter和setter初识

    Javascript中的getter和setter初识

    最近在工作中遇到了getter和setter,getter 是一种获得属性值的方法,setter是一种设置属性值的方法。下面这篇文章主要给大家介绍了关于Javascript中getter和setter的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • 国外大牛IE版本检测!现在IE都到9了,IE检测代码

    国外大牛IE版本检测!现在IE都到9了,IE检测代码

    有时会去看看国外大牛的一些代码,并学习,引用,并感叹大牛就是大牛,差距不是一点点,也在一点点的感叹中慢慢拉进和大牛的距离
    2012-01-01
  • 浅谈微信小程序之官方UI框架we-ui使用教程

    浅谈微信小程序之官方UI框架we-ui使用教程

    这篇文章主要介绍了浅谈微信小程序之官方UI框架we-ui使用教程,WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 微信小程序显示下拉列表功能【附源码下载】

    微信小程序显示下拉列表功能【附源码下载】

    这篇文章主要介绍了微信小程序显示下拉列表功能,涉及微信小程序navigator组件导航及页面加载相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • 如何利用Three.js实现web端显示点云数据

    如何利用Three.js实现web端显示点云数据

    这篇文章主要给大家介绍了关于如何利用Three.js实现web端显示点云数据的相关资料,最近在项目中遇到需求,需要在web端显示点云数据,将我的实现步骤介绍在这里供大家参考,需要的朋友可以参考下
    2023-11-11
  • 微信小程序仿RadioGroup改变样式的处理方案

    微信小程序仿RadioGroup改变样式的处理方案

    本文给大家分享一段简单的代码来实现微信小程序仿RadioGroup改变样式的方法,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07

最新评论