1：點擊全選可選中或取消選中全部節(jié)點，全部展開可展開或折疊所有節(jié)點

2：單個節(jié)點的選中或折疊等操作會影響全選和展開按鈕狀態(tài)

image

image.png

image.png

源碼：

setting = {
...
callback: {
    onCheck: zTreeOnCheck,
    onExpand: zTreeOnExpand,
    onCollapse: zTreeOnCollapse
}
...
}
$.fn.zTree.init($("#tree"), setting, treeNodes); 

var open = fold = true;
function zTreeOnExpand(event, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    var nodes = zTree.getNodes();
    //所有節(jié)點都是展開狀態(tài)
    open = isOpen(nodes,0);
    //有節(jié)點折疊
    if(open){
        $('#fold span').text('全部折疊');
        $('#fold img').attr('src','../../../image/fold.png');
        fold = true
    }
}
function zTreeOnCollapse(event, treeId, treeNode) {
    //所有節(jié)點都是折疊狀態(tài)
    var zTree = $.fn.zTree.getZTreeObj("tree");
    var nodes = zTree.getNodes();
    var val = isOpen(nodes,1);
    //有節(jié)點折疊
    if(!val){
        $('#fold span').text('全部展開');
        $('#fold img').attr('src','../../../image/open.png');
        fold = false
    }
    open = true;
}
function isOpen (nodes, type){
    for (var i = 0; i < nodes.length; i++){
        if(type){//折疊操作
            //只要有一個節(jié)點為折疊狀態(tài)，返回false
            if(open){
                if(nodes[i].children != undefined){
                    open = nodes[i].open;
                    if(!open){
                        return open
                    }else{
                        isOpen(nodes[i].children)//遍歷直節(jié)點
                    }
                }
            }else{
                return open
            }
        }else{
            if(open){
                return open
            }else{
                if(nodes[i].children != undefined){
                    open = nodes[i].open;
                    if(open){
                        return open
                    }else{
                        isOpen(nodes[i].children)
                    }
                }
            }
        }
    }
}
function zTreeOnCheck(event, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    var node = zTree.getNodes();
    var nodes = zTree.transformToArray(node).length;
    var checkNode = zTree.getCheckedNodes().length;
    if(nodes == checkNode){
        $('#all').prop('checked', true)
    }else{
        $('#all').prop('checked', false)
    }
}
$('#all').on('click',function (e) {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    var node = zTree.getNodes();
    var nodes = zTree.transformToArray(node);
    var checkNode = zTree.getCheckedNodes().length;
    //已選中的節(jié)點數(shù)小于總數(shù) - 全選
    if (checkNode < nodes.length) {
        $('#all').prop('checked', true)
        zTree.checkAllNodes(true);
    } else{
        zTree.checkAllNodes(false);
    }
})
$('#fold').on('click',function (e) {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    if (fold) {
        $('#fold span').text('全部展開');
        $('#fold img').attr('src','../../../image/open.png');
        zTree.expandAll(false);
        fold = false
    } else{
        $('#fold span').text('全部折疊');
        $('#fold img').attr('src','../../../image/fold.png');
        zTree.expandAll(true);
        fold = true
    }
})