ztree使用总结之可搜索的下拉列表

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

1、前言

本次分享为大家介绍下，如何使用ztree实现可搜索的下拉框，这也是我之前做的一个功能。虽然说现在前后端分离很火，大部分新项目也是使用vue、react等做前端，然而我们还停留在layui，在旧版layui里并不支持可搜索的下拉框，于是想到了使用ztree来实现。

2、ztree介绍

ztree是一款国人你开源的jQuery实现的树插件，性能强大、配置灵活。支持JSON格式的数据，可以ajax异步加载数据，同时兼容IE。这点来说，非常适合一些老旧项目。并且它的文档很全面，对各种应用场景都有示例介绍。官方文档

3、引入ztree

<!--引入ztree的css文件-->
<link rel="stylesheet" th:href="@{/ztree/css/zTreeStyle/zTreeStyle.css}" type="text/css">
<!--引入ztree js，同时其依赖jQuery，fuzzysearch.js是支持可搜索查找的组件-->
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.exhide.js}"></script>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/ztree/demo/js/fuzzysearch.js}"></script>

4、实现代码

//因为使用了layui，涉及到一些layui组件，所以相关的JS代码必须写在layui下
layui.config({
        base: '../lib/layui/lay/modules/' //静态资源所在路径
    }).use(['laydate', 'table', 'layer','tree','inputTag'], function(){
      //ztree的配置信息
      let setting = {
          check: {
              enable: true,//是否开启checkbox
              chkboxType:  { "Y" : "ps", "N" : "ps" }
          },
          view: {
              nameIsHTML: true, //允许name支持html
              selectedMulti: false,
              showIcon: false  --展示icon
          },
          edit: {
              enable: false, //节点是否可编辑
              editNameSelectAll: false
          },
          data: {
              key: {
                  name: "tag_name"  //自定义节点的key值
              },
              simpleData: {
                  enable: true,
                  pIdKey: "parentId", //自定义父节点的key值
              }
          }
      };
      //初始化ztree，需要传入dom对象、配置信息、节点数据
      let zTreeObj = $.fn.zTree.init($("#custom_tag"), setting, customTags);
      //初始化模糊搜索方法，需要指定ztree对象的id、搜索框的dom对象、关键词是否高亮、节点是否展开
      fuzzySearch('custom_tag', '#custom_tag_search', false, true); 


  }
)

最后实现效果如下，在搜索框内输入关键词，下面的节点就会实时展示搜索结果。

好了、本期就先介绍到这里，有什么需要交流的，大家可以随时私信我。😊