Layui tree 下拉菜单树

 

1.效果:

2.html  代码:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>layui</title>

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

    <style type="text/css">

        .downpanel .layui-select-title span {

            line-height: 38px;

        }

        /*继承父类颜色*/

        .downpanel dl dd:hover {

            background-color: inherit;

        }

    </style>

    <style type="text/css">

        body {

            height: 100%;

            width: 100%;

            background-size: cover;

            margin: 0 auto;

        }

        td {

            font-size: 12px !important;

        }

        .layui-form-checkbox span {

            height: 30px;

        }

        .layui-field-title {

            border-top: 1px solid white;

        }

        table {

            width: 100% !important;

        }

    </style>

</head>

<body>

<form class="layui-form">

    <div class="layui-form-item">

        <label class="layui-form-label">文章栏目</label>

        <div class="layui-input-inline">

            <div class="layui-unselect layui-form-select downpanel">

                <div class="layui-select-title">

                    <span class="layui-input layui-unselect" id="treeclass">选择栏目</span>

                    <input type="hidden" name="selectID" value="0">

                    <i class="layui-edge"></i>

                </div>

                <dl class="layui-anim layui-anim-upbit">

                    <dd>

                        <ul id="classtree"></ul>

                    </dd>

                </dl>

            </div>

        </div>

    </div>

</form>

<script src="static/layui/layui.js" charset="utf-8"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script type="text/javascript">

    layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () {

        var $ = layui.jquery, tree = layui.tree;

        tree({

            elem: "#classtree"

            ,

            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}]

                }]

            }]

            ,

            click: function (node) {

                var $select = $($(this)[0].elem).parents(".layui-form-select");

                $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectID']").val(node.id);

            }

        });

        $(".downpanel").on("click", ".layui-select-title", function (e) {

            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");

            $(this).parents(".downpanel").toggleClass("layui-form-selected");

            layui.stope(e);

        }).on("click", "dl i", function (e) {

            layui.stope(e);

        });

        $(document).on("click", function (e) {

            $(".layui-form-select").removeClass("layui-form-selected");

        });

    });

</script>

</body>

</html>

</body>

</html>
 
 
 
注意: 1 vue和layui的form表单冲突,去除layuiform即可
2

layui实现下拉分类多级的更多相关文章

  1. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

  2. Web标准：八、下拉及多级弹出菜单

    Web标准:八.下拉及多级弹出菜单 知识点: 1.带下拉子菜单的导航菜单 2.绝对定位和浮动的区别和运用 3.CSS自适应宽度滑动门菜单   1)带下拉子菜单的导航菜单 带下拉子菜单的就是在一级导航下 ...

  3. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  4. C# MVC LayUI实现下拉框二级联动

    一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...

  5. zTree下拉菜单多级菜单多选实现

    惯例,先上图: 这是在一个项目中,为了满足样式美观.多级菜单以及多选而将zTree插件更改过后的效果. 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox ...

  6. layui select下拉菜单联动

    做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示 <div class="layui-inline"> <label class=&q ...

  7. LAYUI select 下拉框得高度

    页面下得select 框 在css页面加样式 .layui-form-select dl {    max-height: 152px;}

  8. Layui tree 下拉菜单树

    1.效果: 2.html  代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. Layui select下拉框改变之 change 监听事件（转）

    在layui中使用 jquery 触发select 的 change事件无效 使用layui.use监听select事件 <select lay-filter="demo" ...

随机推荐

  1. TensorFlow框架(4)之CNN卷积神经网络详解

    1. 卷积神经网络 1.1 多层前馈神经网络 多层前馈神经网络是指在多层的神经网络中,每层神经元与下一层神经元完全互连,神经元之间不存在同层连接,也不存在跨层连接的情况,如图 11所示. 图 11 对 ...

  2. 小米系列手机调试Installation failed with message Failed to establish session

    用Android studio 2.3调度程序时提示"Installation failed with message Failed to establish session"错误 ...

  3. BZOJ 3037 创世纪

    题解: 首先从基环树上的环上选两个点x,y 断开x,y之间的边,然后做树形DP. 设f[x]为选x的情况下的最大值,g[x]为不选x的情况下的最大值. 分两种情况讨论, 1.选x,则y一开始就处于被支 ...

  4. mini2440 uboot烧写uImage

    mini2440下烧写u-boot后,就可以用u-boot烧写linux内核了. 安装mkimage工具: apt-get install u-boot-tools 解压缩官方mini2440 lin ...

  5. nginx开发笔记_ngx_hash源码解析

    ngx_hash源码解析 ngx_hash是nginx中的hash表结构,具有以下特点: 静态结构,hash表创建后无法动态添加/删除KV. 采用连续存储方式解决碰撞问题.即出现碰撞的KV存放在连续地 ...

  6. Node初学者入门，一本全面的NodeJS教程

    作者: Manuel Kiessling  翻译: goddyzhao & GrayZhang & MondayChen 关于 本书致力于教会你如何用Node.js来开发应用,过程中会 ...

  7. poj1191棋盘分割——区间DP

    题目:http://poj.org/problem?id=1191 分析题意,可知每次要沿棋盘中的一条线把一块一分为二,取其中一块继续分割: σ最小经分析可知即为每块的xi和的平方最小: 故用区间DP ...

  8. 记一次keepalived脑裂问题查找

    在自己环境做keepalived+Redis实验时,当重启了备用redies机器后,发现两台redies主机都拿到了VIP [root@redis2 ~]# ip addr list 1: lo: & ...

  9. 常见的post提交数据类型

    原文地址:https://www.cnblogs.com/yoyoketang/p/6771696.html 常见的post提交数据类型有四种: 1.第一种:application/json:这是最常 ...

  10. Python中datetime的使用和常用时间处理

    datetime在python中比较常用,主要用来处理时间日期,使用前先倒入datetime模块.下面总结下本人想到的几个常用功能. 1.当前时间: >>> print dateti ...