Layui全部笔记及相关代码

最新推荐文章于 2023-07-11 11:27:55 发布
最新推荐文章于 2023-07-11 11:27:55 发布
阅读量1.7k 收藏 8
点赞数
分类专栏： 前端 文章标签： layui jquery html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45429856/article/details/120689307
版权

一、 概述

1. 下载

https://www.layui.com/

2. 下载文件说明

在这里插入图片描述

css 样式
font:字体
image:图片
lay:
models
在这里插入图片描述

layui.all.js 包含了所有模块的js
layui.js 框架 如果要使用必须使用layui.use([“table”,“layer”,“laydate”,“form”],function(){})

二、 学习的内容

  1. 图标

  2. 按钮

  3. 导航菜单

  4. 选项卡

  5. 进度条

  6. 面板+布局

  7. 徽章

  8. 时间线

  9. 动画

  10. 颜色选择器

  11. 滑块

  12. 评分

  13. 轮播

  14. 代码修饰器

  15. 时间和日期选择器

  16. 表单元素
    输入框
    密码框
    下拉列表

  17. 表单对象form

  18. 弹出层【重点】

  19. 数据表格【重点】

  20. 数据表格+弹出层的综合案例【重点】

  21. 文件上传

  22. 树形组件dtree

三、 使用方法

创建项目并引入layui
在这里插入图片描述
在这里插入图片描述

四、 图标

方法1 使用字符实体

 
&

在这里插入图片描述

相关样式
layui-icon 代表使用layui的图标处理样式去渲染

方法2 使用样式
在这里插入图片描述

相关图标样式可以去
https://www.layui.com/doc/element/icon.html

五、 按钮

相关样式
1，必要样式 layui-btn
2，主题样式
|-- layui-btn-primary 原始按钮
|-- layui-btn-normal 百搭按钮
|-- layui-btn-warm 暖色
|-- layui-btn-danger 警告
|-- layui-btn-disabled 禁用

3，大小样式
	|-- layui-btn-lg  大型 按钮
	|-- layui-btn-sm 小型按钮
	|-- layui-btn-xs 微型按钮
4，图标结合

在这里插入图片描述
在这里插入图片描述

5，圆角样式
	layui-btn-radius
 

6，按钮组
layui-btn-group

在这里插入图片描述

事件监听
和jquery的用法一样
在这里插入图片描述

六、 导航菜单

相关样式
方向：水平 默认的
垂直 layui-nav-tree

其它样式
  |--layui-nav  代表这个是导航菜单
  	|-- layui-nav-item  代表这个导航菜单的一样子项
			|-- layui-nav-child  子项目的子项目
			
	|-- layui-this  当前选中的菜单项

七、 选项卡

  1. 风格说明
    默认风格 只用加layui-tab
    简洁风格 layui-tab-brief
    卡片风格 layui-tab-card
    在这里插入图片描述

  2. 相关样式
    |–layui-tab 代表一个选项卡
    |–layui-tab-title代表卡片的头
    |-- layui-this 启动选中
    |-- layui-tab-content 代表卡片的内容包装体
    |-- layui-tab-item 具体的卡片内容
    |-- layui-show 启动显示

  3. 相关属性
    在这里插入图片描述

lay-allowclose是否启动关闭按钮
在这里插入图片描述

lay-filter=“demo” layui使用的可以找到元素的属性

  1. 相关代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选项卡</title>
  <link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
             
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>默认风格的Tab</legend>
</fieldset>
 
<div class="layui-tab" id="demo" lay-filter="demo"  lay-allowclose="true">
  <ul class="layui-tab-title" >
    <li lay-id="1" class="mydemo">网站设置</li>
    <li lay-id="2" class="mydemo">用户管理</li>
    <li lay-id="3" class="layui-this mydemo">权限分配</li>
    <li lay-id="4" class="mydemo">商品管理</li>
    <li lay-id="5" class="mydemo">订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item ">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item layui-show" >内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>
<div class="layui-btn-group">
    <button type="button" class="layui-btn" id="add">添加一个Tab</button>
    <button type="button" class="layui-btn " id="change">切换用户管理</button>
    <button type="button" class="layui-btn" id="delete">删除商品管理</button>
    <button type="button" class="layui-btn" id="deleteAll">删除所有tab</button>
  </div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>简单风格的Tab</legend>
</fieldset>
 
<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>卡片风格的Tab</legend>
</fieldset>
 
<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>


<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
 	layui.use(['element','jquery'],function(){
		var $=layui.jquery;
		var element=layui.element;
		
		$("#add").click(function(){
			element.tabAdd('demo', {
				  title: '选项卡的标题'
				  ,content: '选项卡的内容' //支持传入html
				});    
		})
		$("#change").click(function(){
			element.tabChange('demo', '2');
		})
		$("#delete").click(function(){
			element.tabDelete("demo", "4");	
		})
		$("#deleteAll").click(function(){
			var lis=$(".mydemo");
			$.each(lis,function(index,item){
				var layid=item.getAttribute("lay-id");
				//alert(layid);
				element.tabDelete("demo", layid);	
			});
		})
	});
</script>
</body>
</html>

八、 进度条

在这里插入图片描述

相关样式

layui-progress 代表一个进度条
layui-progress-bar 代表进度条里面的进度
layui-progress-big 变粗了

相关属性
在这里插入图片描述

lay-percent 代表进度值
lay-showpercent=“true” 是否显示进度值

在这里插入图片描述

九、 面板

在这里插入图片描述

  1. 卡片面板
    相关样式
    layui-row 代表一行
    layui-col-space15 space0-space30 代表卡片之间的间距
    layui-col-md6 代表一列 md1-md12 代表当前卡片占整行的X/12
    layui-card 代表一个卡片
    layui-card-header 代表卡片头信息
    layui-card-body 代表卡片内容样式

  2. 普通折叠面板
    在这里插入图片描述

相关样式
layui-collapse 代表一个折叠面板
layui-colla-item 代表一个折叠项
layui-colla-title 代表折叠项的显示标题
layui-colla-content 代表折叠项展开的内容
layui-show 是否展开
相关事件
https://www.layui.com/doc/modules/element.html#collapse
在这里插入图片描述

  1. 手风琴面板
    在普通面板上加lay-accordion=""

十、 布局

相关样式
layui-row
layui-col-xs6 移动设备占比
layui-col-sm6 平板设备占比
layui-col-md6 桌面设置占比
在这里插入图片描述

十一、 徽章

相关样式
layui-badge-dot 小圆点
layui-badge 弧形徽章
layui-badge-rim 边框徽章
在这里插入图片描述

组合使用
在这里插入图片描述
在这里插入图片描述

十二、 时间线

常规时间线
在这里插入图片描述
相关样式
layui-timeline 代表一个时间线
layui-timeline-item 代表一个时间节点
layui-timeline-axis 代表左边的竖线
layui-timeline-content 时间线的内容
layui-text 代表文本
layui-timeline-title 代表标题
简约时间线
在这里插入图片描述
就是没有区分标题和内容

