欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

zTree实现页面数据筛选

程序员文章站 2024-03-05 15:08:42
...

实现效果:

zTree实现页面数据筛选zTree实现页面数据筛选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

相关标签: js