ztree 模糊搜索带复选框

zTree插件，带复选框，模糊查询，隐藏不符合的节点

对比图

    
    
    
    
    
    


    

        

            
            搜索
        
        

            

        
    

var nodeList;
$(function() {
    init();
})

function init() {
    var zNodes = [ //ztree 测试数据，也可以从数据库拉取
        {
            name: "根节点-000",
            open: true,
            children: [{
                name: "父节点-123-AB",
                open: true,
                children: [{
                        name: "叶子节点-A-1"
                    },
                    {
                        name: "叶子节点-A-2"
                    },
                    {
                        name: "叶子节点-B-1"
                    },
                    {
                        name: "叶子节点-B-2"
                    }
                ]
            }, {
                name: "父节点-2123-CD",
                open: true,
                children: [{
                        name: "叶子节点-C-1"
                    },
                    {
                        name: "叶子节点-C-2"
                    },
                    {
                        name: "叶子节点-D-1"
                    },
                    {
                        name: "叶子节点-D-2"
                    }
                ]
            }, {
                name: "父节点-123-AB",
                open: true,
                children: [{
                        name: "叶子节点-A-1"
                    },
                    {
                        name: "叶子节点-A-2"
                    },
                    {
                        name: "叶子节点-B-1"
                    },
                    {
                        name: "叶子节点-B-2"
                    }
                ]
            }, {
                name: "父节点-2123-CD",
                open: true,
                children: [{
                        name: "叶子节点-C-1"
                    },
                    {
                        name: "叶子节点-C-2"
                    },
                    {
                        name: "叶子节点-D-1"
                    },
                    {
                        name: "叶子节点-D-2"
                    }
                ]
            }]
        }
    ];
    var setting = { //ztree配置选项
        check: {
            enable: true
        },
        view: {
            dblClickExpand: false, //表示双击节点 切换 / 不切换 展开状态
            showLine: true,
            //                  selectedMulti: false,// 支持 / 不支持 同时选中多个节点
            nameIsHTML: true, //支持 / 不支持 HTML 脚本
            showIcon: false //没有小图标
        },
        data: {
            key: {
                name: "name",
                title: "name"
            }
        }
    };
    zTreeObj = $.fn.zTree.init($("#tree-obj"), setting, zNodes);
    $("#search-bt").click(filter);
};
//过滤ztree显示数据
function filter() {
    var allNode = zTreeObj.transformToArray(zTreeObj.getNodes());
    zTreeObj.hideNodes(allNode);

    function filterFunc(node) {
        var keywords = $("#keyword").val();
        if (node.name.indexOf(keywords) != -1) return true;
        return false;
    };
    var keywords = $("#keyword").val();
    if (keywords == "") {
        zTreeObj.showNodes(allNode);
        // zTreeObj.expandAll(false);
    } else {
        nodeList = zTreeObj.getNodesByFilter(filterFunc);
        for (var n in nodeList) {
            if (nodeList.hasOwnProperty(n)) {
                findParent(zTreeObj, nodeList[n]);
            }
        }
        zTreeObj.showNodes(nodeList);
    }
}

function findParent(treeObj, node) {
    treeObj.expandNode(node, true, false, false);
    var pNode = node.getParentNode();
    if (pNode != null) {
        nodeList.push(pNode);
        findParent(treeObj, pNode);
    }
};