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 相关文章推荐
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
关于JS中prototype的理解
Sep 07 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 Javascript
吃通javascript正则表达式
Apr 21 Javascript
HTML+JS实现在线朗读器
Feb 15 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
openflashchart 2.0 简单案例php版
2012/05/21 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
如何通过Python实现标签云算法
2019/07/02 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python中关于数据类型的学习笔记
2020/07/19 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
护理专业自荐信范文
2014/02/26 职场文书
化学专业自荐信
2014/05/28 职场文书
学雷锋宣传标语
2014/06/25 职场文书
2016教师国培研修感言
2015/12/08 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript