zTree如何实现模糊查找实战

1.说明

最近在研究zTree树控件。过程中涉及到了实现模糊查找结点的功能,特此分享一下。

有关zTree的有关介绍和使用,请访问其官网:zTree -- jQuery 树插件

本文假设你已经比较熟悉了这个控件。

 

2.实现效果

 

3.代码

<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ztree模糊查询演示</title>
<head>
    <link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.excheck.min.js"></script>
    <style type="text/css">
        body {
            font-family: "微软雅黑", "宋体";
            font-size: 12px;
            line-height: 26px;
            color: #666;
            background-color: #fff;
            width: 600px;
            height: 600px;
        }
 
        div.content_wrap {
            width: 800px;
            height: 380px;
        }
 
        div.content_wrap div.left {
            float: left;
            width: 250px;
            height: 300px;
        }
 
        div.content_wrap div.right {
            float: right;
            width: 340px;
        }
 
        .scontent {
            height: 300px;
            overflow-y: scroll;
        }
 
        li {
            list-style: none;
        }
 
 
    </style>
 
    <script>
        var setting = {
            check:{
                enable: true,
                chkStyle: "checkbox", //勾选框类型(checkbox 或 radio)
                chkboxType: {"Y": "ps", "N": "ps"} //勾选 checkbox 对于父子节点的关联关系
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                //zTree节点的点击事件
                onCheck:onClick/*,
                onClick: onClick*/
 
            }
        };
        //Ztree的初始数据
        var zNodes = [
            {id: 1, pId: 0, name: "北京"},
            {id: 2, pId: 0, name: "天津"},
            {id: 3, pId: 0, name: "上海"},
            {id: 6, pId: 0, name: "重庆"},
            {id: 4, pId: 0, name: "河北省", open: true},
            {id: 41, pId: 4, name: "石家庄"},
            {id: 42, pId: 4, name: "保定"},
            {id: 43, pId: 4, name: "邯郸"},
            {id: 44, pId: 4, name: "承德"},
            {id: 5, pId: 0, name: "广东省", open: true},
            {id: 51, pId: 5, name: "广州"},
            {id: 52, pId: 5, name: "深圳"},
            {id: 53, pId: 5, name: "东莞"},
            {id: 54, pId: 5, name: "佛山"},
            {id: 7, pId: 0, name: "江苏", open: true},
            {id: 71, pId: 7, name: "南京", open: true},
            {id: 711, pId: 71, name: "鼓楼区"},
            {id: 712, pId: 71, name: "建邺区"},
            {id: 713, pId: 71, name: "栖霞区"},
            {id: 7131, pId: 713, name: "南大"},
            {id: 72, pId: 7, name: "苏州"}
        ];
 
 
        //点击某个节点 然后将该节点的名称赋值值文本框
        function onClick(e, treeId, treeNode) {
 
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            //获得选中的节点
            var nodes = zTree.getSelectedNodes(),
                    v = "", existFlg=false;
 
            if(nodes.length==0){
                nodes = zTree.getCheckedNodes(true);
                //先清空已选面板
                $(".scontent>ul").empty();
            }
 
            //根据id排序
            nodes.sort(function compare(a, b) {
                return a.id - b.id;
            });
            var selectedObj = $(".content_wrap>.right>.scontent>ul");
            for (var i = 0, l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
                //判断是否已在列表中
                $(".scontent>ul>li").each(function(){
                    if($(this).attr("data-id")==nodes[i].id){
                        existFlg = true;
                        return false;
                    }
                });
 
                if(!existFlg){
                    selectedObj.append("<li id=data-" + nodes[i].id + ">" + nodes[i].name + "<button class='remove' style='float: left;' onclick='removeNode("+nodes[i].id+")'>移除</button></li>");
                    //增加已选择数量
                    $("#scount").text($(".scontent>ul>li").length);
                }
 
 
            }
 
            //将选中节点的名称显示在文本框内
            if (v.length > 0) v = v.substring(0, v.length - 1);
            //var cityObj = $("#citySel");
            //cityObj.attr("value", v);
            //隐藏zTree
            //hideMenu();
            //return false;
 
 
        }
 
        //删除已选择元素同时取消选中状态
        function removeNode(nodeId){
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = zTree.getCheckedNodes(true);
            for(var i=0; i<nodes.length; i++){
                //alert(JSON.stringify(nodes[i]));
                if(nodes[i].id==nodeId){
                    $("#data-"+nodeId).remove();
                    zTree.checkNode(nodes[i], false);
                    zTree.refresh();
                    $("#scount").text($(".scontent>ul>li").length);
                    return false;
                }
            }
 
        }
 
        //显示树
        function showMenu() {
            var cityObj = $("#citySel");
            var cityOffset = $("#citySel").offset();
            $("#menuContent").css({
                left: cityOffset.left + "px"/*,
                 top: cityOffset.top + cityObj.outerHeight() + "px"*/
            }).slideDown("fast");
        }
 
        //隐藏树
        function hideMenu() {
            $("#menuContent").fadeOut("fast");
            $("body").unbind("mousedown");
        }
 
 
        //还原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 {
                //隐藏树
                //hideMenu();
                InitialZtree();
            }
        }
 
        function clearAll() {
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            treeObj.checkAllNodes(false);
            $(".content_wrap>.right>.scontent>ul").empty();
            $("#scount").text(0);
        }
 
        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            showMenu();
        });
 
    </script>
