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>

版权声明： 本文有 ```...裥簞點 发表于 bloghome博客

转载声明： 可自由转载、引用，但需要属名作者且注明文章出处。

文章链接： https://www.bloghome.com.cn/user/yysblog

 

Layui tree 下拉菜单树的更多相关文章

  1. layui select下拉菜单联动

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

  2. 使用PopupContainerEdit和PopupContainerControl制作下拉菜单树小记

    转自:http://jlcon.iteye.com/blog/898210 首先拖动一个PopupContainerEdit控件和PopupContainerControl控件到界面上,在PopupC ...

  3. layui实现下拉分类多级

    Layui tree 下拉菜单树   1.效果: 2.html  代码: <!DOCTYPE html> <html> <head> <meta charse ...

  4. layui编辑商品时，怎么使用下拉菜单显示商品默认分类的问题

    //加载商品默认的分类$.get('/admin/category/selec/' + {$simple.0.first_pid},function(msg){ $("#two_cate&q ...

  5. zTree插件之多选下拉菜单代码

    zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...

  6. js递归生成树形下拉菜单

    需求:我需要把一个单表的数据转换成类似菜单那种如图所示:我呢需要把这个菜单树放入到下框里面去如图所示: 下面是实现思路:1.第一步1.1var afTypeJson=${afTypeJson}// 这 ...

  7. [deviceone开发]-多种样式下拉菜单demo

    一.简介 该demo主要展示了3种下拉菜单. 一.仿QQ弹出菜单 主要实现原理是通过add一个ui,然后通过点击事件控制其visible属性来显示或者隐藏. 二.组合下拉菜单 主要用到的控件是do_A ...

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

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

  9. THINKPHP_(5)_THINKPHP6接收ajax下拉菜单提交的数据，存在的bug

    反思: 国产总是不尽人意,但是要支持国产. ThinkPHP的6接收ajax的post数据,存在一个bug.即ajax传递的json数据,在thinkphp后端解析出来后,并非直接的json格式. 描 ...

随机推荐

  1. mac下安装安卓开发环境

    对于做ios的人来说,安装安卓开发环境,最好是在mac下安装了,我的mac是10.8.2,64位系统的 安卓开发环境需要下面几个东西: 1 jdk(mac下已经默认有了,可以在命令提示符下输入java ...

  2. Flask中的before_request after_request

    1.@app.before_request 在请求(request)之前做出响应 @app.before_request 也是一个装饰器,他所装饰的函数,都会在请求进入视图函数之前执行 2.@app. ...

  3. apache和tomcat的区别和联系

    两者既有联系又有区别,是两个软件,可独立使用,也可整合使用.Apache是web服务器(静态解析,如HTML),本身只支持html,Web服务器专门处理HTTP请求(request),可以通过插件支持 ...

  4. canvas与webgl坐标转换

    1 canvas的坐标系 坐标原点在左上角,横轴向右为X轴正方向,竖直向下为Y轴正方向 2 webgl的坐标系 坐标原点在绘图区域的中心点,横向右为X轴正方向,竖直向上为Y轴正方向,横纵坐标区域范围为 ...

  5. oracle无法启动asm实例记录

    首先查看asm进程ps aux|grep asmasm进程没起进行下面操作su - gridsrvctl start asmexit查看ora进程ps aux|grep oraora进程没起进行下面操 ...

  6. 使用git往gitee传数据时pull命令的使用

    按‘i’进入编辑模式------->写入内容------>按Esc键退出-------->在左下角的冒号后面输入‘wq’,表示退出并保存

  7. python计算数组中对象出现的次数并且按照字典输出

    解决的问题如题,如果对Python不是很熟悉,解决的办法可能如下: test_array=[1,2,3,1,2,3]; def count_object1(array): result_obj={} ...

  8. 高可用Hadoop平台－HBase集群搭建

    1.概述 今天补充一篇HBase集群的搭建,这个是高可用系列遗漏的一篇博客,今天抽时间补上,今天给大家介绍的主要内容目录如下所示: 基础软件的准备 HBase介绍 HBase集群搭建 单点问题验证 截 ...

  9. hdfs-03-hdfs客户端操作

    1, hdfs中两种连接方式 1), 网页 2), 客户端 文件的切块大小和存储的副本数量,都是由客户端决定! 所谓的由客户端决定,是通过配置参数来定的 hdfs的客户端会读以下两个参数,来决定切块大 ...

  10. ASP.NET Core 中的 ORM 之 Dapper

    目录 Dapper 简介 使用 Dapper 使用 Dapper Contrib 或其他扩展 引入工作单元 Unit of Work 源代码 参考 Dapper 简介 Dapper是.NET的一款轻量 ...