layui tree支持搜索

本人用的layui 2.x ,该版本的tree是直接支持搜索的,只需要开启
showSearch: true,甚至可以不用写搜索框
代码如下:

<script>
  layui.use(['tree', 'layer'], function () {
    var layer = layui.layer
      , $ = layui.jquery
      , tree = layui.tree;

    tree({
      elem: '#demo1' //指定元素
      , target: '_blank' //是否新选项卡打开(比如节点返回href才有效)
	  , showSearch: true
      , nodes: [ //节点
        {
          name: '常用文件夹'
          , id: 1
          , alias: 'changyong'
          , children: [
            {
              name: '所有未读(设置跳转)'
              , id: 11
              , href: 'http://www.layui.com/'
              , alias: 'weidu'
            }, {
              name: '置顶邮件'
              , id: 12
            }, {
              name: '邮件标签邮件'
              , id: 13
            }
          ]
        }, {
          name: '我的邮箱'
          , id: 2
          , spread: true
          , children: [
            {
              name: 'QQ邮箱'
              , id: 21
              , spread: true
              , children: [
                {
                  name: '收件箱'
                  , id: 211
                  , children: [
                    {
                      name: '所有未读'
                      , id: 2111
                    }, {
                      name: '置顶邮件'
                      , id: 2112
                    }, {
                      name: '标签邮件'
                      , id: 2113
                    }
                  ]
                }, {
                  name: '已发出的邮件'
                  , id: 212
                }, {
                  name: '垃圾邮件'
                  , id: 213
                }
              ]
            }, {
              name: '阿里云邮'
              , id: 22
              , children: [
                {
                  name: '收件箱'
                  , id: 221
                }, {
                  name: '已发出的邮件'
                  , id: 222
                }, {
                  name: '垃圾邮件'
                  , id: 223
                }
              ]
            }
          ]
        }
        , {
          name: '收藏夹'
          , id: 3
          , alias: 'changyong'
          , children: [
            {
              name: '爱情动作片'
              , id: 31
              , alias: 'love'
            }, {
              name: '技术栈'
              , id: 12
              , children: [
                {
                  name: '前端'
                  , id: 121
                }
                , {
                  name: '全端'
                  , id: 122
                }
              ]
            }
          ]
        }
      ]
    });


  });
</script>

网页运行,会在树形菜单之上直接生成搜索框,完结。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宇龍_

若帮助到你,希望能给予鼓励!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值