zTree实现页面数据筛选

实现效果：

页面：

                <div class="modal-body clearfix pt20 pb20" style="height:350px;">
                        <div style="position:absolute;right:8px;top:5px;cursor:pointer;" onclick="search();">
                            <i class="icon-search"></i><label id="txt">搜索</label>
                        </div>
                        <div id="search" class="form-search" style="padding:10px 0 0 13px;">
                            <label for="key" class="control-label" style="padding:5px 5px 3px 0;">关键字：</label>
                            <input type="text" class="empty" id="key" name="key" maxlength="50" style="width:110px;">
                            <button class="btn" id="btn" onclick="searchNode()">搜索</button>
                        </div>
                        <div id="provinceListDiv" class="ztree"></div>
                    </div>

class="ztree"很关键

JS：

var key,nodeList = [],lastValue ="",tree;
function addOrgUpOrg() {
    $("#select_province_modal").modal("show");
    // initOrgTree();

    var setting = {
        check: {
            enable: false
        },
        data: {
            key: {
                name: "orgFullName"
            },
            simpleData: {
                enable: true, idKey: "orgCode", pIdKey: "parentCode", rootPId: ''
            }
        },
        callback: {
            //点击后筛选出需要的组织机构
            onDblClick: selectOrgConfirm,
        }
    };

    var showData = [];
    var organization = {};
    $.ajax({
        url: WEB_ROOT + "/organization/listDataZTree",
        data: organization,
        async: true,
        type: "POST",
        dataType: "json",
        success: function (data) {
            if (data.success) {
                showData = data.treeViewVOList;
                tree = $.fn.zTree.init($("#provinceListDiv"), setting, showData);
                tree.expandAll(true);
                key = $("#key");
                key.bind("focus", focusKey).bind("blur", blurKey).bind("change cut input propertychange", searchNode);
                key.bind("keydown", function (e){if(e.which == 13){searchNode();}});
                // setTimeout("search();", "300");
            } else {
                WEB.msg.info("提示", "系统错误，请稍后再试！")
            }
        }
    });
}
//搜索节点
function searchNode() {
    // 取得输入的关键字的值
    var value = $.trim(key.get(0).value);

    // 按名字查询
    var keyType = "orgFullName";

    // 如果和上次一次，就退出不查了。
    if (lastValue === value) {
        return;
    }

    // 保存最后一次
    lastValue = value;

    var nodes = tree.getNodes();
    // 如果要查空字串，就退出不查了。
    if (value == "") {
        showAllNode(nodes);
        return;
    }
    hideAllNode(nodes);
    nodeList = tree.getNodesByParamFuzzy(keyType, value);
    updateNodes(nodeList);
}
//显示所有节点
function showAllNode(nodes){
    nodes = tree.transformToArray(nodes);
    for(var i=nodes.length-1; i>=0; i--) {
        if(nodes[i].getParentNode()!=null){
            tree.expandNode(nodes[i],false,false,false,false);
        }else{
            tree.expandNode(nodes[i],true,true,false,false);
        }
        tree.showNode(nodes[i]);
        showAllNode(nodes[i].children);
    }
}
//隐藏所有节点
function hideAllNode(nodes){
    nodes = tree.transformToArray(nodes);
    for(var i=nodes.length-1; i>=0; i--) {
        tree.hideNode(nodes[i]);
    }
}
// 开始搜索
function search() {
    $("#search").slideToggle(200);
    $("#txt").toggle();
    $("#key").focus();
}

function focusKey(e) {
    if (key.hasClass("empty")) {
        key.removeClass("empty");
    }
}
function blurKey(e) {
    if (key.get(0).value === "") {
        key.addClass("empty");
    }
    searchNode(e);
}
//更新节点状态
function updateNodes(nodeList) {
    tree.showNodes(nodeList);
    for(var i=0, l=nodeList.length; i<l; i++) {

        //展开当前节点的父节点
        tree.showNode(nodeList[i].getParentNode());
        //tree.expandNode(nodeList[i].getParentNode(), true, false, false);
        //显示展开符合条件节点的父节点
        while(nodeList[i].getParentNode()!=null){
            tree.expandNode(nodeList[i].getParentNode(), true, false, false);
            nodeList[i] = nodeList[i].getParentNode();
            tree.showNode(nodeList[i].getParentNode());
        }
        //显示根节点
        tree.showNode(nodeList[i].getParentNode());
        //展开根节点
        tree.expandNode(nodeList[i].getParentNode(), true, false, false);
    }
}

zTree的包版本比较多，推荐用这个：https://download.csdn.net/download/select_bin/10562934