十三、 动画

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动画</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
<link rel="stylesheet" href="resources/layui/css/global.css">
<style>
.site-doc-icon li{width: 222px;}
.site-doc-icon li .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
</style>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>动画过程演示</legend>
	</fieldset>

	<ul class="site-doc-icon site-doc-anim">
		<li>
			<div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
			<div class="code">layui-anim-up</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
			<div class="code">layui-anim-upbit</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
			<div class="code">layui-anim-scale</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
			<div class="code">layui-anim-scaleSpring</div>
		</li>
	</ul>
	<ul class="site-doc-icon site-doc-anim">
		<li>
			<div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
			<div class="code">layui-anim-fadein</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
			<div class="code">layui-anim-fadeout</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
			<div class="code">layui-anim-rotate</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
			<div class="code">追加：layui-anim-loop</div>
		</li>
	</ul>
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'element', 'jquery' ], function() {
			var $ = layui.jquery;
			var element = layui.element;
			
			//演示动画
			  $('.site-doc-icon .layui-anim').on('click', function(){
			    var othis = $(this), anim = othis.data('anim');
			 
			    //停止循环
			    if(othis.hasClass('layui-anim-loop')){
			      return othis.removeClass(anim);
			    }
			    
			    othis.removeClass(anim);
			    
			    setTimeout(function(){
			      othis.addClass(anim);
			    });
			    //恢复渐隐
			    if(anim === 'layui-anim-fadeout'){
			      setTimeout(function(){
			        othis.removeClass(anim);
			      }, 1300);
			    }
			  });
		});
	</script>
</body>
</html>

相关样式
class=“layui-anim”
相关属性
data-anim=“layui-anim-up” 动画的类型

十四、 颜色选择器

在这里插入图片描述

相关代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>颜色拾取器</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>常规使用</legend>
	</fieldset>

	<div style="margin-left: 30px;">
		<div id="test1"></div>
		<div id="test2" style="margin-left: 30px;"></div>
	</div>

	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>表单赋值</legend>
	</fieldset>

	<div style="margin-left: 30px;">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" value="" placeholder="请选择颜色" class="layui-input"
						id="test-form-input">
				</div>
				<div class="layui-inline" style="left: -11px;">
					<div id="test-form"></div>
				</div>
			</div>
		</form>
	</div>
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'element', 'jquery', 'colorpicker', 'layer' ], function() {
			var $ = layui.jquery;
			var element = layui.element;
			var colorpicker = layui.colorpicker;
			var layer = layui.layer;
			//常规使用
			colorpicker.render({
				elem : '#test1' //绑定元素
				,
				change : function(color) { //颜色改变的回调
					layer.tips('选择了：' + color, this.elem, {
						tips : 1
					});
				}
			});
			//初始色值
			colorpicker.render({
				elem : '#test2',
				color : '#2ec770' //设置默认色
				,
				done : function(color) {
					layer.tips('选择了：' + color, this.elem);
				}
			});
			//表单赋值
			  colorpicker.render({
			    elem: '#test-form'
			    ,color: '#1c97f5'
			    ,done: function(color){
			      $('#test-form-input').val(color);
			    }
			  });

		});
	</script>
</body>
</html>

原理，页面声明元素再使用js去渲染

十五、 滑块

在这里插入图片描述

相关属性
elem ：绑定页面元素
value 设置初始值
min 最小值
max 最大值
step 设置步长
setTips 滑动时是否显示tips文本
change 监听改变事件

十六、 评分

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>评分</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
<style type="text/css">
	.demo-slider{
		margin-top: 20px;
	}
</style>
</head>
<body style="padding: 20px">
          
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>基础效果</legend>
</fieldset>
 
<div id="test1"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>显示文字</legend>
</fieldset>
 
<div id="test2"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>半星效果</legend>
</fieldset>
 
<div id="test3"></div>
<div><div id="test4"></div></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>自定义内容</legend>
</fieldset>
 
<div id="test5"></div>
<div><div id="test6"></div></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>自定义长度</legend>
</fieldset>
 
<div id="test7"></div>
<div><div id="test8"></div></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>只读</legend>
</fieldset>
  
<div id="test9"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>自定义主题色</legend>
</fieldset>
 
<ul>
  <li><div id="test10"></div></li>
  <li><div id="test11"></div></li>
  <li><div id="test12"></div></li>
  <li><div id="test13"></div></li>
  <li><div id="test14"></div></li>
</ul>
           
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'element', 'jquery', 'colorpicker', 'layer','slider','rate' ], function() {
			var $ = layui.jquery;
			var element = layui.element;
			var colorpicker = layui.colorpicker;
			var layer = layui.layer;
			var slider=layui.slider;
			var rate=layui.rate;
			
			 //基础效果
			  rate.render({
			    elem: '#test1'
			  })
			 
			  //显示文字
			  rate.render({
			    elem: '#test2'
			    ,value: 2 //初始值
			    ,text: true //开启文本
			  });
			 
			  //半星效果
			  rate.render({
			    elem: '#test3'
			    ,value: 2.5 //初始值
			    ,half: true //开启半星
			  })
			  rate.render({
			    elem: '#test4'
			    ,value: 3.5
			    ,half: true
			    ,text: true
			  })
			 
			  //自定义文本
			  rate.render({
			    elem: '#test5'
			    ,value: 3
			    ,text: true
			    ,setText: function(value){ //自定义文本的回调
			      var arrs = {
			        '1': '极差'
			        ,'2': '差'
			        ,'3': '中等'
			        ,'4': '好'
			        ,'5': '极好'
			      };
			      this.span.text(arrs[value] || ( value + "星"));
			    }
			  })
			  rate.render({
			    elem: '#test6'
			    ,value: 1.5
			    ,half: true
			    ,text: true
			    ,setText: function(value){
			      this.span.text(value);
			    }
			  })
			 
			  //自定义长度
			  rate.render({
			    elem: '#test7'
			    ,length: 3
			  });
			  rate.render({
			    elem: '#test8'
			    ,length: 10
			    ,value: 8 //初始值
			  });
			 
			  //只读
			  rate.render({
			    elem: '#test9'
			    ,value: 4
			    ,readonly: true
			  });
			 
			  //主题色
			  rate.render({
			    elem: '#test10'
			    ,value: 3
			    ,theme: '#FF8000' //自定义主题色
			  });
			  rate.render({
			    elem: '#test11'
			    ,value: 3
			    ,theme: '#009688'
			  });
			 
			  rate.render({
			    elem: '#test12'
			    ,value: 2.5
			    ,half: true
			    ,theme: '#1E9FFF'
			  })
			  rate.render({
			    elem: '#test13'
			    ,value: 2.5
			    ,half: true
			    ,theme: '#2F4056'
			  });
			  rate.render({
			    elem: '#test14'
			    ,value: 2.5
			    ,half: true
			    ,theme: '#FF0000'  
			  })
			  
			  /**
			  RGB  ===RAD GREEN BLUE
			  	#F00    16*16*16==?
			  	#00FF00   255*255*255
			  	#FFFF0000   前两位代表透明度
			  */
		
		});
	</script>
</body>
</html>

十七、 轮播

在这里插入图片描述
相关代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>轮播</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">

</head>
<body style="padding: 20px">
   <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>填充轮播元素 - 以图片为例</legend>
</fieldset>    
 
<div class="layui-carousel" id="test10">
  <div carousel-item="">
    <div><img src="resources/images/img1.jpg"></div>
    <div><img src="resources/images/img3.jpg"></div>
    <div><img src="resources/images/img4.jpg"></div>
    <div><img src="resources/images/img5.jpg"></div>
    <div><img src="resources/images/img6.jpg"></div>
    <div><img src="resources/images/img7.jpg"></div>
  </div>
</div>
           
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'element', 'jquery', 'carousel' ], function() {
			var $ = layui.jquery;
			var element = layui.element;
			var carousel=layui.carousel;
			//图片轮播
			  carousel.render({
			    elem: '#test10'
			    ,width: '200px'
			    ,height: '440px'
			    ,interval: 5000
			  });
		});
	</script>
</body>
</html>

十八、 代码修饰器

在这里插入图片描述

使用方法

使用<pre class="layui-code">放代码</pre>

引入code模块
调用layui.code({属性名:属性值})

相关属性
在这里插入图片描述

十九、 时间和日期选择器

相关属性

  1. elem:绑定的页面input标签的id

  2. type:指定选择器的类型
    |–年year
    |–年月month
    |–年月日date 默认的
    |–时间 time
    |–年月日时间 datetime

  3. format 格式化时间
    在这里插入图片描述

  4. value :设置初始值
          value:'2019-11-11’指定死的
          value:new Date() 指定当前时间

  5. min/max 设置最大时间和最小时间
    在这里插入图片描述

  6. trigger 触发弹出事件类型
          默认为得到焦点 tirgger: ‘focus’
          可以设置成点击事件 tirgger:‘click’

  7. show:设置是否在页面加载时选择器就弹出来 默认为false

  8. showBottom 是否显示底部栏

  9. btns - 工具按钮
          类型：Array，默认值：[‘clear’, ‘now’, ‘confirm’]
          右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm

  10. lang - 语言
          默认为cn 可以以设置en 英文

  11. theme - 主题
          default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）

  12. calendar - 是否显示公历节日
          Boolean，默认值：false
          mark - 标注重要日子
    在这里插入图片描述
    控件初始打开的回调

在这里插入图片描述

日期时间被切换后的回调

在这里插入图片描述

控件选择完毕后的回调、

在这里插入图片描述

相关代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>时间和日期选择器</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">

</head>
<body style="padding: 20px">
	<div class="layui-form">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">中文版</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test1"
						placeholder="yyyy-MM-dd">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">国际版</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test2"
						placeholder="yyyy年MM月dd日HH时mm分ss秒">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">初始值</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test3"
						placeholder="yyyy-MM-dd">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">其它</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test4"
						placeholder="yyyy-MM-dd">
				</div>
			</div>
		</div>
	</div>
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'element', 'jquery','laydate' ], function() {
			var $ = layui.jquery;
			var element = layui.element;
			var laydate=layui.laydate;
			laydate.render({
			    elem: '#test1' //指定元素
			    ,type:'date'
			    ,range:"~"
			  });
			
			laydate.render({
			    elem: '#test2' //指定元素
			    ,type:'datetime'
			    ,format:'yyyy年MM月dd日 HH时mm分ss秒'
			  });
			
			laydate.render({
			    elem: '#test3' //指定元素
			    //,value:'2019-11-11'  指定具体的时间
			    ,value:new Date()   //指定当前系统时间
			    /* ,min:'2019-01-01'
			    ,max:'2025-12-31' */
			   /*  ,min: -7
			    ,max: 7 */
			    ,type: 'time'
				  ,min: '09:30:00'
				  ,max: '17:30:00'
				  ,trigger:'click'
			  });
			
			laydate.render({
			    elem: '#test4' //指定元素
			    ,show:true
			    ,btns :['confirm']
				,lang: 'cn'
				,calendar :true,
				mark :{
					'0-0-15':'工资',
					'0-9-1':'开学'
				}
			  });
			
		});
	</script>
</body>
</html>

二十、 表单元素

输入框
密码框
下拉列表【重新渲染】

是加入layui-form 引入form模块

lay-search="" 是否支持下拉输入过滤

单选框【重新渲染】

是加入layui-form 引入form模块

复选框【重新渲染】

是加入layui-form 引入form模块

lay-skin=“primary” 使用原始的样式

开关【重新渲染】

是加入layui-form 引入form模块

使用checkbox实现
lay-skin=“switch” 使用皮肤

文本域
富文本

在这里插入图片描述

在这里插入图片描述

二十一、 表单对象form

在这里插入图片描述

  1. 监听提交事件
    在这里插入图片描述
    在这里插入图片描述

  2. 监听下拉框改变事件
    在这里插入图片描述
    在这里插入图片描述

  3. 监听复选框改变事件
    在这里插入图片描述
    在这里插入图片描述

  4. 监听开关改变事件

在这里插入图片描述
在这里插入图片描述

  1. 监听单选框选中事件
    在这里插入图片描述
    在这里插入图片描述

  2. 元素渲染
    在这里插入图片描述

在这里插入图片描述

  1. 表单初始赋值

在这里插入图片描述
在这里插入图片描述

初始化表单

$("#btn2").click(function(){
						form.val("dataFrm",{
							username:'张大明',
							pwd:'123456',
							phone:'13311112222',
							email:'1231312@qq.com',
							jiguan:'北京',
							sex:'女',
							//hobby:["写作","阅读","游戏"],
							ishere:false
						});
						
						var hobby="写作,游戏";
						var hobbys=hobby.split(",");
						//得到hobbyElem
						var hobbyElem=$("[name='hobby']");
						$.each(hobbys,function(i,str){
							alert(str);
							$.each(hobbyElem,function(j,item){
								var jdom=$(item);// 把dom--转jdom
								if(jdom.val()==str){
									//jdom.attr({"checked",true});
									jdom.attr("checked","checked");
								}
							})
						})
						form.render();
						
					});

  1. 表单验证
    使用方法
          lay-verify=“required|phone”
    相关的值
           required 非空验证
           phone 手机号验证
          number 数值验证
          url 链接地址验证 http://www.baid.com

  2. 自定义验证
    在这里插入图片描述
    在这里插入图片描述

<input type="text" lay-verify="username"> 
 