</head>
<body>
<div class="content_wrap">
    <div class="left">
        <ul class="list">
            <li class="title">  城市:<input id="citySel" type="text" placeholder="请输入关键字检索"
                                                    onkeyup="AutoMatch(this)"
                                                    style="width: 150px;"/>
            </li>
        </ul>
        <div id="menuContent" class="menuContent" style="position: relative;">
            <ul id="treeDemo" class="ztree">
            </ul>
        </div>
    </div>
 
    <div class="right">
        <div class="stitle">
            <h4>
                已选择:
                <span id="scount" style="color: red;">0</span>
            </h4>
        </div>
        <div class="scontent">
            <ul></ul>
        </div>
 
    </div>
 
</div>
<div class="button" style="float: right;">
    <input type="button" value="清空" onclick="clearAll()">
</div>
</body>
</html>

 

 

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
在Vue项目中使用zTree实现模糊搜索的步骤如下: 1. 创建一个Vue项目,可以使用vue-cli来快速搭建。 2. 引入zTree插件,可以通过npm安装或者直接下载js文件并引入到项目中。 3. 在Vue组件中使用zTree,并创建一个树形结构。 4. 在zTree的配置项中,添加一个回调函数来实现模糊搜索的功能。这个回调函数可以是官方提供的模糊搜索函数fuzzySearch的修改版,根据自己的需求进行相应的修改。 5. 在模糊搜索的回调函数中,可以通过遍历树的节点,使用正则表达式匹配搜索关键字并将匹配到的节点高亮显示。 6. 参考一些资料,如官方文档或者其他人的经验,来帮助理解和实现zTree模糊搜索功能。 以上是使用zTree实现模糊搜索的大致步骤,具体的代码实现和配置可能有所不同,可以根据自己的需求和实际情况进行相应的修改和调整。引用提供了一个具体的实现步骤和效果图,引用提供了zTree在Vue项目中使用的参考资料,引用提供了关于模糊搜索功能的一些修改方法的参考资料。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [在vue-cli项目中使用ztree,并实现ztree模糊搜索高亮](https://blog.csdn.net/weixin_44101052/article/details/90372593)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [实例详解ztree在vue项目中使用并且带有搜索功能](https://download.csdn.net/download/weixin_38610870/12953434)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue2.x + zTree,简单的二次封装(二) -- 添加模糊搜索功能](https://blog.csdn.net/mf_717714/article/details/126864127)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值