layui 支持搜索的树形组件eleTree实现

电玩女神 2023-06-12 11:19 70阅读 0赞

没有废话直接上效果图，如果符合需求就往下看吧。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70][]

H5代码

<div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm"     id="getChecked" >勾选指定节点</button>
      </div>
    
       <input type="text" placeholder="请输入关键字进行搜索" autocomplete="off" class="layui-input eleTree-search" >
       <div class="eleTree ele6" lay-filter="data6" id="treeInfo"  ></div>

js代码

<script>
    
        layui.config({
            base: "/admin/lib/layui/lay/mymodules/"
        }).use(['eleTree' ], function(){
            var $ = layui.jquery;
            var eleTree = layui.eleTree;
    
            var data=[
                {
                    "id": 1,
                    "label": "dababase1",
                    spread: false,
                    "children": [
                        {
                            "id": 2,
                            "label": "table1",
                            //"disabled": true,
                            "children": [
                                {
                                    "id": 3,
                                    "label": "id"
                                },
                                {
                                    "id": 4,
                                    "label": "name"
                                    //"checked": true
                                }
                            ]
                        },
                        {
                            "id": 22,
                            "label": "table2",
                            "children": [
                                {
                                    "id": 23,
                                    "label": "sex"
                                },
                                {
                                    "id": 24,
                                    "label": "age",
                                    "checked": true
                                }
                            ]
                        }
                    ]
                },
                {
                    "id": 10,
                    "label": "dababase2",
                    "children": [
                        {
                            "id": 12,
                            "label": "table1",
                            "children": [
                                {
                                    "id": 13,
                                    "label": "status"
                                },
                                {
                                    "id": 14,
                                    "label": "id"
                                }
                            ]
                        }
                    ]
                }
            ];
    
            $(".eleTree-search").keydown(function(){
                el6.search($(this).val());
            });
            $(".eleTree-search").keyup(function(){
                el6.search($(this).val());
            });
    
            var el6=eleTree.render({
                elem: '#treeInfo',
                data: data,
                id: 'demoId1',
                showCheckbox: true,
                defaultExpandAll: true,
                defaultCheckedKeys: [23,24],
                searchNodeMethod: function(value,data) {
                    if (!value) return true;
                    return data.label.indexOf(value) !== -1;
                }
            });
    
            //获取指定的选中信息
            $("#getChecked").click(function(){
                var checkedData = el6.getChecked(false,true); //获取选中节点的数据
    
                layer.alert(JSON.stringify(checkedData), {shade:0});
                console.log(checkedData);
            });
    
    
        });
    
    
    </script>

引入文件

<link rel="stylesheet" href="/admin/lib/layui/css/eleTree.css">
    <script src="/admin/lib/layui/layui.js" charset="utf-8"></script>

layui的样式部分结构图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191112175747653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191112180314273.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关树形组件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>树...

ゝ一世哀愁。/ 2024年04月18日 22:27/ 0 赞/ 125 阅读

相关 LayUI—tree树形结构的使用

形结构在实际开发中很长用到，比如部门管理，权限菜单等。因为用树形结构来展示会显的很清晰明了。最近写了一个个人博客小项目中用到了LayUI的树形结构，之后写了一个小案例整理...

太过爱你忘了你带给我的痛/ 2024年04月17日 21:06/ 0 赞/ 151 阅读

相关 LayUI之树形权限菜单

目录 1什么是树形菜单 2树形菜单的作用 3树形菜单优缺点 4树形导航栏实体类 Treevo dao方法 PermissionAction 前台 --

痛定思痛。/ 2023年10月13日 15:58/ 0 赞/ 56 阅读

相关 layui 支持搜索的树形组件eleTree实现

没有废话直接上效果图，如果符合需求就往下看吧。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

电玩女神/ 2023年06月12日 11:19/ 0 赞/ 71 阅读

相关 React-native实现联系人列表分组组件（支持拼音搜索）

React-native实现联系人列表分组组件（支持拼音搜索）参考资料： React Native使用SectionList打造城市选择列表，包含分组的跳转：[

刺骨的言语ヽ痛彻心扉/ 2023年03月12日 12:24/ 0 赞/ 91 阅读

相关 layui 树形菜单展示

<div id="test1"></div> <script> layui.use('tree', function(){ var

ゝ一纸荒年。/ 2023年02月22日 07:52/ 0 赞/ 82 阅读

相关 layui 表单组件（form）支持手动触发校验

文章目录前言 webjar方式引入通过文件引入通过源码编译

我就是我/ 2023年02月20日 06:42/ 0 赞/ 119 阅读

相关 layui 树形组件（tree）支持双击事件

文章目录前言 webjar方式引入通过文件引入通过源码编译

逃离我推掉我的手/ 2023年02月18日 14:28/ 0 赞/ 78 阅读

相关 Layui树形表格

简介 treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致，支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。演示地址：[ht

客官°小女子只卖身不卖艺/ 2023年02月17日 03:11/ 0 赞/ 112 阅读

相关 layui实现带搜索功能的select

页面代码： <!DOCTYPE html> <html lang="en"> <head> <meta name="applica

骑猪看日落/ 2021年05月10日 11:33/ 0 赞/ 1278 阅读