还同时支持多条规则的验证，如下：
<input type="text" lay-verify="required|phone|number">
      
form.verify({
  username: function(value, item){ //value：表单的值、item：表单的DOM对象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
    
    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
    if(value === 'xxx'){
      alert('用户名不能为敏感词');
      return true;
    }
  }
  
  //我们既支持上述函数式的方式，也支持下述数组的形式
  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位，且不能出现空格'
  ] 
});

二十二、 弹出层【重点】

  1. layer.alert
    在这里插入图片描述

  2. layer.confirm
    在这里插入图片描述

在这里插入图片描述

  1. layer.prompt

在这里插入图片描述
在这里插入图片描述

  1. layer.tab
    在这里插入图片描述
    在这里插入图片描述

  2. layer.photos(options)
    在这里插入图片描述

json要求

{
  "title": "相册标题",
  "id": 123, 
  "start": 0, 
  "data": [   
    {
      "alt": "图片名1",
      "pid": 5, 
      "src": "resources/images/img1.jpg", 
      "thumb": "resources/images/img1.jpg" 
    },
    {
      "alt": "图片名3",
      "pid": 1, 
      "src": "resources/images/img3.jpg", 
      "thumb": "resources/images/img3.jpg" 
    },
    {
      "alt": "图片名4",
      "pid": 2, 
      "src": "resources/images/img4.jpg", 
      "thumb": "resources/images/img4.jpg" 
    },
    {
      "alt": "图片名5",
      "pid": 3, 
      "src": "resources/images/img5.jpg", 
      "thumb": "resources/images/img5.jpg" 
    },
    {
      "alt": "图片名6",
      "pid": 4, 
      "src": "resources/images/img6.jpg", 
      "thumb": "resources/images/img6.jpg" 
    }
  ]
}

在这里插入图片描述

  1. layer.msg

在这里插入图片描述
在这里插入图片描述

  1. layer.tips

在这里插入图片描述
在这里插入图片描述

  1. layer.type=1
    页面层 把页面上的某一段HTML代码放到弹出层里面

此时的content属性可以使用html代码
也可以使用页面元素的选择器
在这里插入图片描述

  1. layer.type=0
	//alert
			$("#btn1").click(function() {
				var x=layer.open({
					type:0,  //设置类型 默认为0  1 页面层  2ifream层
					title:"提示",  //标题
					content:'你好吗?',//内容  type=0为内容
					skin :'layui-layer-molv',//皮肤
					/* area: '500px' */
					area:['500px','300px'],//宽高
					offset: 'auto',	 //offset默认情况下不用设置。但如果你不想垂直水平居中
					icon:1    //只对type=0的效
					, btn: ['按钮一', '按钮二', '按钮三']
				    ,yes: function(index, layero){
					    //按钮【按钮一】的回调
					    alert("按钮一");
					    layer.close(index);
					  }
					  ,btn2: function(index, layero){
					    //按钮【按钮二】的回调
					    alert("按钮二")
					    //return false 开启该代码可禁止点击该按钮关闭
					  }
					  ,btn3: function(index, layero){
					    //按钮【按钮三】的回调
					    alert("按钮三")
					    //return false 开启该代码可禁止点击该按钮关闭
					  }
					  ,cancel: function(){ 
					    //右上角关闭回调
					      alert("cancel")
					    //return false 开启该代码可禁止点击该按钮关闭
					  }
					,btnAlign :'c'  //按钮的对齐方式
					,closeBtn : 1  //设置关闭按钮的样式  1  默认  
					,shade: [0.8, '#FF0000']
					,shadeClose:true  //点击遮罩是否关闭弹层
					,anim: 4 //设置动画
					,maxmin :true //是否显示最大化和最小化的按钮 type=1 type=2有效
					,success:function(layero, index){
						alert(index+"  "+x);
					}
				})
				alert(x);
			});
  1. layer.type=2
    type=2时是一个ifream层
    此时的content就是一个页面的url
    在这里插入图片描述

二十三、 数据表格【重点】

  1. 基本使用
    准备json
{
	"code": 0,
	"msg": "",
	"count": 101,
	"data": [
		{
			"id": "10001",
			"username": "杜甫",
			"email": "xianxin@layui.com",
			"sex": "男",
			"city": "浙江杭州",
			"sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。",
			"experience": "116",
			"ip": "192.168.0.8",
			"logins": "108",
			"joinTime": "2016-10-14"
		},
		{
			"id": "10002",
			"username": "李白",
			"email": "xianxin@layui.com",
			"sex": "男",
			"city": "浙江杭州",
			"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。",
			"experience": "12",
			"ip": "192.168.0.8",
			"logins": "106",
			"joinTime": "2016-10-14",
			"LAY_CHECKED": true
		},
		{
			"id": "10003",
			"username": "王勃",
			"email": "xianxin@layui.com",
			"sex": "男",
			"city": "浙江杭州",
			"sign": "人生恰似一场修行",
			"experience": "65",
			"ip": "192.168.0.8",
			"logins": "106",
			"joinTime": "2016-10-14"
		},
		{
			"id": "10004",
			"username": "李清照",
			"email": "xianxin@layui.com",
			"sex": "女",
			"city": "浙江杭州",
			"sign": "人生恰似一场修行",
			"experience": "666",
			"ip": "192.168.0.8",
			"logins": "106",
			"joinTime": "2016-10-14"
		},
		{
			"id": "10005",
			"username": "冰心",
			"email": "xianxin@layui.com",
			"sex": "女",
			"city": "浙江杭州",
			"sign": "人生恰似一场修行",
			"experience": "86",
			"ip": "192.168.0.8",
			"logins": "106",
			"joinTime": "2016-10-14"
		},
		{
			"id": "10006",
			"username": "贤心",
			"email": "xianxin@layui.com",
			"sex": "男",
			"city": "浙江杭州",
			"sign": "人生恰似一场修行",
			"experience": "12",
			"ip": "192.168.0.8",
			"logins": "106",
			"joinTime": "2016-10-14"
		},
		{
			"id": "10007",
			"username": "贤心",
			"email": "xianxin@layui.com",
			"sex": "男",
			"city": "浙江杭州",
			"sign": "人生恰似一场修行",
			"experience": "16",
			"ip": "192.168.0.8",
			"logins": "106",
			"joinTime": "2016-10-14"
		},
		{
			"id": "10008",
			"username": "贤心",
			"email": "xianxin@layui.com",
			"sex": "男",
			"city": "浙江杭州",
			"sign": "人生恰似一场修行",
			"experience": "106",
			"ip": "192.168.0.8",
			"logins": "106",
			"joinTime": "2016-10-14"
		}
	]
}

编写代码
可以使用html实现[了解]
在这里插入图片描述

