zTree实现树形图模糊搜索

最新推荐文章于 2021-03-05 13:44:22 发布

陈大步

最新推荐文章于 2021-03-05 13:44:22 发布

阅读量350

点赞数

分类专栏： JQ 文章标签： JQ JS

本文链接：https://blog.csdn.net/dadada_youzi/article/details/102936176

版权

JQ 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

没有搜索

搜索“公司1”

<!DOCTYPE html>
<html>
<head>
    <TITLE> ZTREE DEMO - Simple Data</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <base href="${path}/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.min.css"/>
    <link rel="stylesheet" href="css/metroStyle/metroStyle.css" >
    <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.js"></script>

    <script type="text/javascript">

        var setting = {
            view: {
                showIcon: true,//设置 zTree 是否显示节点的图标。默认值：true
                showLine: false//设置 zTree 是否显示节点之间的连线。默认值：true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick
            }
        };

        /*zTree的初始化数据*/
        var zNodes =[
            { id:1, pId:0, name:"公司1"},
            { id:11, pId:1, name:"部门1"},
            { id:111, pId:11, name:"部门1-1"},
            { id:112, pId:11, name:"部门1-2"},
            { id:113, pId:11, name:"部门1-3"},
            { id:114, pId:11, name:"部门1-4"},
            { id:12, pId:1, name:"部门2"},
            { id:121, pId:12, name:"部门2-1"},
            { id:122, pId:12, name:"部门2-2"},
            { id:123, pId:12, name:"部门2-3"},
            { id:124, pId:12, name:"部门2-4"},
            { id:13, pId:1, name:"部门3"},
            { id:2, pId:0, name:"公司2"},
            { id:21, pId:2, name:"部门1"},
            { id:211, pId:21, name:"部门1-1"},
            { id:212, pId:21, name:"部门1-2"},
            { id:213, pId:21, name:"部门1-3"},
            { id:214, pId:21, name:"部门1-4"},
            { id:22, pId:2, name:"部门2"},
            { id:221, pId:22, name:"部门2-1"},
            { id:222, pId:22, name:"部门2-2"},
            { id:223, pId:22, name:"部门2-3"},
            { id:224, pId:22, name:"部门2-4"},
            { id:3, pId:0, name:"公司3"}
        ];

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            initEvent();
            hideMenu();
        });

        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            //获得选中的节点
            var nodes = zTree.getSelectedNodes(),
                    v = "";
            //根据id排序
            nodes.sort(function compare(a, b) { return a.id - b.id; });
            for (var i = 0, l = nodes.length; i < l; i++) {
                if(i!==0){
                    v +=","+nodes[i].name ;
                }
                v +=nodes[i].name;
            }
            //将选中节点的名称显示在文本框内
            var cityObj = $('#_topOfficeName').val(treeNode.name);
            cityObj.attr("value", v);
            //隐藏zTree
            hideMenu();
            return false;
        }

        function showMenu() {
            var cityObj = $('#_topOfficeName');
            var cityOffset = cityObj.offset();
            $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
            $("body").bind("mousedown", onBodyDown);
        }

        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }

        function onBodyDown(event) {
            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
                hideMenu();
            }
        }

        //还原zTree的初始数据
        function InitialZtree() {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        }

        ///根据文本框的关键词输入情况自动匹配树内节点,进行模糊查找
        function AutoMatch(txtObj) {
            if (txtObj.value.length > 0) {
                InitialZtree();
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
                //将找到的nodelist节点更新至Ztree内
                $.fn.zTree.init($("#treeDemo"), setting, nodeList);
                showMenu();
            } else {
                InitialZtree();
            }
        }

        function initEvent(){
            //鼠标获得焦点的时候，显示所有的树
            $("#_topOfficeName").focus(function(){
                showMenu();
            });
        }

    </script>

</head>

<body>

<div class="list form-group col-sm-5 form-horizontal">
    <label name="CompanyColon" class="i18n col-sm-4 control-label">公司名称:</label>
    <div class="title col-sm-7" style="width:160px">
        <input id="_topOfficeName" name="topOfficeName" type="text" value="" onkeyup="AutoMatch(this)" onclick="showMenu()"
               class="form-control dropdown-toggle i18n-input form-control" selectname="PleaseEnterCompany" selectattr="placeholder" autocomplete="off" />
    </div>
</div>

<div id="menuContent" class="menuContent" style="display: none;background: #f9f9f9; position: absolute;z-index: 10">
    <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 178px;">
    </ul>
</div>

</body>
</html>

陈大步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
zTree实现树形图模糊搜索

没有搜索搜索“公司1”<!DOCTYPE html><html><head> <TITLE> ZTREE DEMO - Simple Data</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"&g...
复制链接

扫一扫

专栏目录