bootstrap treeview 多级联动check/uncheck

最新推荐文章于 2025-11-29 06:30:00 发布

原创最新推荐文章于 2025-11-29 06:30:00 发布 · 893 阅读

0 ·

CC 4.0 BY-SA版权

Bootstrap3 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何使用Bootstrap Treeview插件实现多级联动的check/uncheck功能。通过引用完整版的CSS和JS文件，并初始化特定参数，可以实现自动联动。同时，文章还提到了一种手动级联的方法，涉及递归联动函数的使用，并提供了调用方法。

插件地址：https://github.com/patternfly/patternfly-bootstrap-treeview

自动联动
引用插件css、js（完全版，不能是min版）后，初始化如下参数：

$('#ftree').treeview({
	data:tdata,
	showCheckbox:true,
	hierarchicalCheck:true
})

手动级联
. 递归联动函数

//选中全部父节点
function checkAllParent(node,nodeIds){
    let parentNode = $('#ftree').treeview('getParent',node.nodeId);
    if(!("nodeId" in parentNode)){
        return nodeIds;
    }else {
        nodeIds.push(parentNode.nodeId);
        checkAllParent(parentNode,nodeIds);
    }
}
//取消全部父节点
function uncheckAllParent(node,nodeIds){
    let siblings = $('#ftree').treeview('getSiblings', node.nodeId);
    let parentNode = $('#ftree').treeview('getParent',node.nodeId);
    if(!("nodeId" in parentNode)) {
        return nodeIds;
    }

    let isAllUnchecked = true;  //是否全部没选中
    for(let i in siblings){
        if(siblings[i].state.checked){
            isAllUnchecked=false;
            break;
        }
    }
    if(isAllUnchecked){
        nodeIds.push(parentNode.nodeId);
    }
    uncheckAllParent(parentNode,nodeIds);
}
//级联选中所有子节点
function getAllSons(node,nodeIds){
    nodeIds.push(node.nodeId);
    if(node.nodes!=null&&node.nodes.length>0){
        for(let i in node.nodes){
            getAllSons(node.nodes[i],nodeIds);
        }
    }
}

调用方法

$('#ftree').on('nodeChecked',function (event,node) {
    let chekableNodeIds=[];
    checkAllParent(node,chekableNodeIds);
    getAllSons(node,chekableNodeIds);
    $('#ftree').treeview('checkNode',[chekableNodeIds,{silent:true}])
});

$('#ftree').on('nodeUnchecked',function (event,node) {
    let chekableNodeIds=[];
    uncheckAllParent(node,chekableNodeIds);
    getAllSons(node,chekableNodeIds);
    $('#ftree').treeview('uncheckNode',[chekableNodeIds,{silent:true}])
})