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实现购物车加减以及价格计算功能

    js实现购物车加减以及价格计算功能

    这篇文章主要为大家详细介绍了js实现购物车加减以及价格计算功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 悬浮数字的实现案例

    悬浮数字的实现案例

    本篇文章主要是对悬浮数字的实现案例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 文件上传插件SWFUpload的使用指南

    文件上传插件SWFUpload的使用指南

    本文主要介绍了文件上传插件SWFUpload使用指南,SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大。需要的朋友可以参考下
    2016-11-11
  • 微信小程序开发之自定义tabBar的实现

    微信小程序开发之自定义tabBar的实现

    这篇文章主要介绍了微信小程序开发之自定义tabBar的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 微信小程序实现左右列表联动

    微信小程序实现左右列表联动

    这篇文章主要为大家详细介绍了微信小程序实现左右列表联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02
  • JavaScript定时显示广告代码分享

    JavaScript定时显示广告代码分享

    这篇文章主要介绍了JavaScript定时显示广告代码分享,本文直接给出实现代码,需要的朋友可以参考下
    2015-03-03
  • JS对象是否拥有某属性如何判断

    JS对象是否拥有某属性如何判断

    这篇文章主要介绍了JS对象是否拥有某属性如何判断的相关资料,需要的朋友可以参考下
    2017-02-02
  • js实现限定区域范围拖拉拽效果

    js实现限定区域范围拖拉拽效果

    这篇文章主要为大家详细介绍了js实现限定区域范围拖拉拽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js根据日期判断星座的示例代码

    js根据日期判断星座的示例代码

    本篇文章主要是对js根据日期判断星座的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • javascript 树控件 比较好用

    javascript 树控件 比较好用

    构建树控件的比较理想的一种方法是用ul、li这种简单的标签组合来实现,但是你如果想实现复杂一点的比如要节点可编辑、可拖动、可更换风格等等我想ExtJS是最好的选择了。
    2009-06-06

最新评论