可以使用js 实现[掌握]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数组表格</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
	<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
	<div style="display: none;" id="userToolBar">
		    <button type="button" class="layui-btn layui-btn-sm">增加</button>
		    <button type="button" class="layui-btn layui-btn-sm">编辑</button>
		    <button type="button" class="layui-btn layui-btn-sm">删除</button>
	</div>
	
	<div  id="userBar" style="display: none;">
	  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</div>
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'jquery', 'layer', 'form', 'table' ], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var table = layui.table;
			
			//渲染数据表格
			table.render({
				 elem: '#userTable'   //渲染的目标对象
			    ,url:'resources/json/users.json' //数据接口
			    ,title: '用户数据表'//数据导出来的标题
			    /* ,toolbar:"<div>xxx</div>" */
			    ,toolbar:"#userToolBar"   //表格的工具条
			    ,defaultToolbar:['filter','print']
			    /* ,height:300 */
			    ,height:'full-200'
			    ,cellMinWidth:100 //设置列的最小默认宽度
			    ,done:function(res, curr, count){
			    	/* alert(res);//后台url返回的json串
			    	alert(curr);//当前页
			    	alert(count);//数据总条数 */
			    }
			    ,totalRow:true //开启合并行
			    ,page: true  //是否启用分页
			  /*   ,limit:20 //设置每页显示条数 默认为10
			    ,limits:[20,40,60,80] */
			    ,text:{
			        none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
			    }
			    ,cols: [[   //列表数据
			     {type: 'checkbox', fixed: 'left'}
			      ,{type: 'numbers'}
			      ,{field:'id', title:'ID', width:80,hide:true,sort:true}
			      ,{field:'username', title:'用户名', width:120,sort:true,edit:true,align:'center'}
			      ,{field:'email', title:'邮箱', width:150,  templet: function(res){
			        return '<em>'+ res.email +'</em>'
			      }}
			      ,{field:'sex', title:'性别', width:80, sort: true,align:'center',templet:function(d){
			    	  return d.sex=='男'?'汉子':'妹子';
			      }}
			      ,{field:'city', title:'城市', width:100}
			      ,{field:'sign', title:'签名',totalRowText:"合计"}
			      ,{field:'experience', title:'积分', width:80,totalRow:true}
			      ,{field:'ip', title:'IP', width:120}
			      ,{field:'logins', title:'登入次数', width:100,totalRow:true}
			      ,{field:'joinTime', title:'加入时间', width:120}
			      ,{fixed: 'right', title:'操作', toolbar: '#userBar', width:150,align:'center'}
			    ]]
			})

		});
	</script>
</body>
</html>
  1. 相关属性
    表格属性
    表头属性
    在这里插入图片描述

field:和数据接口里面的data[{“id”:1}]的key映射
title:表头的内容
width:宽度
hide:true 是否隐藏
sort:true 是否开启列排序
edit:true 是否支持编辑
align:‘center’ 内容对齐方式 left center right
templet:function(d){
return d.sex==‘男’?‘汉子’:‘妹子’;
}}
totalRowText:“合计” 合计行的文本 前提是表格开启合并行
totalRow:true 是否合计前提是表格开启合并行
toolbar: ‘#userBar’ 引入行的工具栏
在这里插入图片描述

  1. 相关事件监听
    监听头部工具栏事件
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

监听复选框选择
在这里插入图片描述

监听单元格编辑
前提单元必须可以编辑
在这里插入图片描述
在这里插入图片描述

监听行单击事件
在这里插入图片描述

监听行双击事件
在这里插入图片描述

监听行工具事件
在这里插入图片描述
在这里插入图片描述

  1. 相关方法
    **获取选中行
    在这里插入图片描述

表格重载**
在这里插入图片描述

