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>
版权声明: 本文有 ```...裥簞點 发表于 bloghome博客
转载声明: 可自由转载、引用,但需要属名作者且注明文章出处。
文章链接: https://www.bloghome.com.cn/user/yysblog
Layui tree 下拉菜单树的更多相关文章
- layui select下拉菜单联动
做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示 <div class="layui-inline"> <label class=&q ...
- 使用PopupContainerEdit和PopupContainerControl制作下拉菜单树小记
转自:http://jlcon.iteye.com/blog/898210 首先拖动一个PopupContainerEdit控件和PopupContainerControl控件到界面上,在PopupC ...
- layui实现下拉分类多级
Layui tree 下拉菜单树 1.效果: 2.html 代码: <!DOCTYPE html> <html> <head> <meta charse ...
- layui编辑商品时,怎么使用下拉菜单显示商品默认分类的问题
//加载商品默认的分类$.get('/admin/category/selec/' + {$simple.0.first_pid},function(msg){ $("#two_cate&q ...
- zTree插件之多选下拉菜单代码
zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...
- js递归生成树形下拉菜单
需求:我需要把一个单表的数据转换成类似菜单那种如图所示:我呢需要把这个菜单树放入到下框里面去如图所示: 下面是实现思路:1.第一步1.1var afTypeJson=${afTypeJson}// 这 ...
- [deviceone开发]-多种样式下拉菜单demo
一.简介 该demo主要展示了3种下拉菜单. 一.仿QQ弹出菜单 主要实现原理是通过add一个ui,然后通过点击事件控制其visible属性来显示或者隐藏. 二.组合下拉菜单 主要用到的控件是do_A ...
- C# MVC LayUI实现下拉框二级联动
一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...
- THINKPHP_(5)_THINKPHP6接收ajax下拉菜单提交的数据,存在的bug
反思: 国产总是不尽人意,但是要支持国产. ThinkPHP的6接收ajax的post数据,存在一个bug.即ajax传递的json数据,在thinkphp后端解析出来后,并非直接的json格式. 描 ...
随机推荐
- mysql大全
1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...
- 背水一战 Windows 10 (63) - 控件(WebView): 基础知识, 加载 html, http, https, ms-appx-web:///, embedded resource, ms-appdata:///, ms-local-stream://
[源码下载] 背水一战 Windows 10 (63) - 控件(WebView): 基础知识, 加载 html, http, https, ms-appx-web:///, embedded res ...
- ssh命令-使用密钥文件进行登陆
在win上面可以使用XSHELL来登录类似于阿里云这样的安全服务器,在ubuntu上面就可以使用系统自带的命令工具来连接 使用命令 ssh -i key.pem [server] 实例如下: ssh ...
- Typescript 学习笔记四:回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- SGD vs Momentum vs NAG vs Adagrad vs Adadelta vs RMSprop vs Adam
梯度下降优化基本公式:\({\theta\leftarrow\theta-\eta\cdot\nabla_\theta{J(\theta)}}\) 三种梯度下降优化框架 这三种梯度下降优化框架的区别在 ...
- 批量插入bulkcopy
public static void InsertBatch<T>(IDbConnection conn, IEnumerable<T> entityList, string ...
- web自动化测试---概述
最早的时候是做功能测试,web都是自己手工点击看看有没问题,没有系统的进行测试,更别说自动化测试了,那是一段不堪回首的往事,就是因为这,很多问题都流出去了,这是作为测试人员的一大失职,痛定思痛,开始学 ...
- SQL 必知必会·笔记<1>了解SQL
1.1 基本概念 数据库(DataBase) 保存有组织的数据库的容器(通常是一个文件或一组文件). 表(Table) 某种特定数据类型的结构化清单. 模式(Schema) 关于数据库和表的布局及特性 ...
- 使用Sublime Text 2 和 MinGW 搭建C开发环境
使用工具 Sublime Text 2(Download) MinGW(Download)或者使用CygWin(Download)亦可 1.配置环境变量 下载和安装Sublime Text 2和Min ...
- Linux给命令设置别名
查看命令别名:alias alias 设置命令别名:alias 别名='命令' alias ll='ls -l' 取消命令别名:unalias 别名 unalias ll 命令永久生效 上面直接在sh ...