首页 > 编程 > JavaScript > 正文

bootstrap-Treeview实现级联勾选

2019-11-19 14:52:28
字体:
来源:转载
供稿:网友

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

效果图:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表