二十四、 数据表格+弹出层的综合案例【重点】

  1. json准备
{
	"code": 0,
	"msg": "",
	"count": 101,
	"data": [
		{
			"id": "10001",
			"username": "杜甫",
			"email": "xianxin@layui.com",
			"sex": "1",
			"city": "浙江杭州",
			"LAY_CHECKED":true
		},
		{
			"id": "10002",
			"username": "李白",
			"email": "xianxin@layui.com",
			"sex": "1",
			"city": "浙江杭州",
			"LAY_CHECKED": true
		},
		{
			"id": "10003",
			"username": "王勃",
			"email": "xianxin@layui.com",
			"sex": "1",
			"city": "浙江杭州"
		},
		{
			"id": "10004",
			"username": "李清照",
			"email": "xianxin@layui.com",
			"sex": "0",
			"city": "浙江杭州"
		},
		{
			"id": "10005",
			"username": "冰心",
			"email": "xianxin@layui.com",
			"sex": "0",
			"city": "浙江杭州"
		},
		{
			"id": "10006",
			"username": "贤心",
			"email": "xianxin@layui.com",
			"sex": "1",
			"city": "浙江杭州"
		},
		{
			"id": "10007",
			"username": "贤心",
			"email": "xianxin@layui.com",
			"sex": "1",
			"city": "浙江杭州"
		},
		{
			"id": "10008",
			"username": "贤心",
			"email": "xianxin@layui.com",
			"sex": "1",
			"city": "浙江杭州"
		}
	]
}
  1. 创建页面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数组表格</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
	<!-- 搜索条件开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	  <legend>查询条件</legend>
	</fieldset>
	<form action="" class="layui-form" method="post">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">编号:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="id"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">用户名:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="username"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		     <div class="layui-inline">
		      <label class="layui-form-label">邮箱:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="email"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">开始时间:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="startTime" id="startTime"  readonly="readonly" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">结束时间:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="endTime" id="endTime" readonly="readonly"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		     <div class="layui-inline">
		      <label class="layui-form-label">性别:</label>
		      <div class="layui-input-inline">
		        <input type="radio" name="sex" value="1" title="男">
				<input type="radio" name="sex" value="0" title="女">
		      </div>
		    </div>
		 </div>
		 <div class="layui-form-item" style="text-align: center;">
		    <div class="layui-input-block">
		      <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" id="doSearch">查询</button>
		      <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置</button>
		    </div>
		  </div>
	</form>
	
	<!-- 搜索条件结束 -->
	
	
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
	<div style="display: none;" id="userToolBar">
		    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
		    <button type="button" class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>
	</div>
	<div  id="userBar" style="display: none;">
	  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</div>
	<!-- 数据表格结束 -->
	
	<!-- 添加和修改的弹出层开始 -->
	<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
		<form class="layui-form " action="" lay-filter="dataFrm" id="dataFrm">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">编号:</label>
					<div class="layui-input-inline">
						<input type="text" name="id"  lay-verify="required" autocomplete="off"
							class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">用户名:</label>
					<div class="layui-input-inline">
						<input type="text" name="username" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">邮箱:</label>
					<div class="layui-input-inline">
						<input type="text" name="email"  lay-verify="required|email" autocomplete="off"
							class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">城市:</label>
					<div class="layui-input-inline">
						<input type="text" name="city" lay-verify="required" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">性别:</label>
					<div class="layui-input-inline">
						 <input type="radio" name="sex" value="1" checked="checked" title="男">
						 <input type="radio" name="sex" value="0" title="女">
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
		    <div class="layui-input-block">
		      <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
		      <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
		    </div>
		  </div>
		</form>
	
	</div>
	<!-- 添加和修改的弹出层结束 -->
	
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'jquery', 'layer', 'form', 'table','laydate' ], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var table = layui.table;
			var laydate=layui.laydate;
			
			//绑定时间选择器
			laydate.render({
				elem:'#startTime'
			});
			laydate.render({
				elem:'#endTime'
			})
			
			
			//渲染数据表格
			var tableIns=table.render({
				 elem: '#userTable'   //渲染的目标对象
			    ,url:'resources/json/users.json' //数据接口
			    ,title: '用户数据表'//数据导出来的标题
			    ,toolbar:"#userToolBar"   //表格的工具条
			    ,height:'full-300'
			    ,cellMinWidth:100 //设置列的最小默认宽度
			    ,done:function(res, curr, count){
			    	
			    }
			    ,page: true  //是否启用分页
			    ,cols: [[   //列表数据
			     {type: 'checkbox', fixed: 'left'}
			      ,{field:'id', title:'ID', sort:true}
			      ,{field:'username', title:'用户名', sort:true,align:'center'}
			      ,{field:'email', title:'邮箱', align:'center',  templet: function(res){
			        return '<em>'+ res.email +'</em>'
			      }}
			      ,{field:'sex', title:'性别',align:'center',templet:function(d){
			    	  return d.sex=='1'?'男':'女';
			      }}
			      ,{field:'city', title:'城市',align:'center'}
			      ,{fixed: 'right', title:'操作', toolbar: '#userBar', width:220,align:'center'}
			    ]]
			})

			
			//监听头部工具栏事件
			table.on("toolbar(userTable)",function(obj){
				 switch(obj.event){
				    case 'add':
				      openAddUser();
				    break;
				    case 'batchDelete':
				      layer.msg('批量删除');
				    break;
				  };
			})
			
			//监听行工具事件
		   table.on('tool(userTable)', function(obj){
			   var data = obj.data; //获得当前行数据
			   var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  if(layEvent === 'del'){ //删除
				 layer.msg("删除");
			     layer.confirm('真的删除行么', function(index){
			       layer.close(index);
			       //向服务端发送删除指令
			     });
			   } else if(layEvent === 'edit'){ //编辑
				   openUpdateUser(data);
			   }
			 });
			
			var url;
			var mainIndex;
			//打开添加页面
			function openAddUser(){
				mainIndex=layer.open({
					type:1,
					title:'添加用户',
					content:$("#saveOrUpdateDiv"),
					area:['800px','400px'],
					success:function(index){
						//清空表单数据       
						$("#dataFrm")[0].reset();
						url="user/addUser.action";
					}
				});
			}
			//打开修改页面
			function openUpdateUser(data){
				mainIndex=layer.open({
					type:1,
					title:'修改用户',
					content:$("#saveOrUpdateDiv"),
					area:['800px','400px'],
					success:function(index){
						form.val("dataFrm",data);
						url="user/updateUser.action";
					}
				});
			}
			//保存
			form.on("submit(doSubmit)",function(obj){
				//序列化表单数据
				var params=$("#dataFrm").serialize();
				$.post("index.jsp",params,function(obj){
					layer.msg(obj);
					//关闭弹出层
					layer.close(mainIndex)
					//刷新数据 表格
					tableIns.reload();
				})
			});
		});
	</script>
</body>
</html>

二十五、 文件上传

选择文件之后自动上传
在这里插入图片描述
在这里插入图片描述

		//普通图片上传
		  var uploadInst = upload.render({
		    elem: '#test1'
		    ,url: 'file/upload.action'
		    ,accept:'images'
		    ,acceptMime:'image/*'
		    ,auto:true//是否选择文件之后自动上传
		    ,field:'mf' //表单的name值
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      obj.preview(function(index, file, result){
		        $('#demo1').attr('src', result); //图片链接（base64）
		      });
		    }
		    ,done: function(res){
		    	alert(res);
		      //如果上传失败
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }
		      //上传成功
		      layer.msg("上传成功");
		    }
		    ,error: function(){
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
		  });

非自动上传

在这里插入图片描述

在这里插入图片描述

二十六、 树形组件dtree

  1. 下载
    https://gitee.com/miniwatermelon/DTreeHelper
    在这里插入图片描述

在这里插入图片描述

  1. 基本使用
    创建json
{
	"status":{"code":200,"message":"操作成功"},
	"data":[{
		"id":"001",
		"title": "湖南省",
		"last": false,
		"parentId": "0",
		"children":[{
			"id":"001001",
			"title": "长沙市",
			"last":true,
			"parentId": "001"
		},{
			"id":"001002",
			"title": "株洲市",
			"last":true,
			"parentId": "001"
		},{
			"id":"001003",
			"title": "湘潭市",
			"last":true,
			"parentId": "001"
		},{
			"id":"001004",
			"title": "衡阳市",
			"last":true,
			"parentId": "001"
		},{
			"id":"001005",
			"title": "郴州市",
			"last":true,
			"parentId": "001"
		}]
	},{
		"id":"002",
		"title": "湖北省",
		"last": false,
		"parentId": "0",
		"children":[{
			"id":"002001",
			"title": "武汉市",
			"last":true
		},{
			"id":"002002",
			"title": "黄冈市",
			"last":true,
			"parentId": "002"
		},{
			"id":"002003",
			"title": "潜江市",
			"last":true,
			"parentId": "002"
		},{
			"id":"002004",
			"title": "荆州市",
			"last":true,
			"parentId": "002"
		},{
			"id":"002005",
			"title": "襄阳市",
			"last":true,
			"parentId": "002"			
		}]
	}]
}

页面

在这里插入图片描述

  1. 数据类型
    标准数据格式
    和基本使用里面一样
    节点与节点之间有层级关系 通过clildren去确定层级
    在这里插入图片描述

layui风格数据格式（dataStyle）
json

{
	"code":0,
	"msg":"操作成功",
	"data":[{
		"id":"001",
		"title": "湖南省",
		"last": false,
		"parentId": "0",
		"children":[{
			"id":"001001",
			"title": "长沙市",
			"last":true,
			"parentId": "001"
		},{
			"id":"001002",
			"title": "株洲市",
			"last":true,
			"parentId": "001"
		},{
			"id":"001003",
			"title": "湘潭市",
			"last":true,
			"parentId": "001"
		},{
			"id":"001004",
			"title": "衡阳市",
			"last":true,
			"parentId": "001"
		},{
			"id":"001005",
			"title": "郴州市",
			"last":true,
			"parentId": "001"
		}]
	},{
		"id":"002",
		"title": "湖北省",
		"last": false,
		"parentId": "0",
		"children":[{
			"id":"002001",
			"title": "武汉市",
			"last":true
		},{
			"id":"002002",
			"title": "黄冈市",
			"last":true,
			"parentId": "002"
		},{
			"id":"002003",
			"title": "潜江市",
			"last":true,
			"parentId": "002"
		},{
			"id":"002004",
			"title": "荆州市",
			"last":true,
			"parentId": "002"
		},{
			"id":"002005",
			"title": "襄阳市",
			"last":true,
			"parentId": "002"			
		}]
	}]
}

