ztree模糊搜索

 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./static/libs/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="./static/libs/web-icons/web-icons.css">
<link rel="stylesheet" href="./static/libs/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="./static/libs/bootstrap-table-master/bootstrap-table.css">
<link rel="stylesheet" href="./static/libs/toastr/css/toastr.css">
<link rel="stylesheet" href="./static/css/common/base.css">
<link rel="stylesheet" href="./static/libs/bootstrap-validator/css/bootstrapValidator.css">
<link rel="stylesheet" href="./static/libs/ztree/css/metroStyle/metroStyle_adm.css" type="text/css">
<link rel="stylesheet" href="./static/libs/alertify.js-0.3.11/themes/alertify.core.css" type="text/css">
<link rel="stylesheet" href="./static/libs/alertify.js-0.3.11/themes/alertify.bootstrap.css" type="text/css">
<style>
.pull-left {
  padding-left: 10px;
}
.pull-right {
  padding-right: 10px;
}
#ztreeObj{
    height: 300px;
    overflow: auto;
    border: 1px solid #dddddd;
}

</style>
</head>

<body>
<a class="btn btn-default" style="text-decoration: none;" id="move-dept-button">移动</a>
<!-- https://www.cnblogs.com/bsc2012/p/9241739.html -->
<!-- // 移动部门  begin -->
<div class="modal fade" id="move-dept-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-create">
        <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title"> 移动部门 </h4>
                    </div>
                    <form id="move-dept-modal-form" method="post" class="form-horizontal" action="">
                    <div class="modal-body">        
                        <!-- // modal-body begin -->
                         
                               <div class="form-group">
                                <label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right">部门：</label>
                                <div class="col-lg-6 col-md-6 col-sm-6" style="position:relative;z-index:9999999; padding-left: 0;">
                                    <input class="form-control" id="keyword" type="text" value="" onkeyup="AutoMatch()"/>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-lg-3 col-md-3 col-sm-3 control-label font-normal align-right"></label>
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-left: 0;">
                                     <ul id="ztreeObj" class="ztree ztree-ul" style="height: 300px; margin-top: 0;"></ul>
                                </div>
                            </div>
                        
                        <!-- modal-body end // -->
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success"  id="move-dept-modal-submit" type="submit">
                            确 定
                        </button>
                        <button class="btn btn-default" type="button" data-dismiss="modal">
                            取 消
                        </button>
                    </div>
            </form>
        </div><!-- /Modal -->
    </div>
</div><!-- 移动部门  end // -->

<script src="./static/libs/jquery/jquery-1.11.2.min.js"></script>
<script src="./static/libs/bootstrap/js/bootstrap.js"></script>
<script src="./static/libs/bootstrap-table-master/bootstrap-table.js"></script>
<script src="./static/libs/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
<script src="./static/libs/toastr/js/toastr.min.js"></script>
<script src="./static/libs/bootstrap-validator/js/bootstrapValidator.js"></script>
<script src="./static/libs/ztree/js/jquery.ztree.core-3.5.js"></script>
<script src="./static/libs/ztree/js/jquery.ztree.exedit.js"></script>
<script src="./static/libs/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<script src="./static/libs/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="./static/libs/alertify.js-0.3.11/lib/alertify.min.js"></script>
<script src="./static/libs/My97DatePicker/WdatePicker.js"></script>
<script>
$("#move-dept-button").click(function(){
    $("#move-dept-modal").modal("show");
})

//ztree配置
var setting = {
        check : {
            enable : true,
            chkboxType : {
                "Y" : "ps",
                "N" : "ps"
            }
        },
        view : {
            dblClickExpand : false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
                beforeClick : function(treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("ztreeObj");
                    zTree.checkNode(treeNode, !treeNode.checked, null, true);
                    return true;
                },
                onCheck : function(e, treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("ztreeObj"),
                        nodes = zTree.getCheckedNodes(true), 
                        v = "";
                    for (var i = 0, l = nodes.length; i < l; i++) {
                        if (nodes[i].isParent) {
     
                        } else {
                            v += nodes[i].name + ",";//只获取最末端节点的值
                        }
                    }
                    if (v.length >= 0){
                        v = v.substring(0, v.length - 1);
                        $("#keyword").val(v).change();
                    }
                }
        }
};

/**
 * 查找子结点，如果找到，返回true，否则返回false
 */
function searchChildren(keyword, children){
    if(children == null || children.length == 0){
        return false;
    }
    for(var i = 0;i < children.length;i++){
        var node = children[i];
        if(node.name.indexOf(keyword)!=-1){
            return true;
        }
        //递归查找子结点
        var result = searchChildren(keyword,node.children);
        if(result){
            return true;
        }
    }
    return false;
}

/**
 * 查找当前结点和父结点，如果找到，返回ture，否则返回false
 */
function searchParent(keyword, node){
    if(node == null){
        return false;
    }
    if(node.name.indexOf(keyword)!=-1){
        return true;
    }
    //递归查找父结点
    return searchParent(keyword, node.getParentNode());
}

var hiddenNodes = [];

function AutoMatch(){
    var ztreeObj = $.fn.zTree.getZTreeObj("ztreeObj");
    //显示上次搜索后隐藏的结点
    ztreeObj.showNodes(hiddenNodes);
    //查找不符合条件的结点
    //返回true表示要过滤，需要隐藏，返回false表示不需要过滤，不需要隐藏
    function filterFunc(node){
        var keyword=$("#keyword").val();
    //如果当前结点，或者其父结点可以找到，或者当前结点的子结点可以找到，则该结点不隐藏
        if(searchParent(keyword,node) || searchChildren(keyword,node.children)){
            return false;
        }
        return true;
    };

    //获取不符合条件的叶子结点
    hiddenNodes=ztreeObj.getNodesByFilter(filterFunc);

    //隐藏不符合条件的叶子结点
    ztreeObj.hideNodes(hiddenNodes);
    
    var usersTreeObj = $.fn.zTree.getZTreeObj("ztreeObj");
    usersTreeObj.expandAll(true);
}

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: 'data/' + 'move-dept-modal-new-dept-tree' + '.json',
        data: {},
        dataType: "json",
        success: function(data){
            $.fn.zTree.init($("#ztreeObj"), setting, data);
        },
        error: function(data){
            alert("error");
        }
    });
});

</script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/samve/p/10793098.html