Layui tree 下拉菜单树的实例代码


Posted in Javascript onSeptember 21, 2019

1.效果:

Layui tree 下拉菜单树的实例代码

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" rel="external nofollow" 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>

以上这篇Layui tree 下拉菜单树的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery数据显示插件整合实现代码
Oct 24 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
javascript动画算法实例分析
Jul 31 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
vuex进阶知识点巩固
May 20 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
浅谈js中的bind
Mar 18 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 #Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 #Javascript
layui table 表格模板按钮的实例代码
Sep 21 #Javascript
js实现图片3D轮播效果
Sep 21 #Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 #Javascript
原生js实现3D轮播图
Mar 21 #Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 #Javascript
You might like
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
js对象的复制继承实例
2015/01/10 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
快递业务员岗位职责
2014/01/06 职场文书
环境整治工作方案
2014/05/18 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python