bootstrap-Treeview实现级联勾选

来源：互联网发布：教师研修网络平台编辑：程序博客网时间：2024/05/03 10:26

核心方法

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    });

效果图：

3 0