页面
在这里插入图片描述

list集合数据格式（dataFormat）
json

{
	"status":{"code":200,"message":"操作成功"},
	"data":[
	       {"id":"001","title": "湖南省", "last": false, "parentId": "0"},
	       {"id":"002","title": "湖北省","last": false,"parentId": "0"},
	       
	       {"id":"001001", "title": "长沙市", "last":true, "parentId": "001"},
	       {"id":"001002", "title": "株洲市", "last":true, "parentId": "001" },
	       {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" },
	       {"id":"001004","title": "衡阳市","last":true,"parentId": "001"},
	       {"id":"001005","title": "郴州市","last":true,"parentId": "001"},
	       
	       {"id":"002001","title": "武汉市","last":true,"parentId": "002"},
	       {"id":"002002","title": "黄冈市","last":true,"parentId": "002"},
	       {"id":"002003","title": "荆州市","last":true,"parentId": "002"},
	       {"id":"002004","title": "天门市","last":true,"parentId": "002"},
	       {"id":"002005","title": "孝感市","last":true,"parentId": "002"}
	       ]
	}

页面
在这里插入图片描述

layui+list集合数据格式（dataStyle + dataFormat）
json

{
    "code":0,
	"msg":"操作成功",
	"data":[
	       {"id":"001","title": "湖南省", "last": false, "parentId": "0"},
	       {"id":"002","title": "湖北省","last": false,"parentId": "0"},
	       
	       {"id":"001001", "title": "长沙市", "last":true, "parentId": "001"},
	       {"id":"001002", "title": "株洲市", "last":true, "parentId": "001" },
	       {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" },
	       {"id":"001004","title": "衡阳市","last":true,"parentId": "001"},
	       {"id":"001005","title": "郴州市","last":true,"parentId": "001"},
	       
	       {"id":"002001","title": "武汉市","last":true,"parentId": "002"},
	       {"id":"002002","title": "黄冈市","last":true,"parentId": "002"},
	       {"id":"002003","title": "荆州市","last":true,"parentId": "002"},
	       {"id":"002004","title": "天门市","last":true,"parentId": "002"},
	       {"id":"002005","title": "孝感市","last":true,"parentId": "002"}
	       ]
	}

页面

在这里插入图片描述

  1. 事件监听

在这里插入图片描述

图标点击
在这里插入图片描述

节点点击
在这里插入图片描述

节点双击

在这里插入图片描述

  1. 相关方法使用
    初始化选中
    在这里插入图片描述

得到选中值
在这里插入图片描述

  1. 多选树的处理

json要求

{
    "code":0,
	"msg":"操作成功",
	"data":[
	       {"id":"001","title": "湖南省", "last": false, "parentId": "0","checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"002","title": "湖北省","last": false,"parentId": "0","checkArr": [{"type": "0", "checked": "0"}]},
	       
	       {"id":"001001", "title": "长沙市", "last":true, "parentId": "001","checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"001002", "title": "株洲市", "last":true, "parentId": "001" ,"checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" ,"checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"001004","title": "衡阳市","last":true,"parentId": "001","checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"001005","title": "郴州市","last":true,"parentId": "001","checkArr": [{"type": "0", "checked": "0"}]},
	       
	       {"id":"002001","title": "武汉市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "1"}]},
	       {"id":"002002","title": "黄冈市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "2"}]},
	       {"id":"002003","title": "荆州市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"002004","title": "天门市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"002005","title": "孝感市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]}
	       ]
	}
{
    "code":0,
	"msg":"操作成功",
	"data":[
	       {"id":"001","title": "湖南省", "last": false, "parentId": "0","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"002","title": "湖北省","last": false,"parentId": "0","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       
	       {"id":"001001", "title": "长沙市", "last":true, "parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"001002", "title": "株洲市", "last":true, "parentId": "001" ,"checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" ,"checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"001004","title": "衡阳市","last":true,"parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"001005","title": "郴州市","last":true,"parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       
	       {"id":"002001","title": "武汉市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"002002","title": "黄冈市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"002003","title": "荆州市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"002004","title": "天门市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"002005","title": "孝感市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}
	       ]
	}

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dtree</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
<link rel="stylesheet" href="resources/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="resources/layui_ext/dtree/font/dtreefont.css">

</head>
<body>
 <button type="button" class="layui-btn" id="btn1">选中武汉市</button>
 <button type="button" class="layui-btn" id="btn2">得到选中值</button>
 
 
 <ul id="demoTree" class="dtree" data-id="0"></ul>
	
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.extend({
			dtree:'resources/layui_ext/dist/dtree'
		}).use([ 'jquery', 'layer', 'form','dtree' ], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var dtree=layui.dtree;

			 // 初始化树
		    var DemoTree = dtree.render({
		      elem: "#demoTree",
 		      dataStyle: "layuiStyle",  //使用layui风格的数据格式
		      response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
              dataFormat: "list",  //配置data的风格为list
              checkbar: true,  
              checkbarType: "all", // 默认就是all，其他的值为： no-all  p-casc   self  only\
              checkbarData: "choose" ,
              url: "resources/layui_ext/json/case/asyncTreeCheckBox2.json" // 使用url加载（可与data加载同时存在）
		    });
			 
		   //选中武汉
		   $("#btn1").click(function(){
			    var params = dtree.dataInit("demoTree", "002001");
		   });
		    	
		   $("#btn2").click(function(){
			   var param = dtree.getNowParam(DemoTree);
			   layer.alert(JSON.stringify(param), {
		    	      title: '最终的提交信息'
		    	    })
		   });
		    	
		});
	</script>
</body>
</html>

在这里插入图片描述

多选树的相关方法
使用js选中某些节点
在这里插入图片描述

得到选中的所有节点
在这里插入图片描述

s

程序员小庞
关注
专栏目录
Layui使用
weixin_44545087的博客
05-08 1万+
开发工具与关键技术：VS 作者：黄 金 燕 班级：18级（4）班 撰写时间：2019.5.3 一．1.layui模块化使用：如果你使用的是layui,那么你直接在官网下载layui框架即可，无需引入Query和layer.js,但需要引入layui.css和layui.js。 调用方式：通过layui.use(‘layer’,callback)加载和初始化layer模块。 2.作为独立组件使...
Layui学习笔记
计算机源码之家的博客
10-05 387
Layui目录 Layui目录Layui目录一、概述1. 下载2.下载文件说明二、内容1. 图标2. 按钮3. 导航菜单4. 选项卡5. 进度条6. 面板+布局7. 徽章8. 时间线9. 动画10. 颜色选择器11. 滑块12. 评分13. 轮播14. 代码修饰器15. 时间和日期选择器16. 表单元素17. 表单对象form18. 弹出层【重点】19. 数据表格【重点】20. 数据表格+弹出层的综合案例【重点】21. 文件上传22. 树形组件dtree三、使用方法3.1图标3.2按钮3.3事件监听3.4导
layui基本使用视频教程
08-01
此为layui基本使用视频教程百度云下载地址，如有问题可以按照文档里面联系本人
layui的使用
IT二叔的博客
04-08 2423
layui 一、概述 1.下载 https://www.layui.com/ 2.下载文件说明 css 样式 font:字体 image:图片 lay: |–models |– layui.all.js 包含了所有模块的js layui.js 框架 如果要使用必须使用layui.use([“table”,“layer”,“laydate”,“form”],function(){}) 二、学习的内容 1.图标 2.按钮 3.导航菜单 4.选项卡 5.进度条 6.面板+布局 7.徽章 8.时间线 9.
LayUI的使用
SAME_LOVE的博客
07-10 2614
在线示例 - Layui。LayUI是一个基于JavaScript的前端开发框架，旨在简化Web界面的设计和开发。它使用了简洁友好的API，并提供了丰富的组件和样式，使开发者可以快速构建美观、响应式的网页界面。
Layui2.x讲义代码笔记.zip
03-25
这份“Layui2.x讲义代码笔记”很可能是对这个框架的深入讲解和实例代码集合，旨在帮助开发者更好地理解和使用Layui。 在Layui2.x中，主要知识点包括： 1. **模块化设计**：Layui采用了模块化的开发方式，将各个...
layui笔记.docx
08-06
layui学习笔记 layui是一个基于JavaScript的前端框架，提供了一系列的UI组件和插件，帮助开发者快速构建Web应用程序。layui的 栅格系统是其核心组件之一，提供了灵活的布局方式，能够满足不同屏幕大小和设备的需求...
layui手机车牌号码键盘代码.zip
最新发布
10-15
这个代码库利用了jQuery和CSS特效，旨在增强用户体验，尤其在移动设备上进行车辆相关业务操作时，如汽车租赁、车辆信息录入等场景。 首先，jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理...
【学习笔记】前端框架LayUI.pdf
09-13
在上面的示例代码中，我们首先引入了LayUI的CSS文件，然后引入了LayUI的JS文件，最后使用LayUI的layer弹出层组件弹出一个提示信息。 5. LayUI的扩展 LayUI提供了丰富的扩展机制，开发者可以根据需要自由扩展LayUI...
layui的基本使用
qq_44886882的博客
10-26 1258
该笔记记录如何使用layui的模块化方法。 访问layui官网 https://www.layui.site/ 下载官网的layui压缩包文件，解压到本地文件夹，文件结构如下： 在项目下，创建layui文件夹，将这三个文件拷贝过去。 在项目下，新建layuiModel文件夹，存放自定义layui模块文件。 在项目下，创建Html文件。 其中的自定义layui模块文件内容如下： 该文件中定义的模块包括自定义的属性和方法。 # helloworld.js文件 ## 第一个参数是可选的，用于声明
前端框架Layui的使用讲解（Layui搭建登录注册页面）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-11 1万+
Layui的设计理念是简洁、直观和高效，旨在提供轻量级且易于上手的前端解决方案。它提供了丰富的UI组件，如按钮、表格、表单、导航、分页等，以及强大的模块化功能，例如弹层、日期选择器、上传组件等。使用Layui，你可以轻松构建出具有现代化风格和友好交互的Web界面。
layui的入门使用（保姆级教学）
m0_73329959的博客
07-11 2316
之前学过了bootstrap，学过了easyui，此时我们学习layui，相比起其他之前学过的两种ui框架，layui集合了两种框架的好处，功能更强大，组件更加美观目录前言layui前端框架的特性layui的入门使用下载layuilayui国内镜像网站（官方网站已下线）http://layui.org.cn/demo/index.htmllayui官方文档下载http://layui.org.cn/index.html使用layui案例：结合自定义mvc框架使用layui前端框架实现登陆注册功能实体类。
layui入门
qq_63531917的博客
07-08 3123
链接: 官方网站(已经下线) 链接: 参考网址(已经下线) 首先打开我们的参考网站点击文档下翻 找到获得layui，就可以看到下载方式码云和GitHub 博主这边演示以前官网下载方式 点击下线的官网地址，直接点击下载，会有一个压缩包 然后我们解压到我们电脑的一个文件夹 到这就下载好了首先我们建立一个项目，然后把我们layui相关的js文件和其他依赖导入，因为这些依赖和js都是静态的所以我们一般都放在一个静态文件夹里。 建立一个工程，在web工程下面建立一个static文件夹，在在static建立
Layui的基本使用(前端登录操作步骤)
qq_58804301的博客
06-14 9075
这篇文章里面有Layui的前端登录实现以及后台的代码编写
Layui使用入门教程
热门推荐
Gary Leong
07-04 4万+
获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件： ./layui/css/layui.css ./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js 没错，不用去管其它任何文件。因为他们（比如各模块）都是在最终使用的时候才会自动加载。这是一个基本的入门页面： &lt...
Layui的使用
AturboS的博客
06-28 518
关于layui的使用，我们可以去浏览器打开layui（网站：doc.html 建议谷歌浏览器打开）； 进入页面后是这样的（如下图） 3、打开后会发现顶部和左边都有很多选择项； 4、先从左边的开始使用开始，点击后会显示出一系列文字解释还有代码； 5、这些代码我们平时做网页或项目的时候要用得到的可以直接复制去代码页面； 6、还有左边页面元素的布局，这个主要是讲解关于页面的布局问题，它里面也有介绍布局要注意的还有布局样式； 7、还有最重要的颜色，颜色看似很简单但好的..
国产前端框架LayUI使用教程
qq_42059717的博客
03-05 5698
第十三章 LayUI 官方文档https://www.layui.com/doc 1.杂七杂八知识点 使用LayUI需要引LayUI的源码，之后在引入layui.css以及layui.js <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 属性 参数 含义 name=“viewport” 屏幕可视区域 content width 可视区域的宽度，值
"前端框架LayUI学习笔记总结与实践指南
对于初学者来说，只需要引入LayUI的相关文件，并按照文档中的示例代码进行编写即可。LayUI提供了丰富的UI样式和交互效果，可以大大减少开发时间和工作量。 LayUI的核心思想是模块化开发。在LayUI中，一切都被看作是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值