LayUI框架快速上手

最新推荐文章于 2024-03-29 11:00:51 发布
最新推荐文章于 2024-03-29 11:00:51 发布
阅读量853 收藏 4
点赞数
文章标签： layui css html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Linlietao0587/article/details/120352689
版权

LayUI概述

和 Bootstrap 有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本

下载与结构

1.官网：https://www.layui.com/

2.下载完成解压，我们看到目录结构

  ├─css //css目录
  │  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
  │  │  ├─laydate
  │  │  └─layer
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  └─layui.js //核心库

快速使用

1.第三方 CDN 方式引入：

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"/>

<!-- 引入 layui.js -->		
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

2.下载本地使用：

<!-- 引入 layui.css -->
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css"/>

<!-- 引入 layui.js -->
<script src="layui-v2.6.8/layui/layui.js"></script>

3.首个例子 Hello World

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui的使用</title>
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" />
		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
	</head>
	<body>
		<script>
			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					form = layui.form;
				layer.msg('Hello World');
			});
		</script>
	</body>
</html>

布局

布局容器

  1. 固定宽度（两侧有留白效果）

    关键知识点：layui-container

    <div class="layui-container" style="background-color:navajowhite; height:300px;">
	固定宽度（两侧有留白效果）
</div>

  2. 完整宽度（占据屏幕宽度的100%）

    关键知识点：layui-fluid

<div class="layui-fluid" style="background-color:navajowhite; height:300px;">
	完整宽度（占据屏幕宽度的100%）
</div>

栅格系统

它将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用

列组合

①定义行 layui-row

②定义列 layui-col-md*

  • md表示不同屏幕的标识（xs、sm、md、lg）
  • 该列所占用的12等分数（如6/12），可选值为 1 - 12
  • 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
<div class="layui-container"><!--布局容器-->
	<div class="layui-row"><!--定义行-->
		<div class="layui-col-md5" style="background-color:blue;">内容5/12</div>
		<div class="layui-col-md7" style="background-color:red;">内容7/12</div>
	</div>
	<div class="layui-row"><!--定义行-->
		<div class="layui-col-md4" style="background-color:blue;">内容4/12</div>
		<div class="layui-col-md4" style="background-color:red;">内容4/12</div>
		<div class="layui-col-md6" style="background-color:green;">内容6/12</div>
	</div>
</div>

列可以同时出现最多四种不同的组合，分别是：

  • xs（超小屏幕，如手机）
  • sm（小屏幕，如平板）
  • md（桌面中等屏幕）
  • lg（桌面大型屏幕）

以呈现更加动态灵活的布局。

<h3>平板、桌面端的不同表现：</h3>
<div class="layui-row">
	<!-- 小屏幕占6列，中屏幕占4列 -->
	<div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">
		平板≥768px：6/12 | 桌面端≥992px：4/12
	</div>
</div>

<div class="layui-row">
	<!-- 小屏幕占4列，中屏幕占6列 -->
	<div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;">
		平板≥768px：4/12 | 桌面端≥992px：6/12
	</div>
</div>

<div class="layui-row">
	<!-- 小屏幕占12列，中屏幕占8列 -->
	<div class="layui-col-sm12 layui-col-md8" style="background-color: coral">
		平板≥768px：12/12 | 桌面端≥992px：8/12
	</div>
</div>

列边距

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：

**layui-col-space *** （1-30）

*值是 px值（1 2 4 5 6 8 10 12 14 15 16 18 20 22 24 25 26 28 30）4个单数

<div class="layui-row layui-col-space20">
	<div class="layui-col-md4">
		<!-- 给具体的内容设置背景颜色 -->
		<div style="background-color: blue">4</div>
	</div>
	<div class="layui-col-md4">
		<div style="background-color: green">4</div>
	</div>
	<div class="layui-col-md4">
		<div style="background-color: blue">4</div>
	</div>
</div>

  • ayui-col-space 设置后不起作用主要是因为设置的是 padding，也就是说向内缩，所以设置背景色 padding 也是会添上颜色，看起来好像没有间距一样。可以在里面加一个 div 来达到目的

    <div class="layui-col-md4" style="background-color: blue">
	4
</div>

    意思整体也会上色，看不到细节

  • 如果需要的间距高于30px（一般不常见），我们需要采用列偏移

列偏移

layui-col-md-offset* (1-12) 从而让列向右偏移

  • 其中 * 号代表的是偏移占据的列数，可选中为 1 - 12
  • 如 layui-col-md-offset3 ，即代表在 中型桌面屏幕下，让该列向右偏移3个列宽度。
<div class="layui-row">
	<div class="layui-col-md4">
		<div style="background-color: red">4</div>
	</div>
			       
	<!--向右移4列-->
	<div class="layui-col-md4 layui-col-md-offset4">
		<div style="background-color: blue">向右移4列</div>
	</div>
</div>

列嵌套

理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。

<div class="layui-row">
	<!-- 大的盒子占6列 -->
	<div class="layui-col-md6">
		<div style="background-color: red">
		 	<div class="layui-row">
		    	<!-- 嵌套列 -->
		        <div class="layui-col-md3" style="background-color: green;">嵌套1</div>
		        <div class="layui-col-md5" style="background-color: indianred;">嵌套2</div>
		        <div class="layui-col-md2" style="background-color: greenyellow;">嵌套3</div>
		     </div>
		 </div>
	</div>
</div>

按钮

  • 向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。
  • 通过追加格式为***layui-btn-{type}***的class来定义其它按钮风格。

基础按钮

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>

主题

<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-primary">原始按钮</button>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>

尺寸

语法：layui-btn-{type} 其中 type:lg sm xs fluid

<button class="layui-btn layui-btn-primary layui-btn-lg">大型原始按钮</button>
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-sm">小型警告按钮</button>
<button class="layui-btn layui-btn-xs">迷你按钮</button>
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

圆角

语法：layui-btn-radius

<button class="layui-btn layui-btn-radius">默认圆角按钮</button>    
<button class="layui-btn layui-btn-primary layui-btn-radius">原始圆角按钮</button>    
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭圆角按钮</button>    
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色圆角按钮</button>    
<button class="layui-btn layui-btn-danger layui-btn-radius">警告圆角按钮</button>    
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用圆角按钮</button>

搭配组合

<button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">大型百搭</button>
<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">小型警告</button>
<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled">迷你禁止</button>

图标

  • 对 i 标签 设定 class="layui-icon"
  • 然后对元素加上图标对应的 font-class
  • 内置图标一览表：https://www.layui.com/doc/element/icon.html
<i class="layui-icon layui-icon-heart-fill"></i>

定义它的颜色或者大小

<i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>

与文字多种组合

<button type="button" class="layui-btn">
	<i class="layui-icon layui-icon-down layui-font-12"></i> 按钮
</button>
			 
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
	<i class="layui-icon layui-icon-left"></i>
</button>

<button type="button" class="layui-btn">			
	<i class="layui-icon">&#xe608;</i> 添加		
</button>        
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">			
	<i class="layui-icon">&#x1002;</i> 刷新		
</button>        
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm">			
	<i class="layui-icon layui-icon-heart"></i> 关注		
</button>

导航

  • 导航一般应用于头部和侧边，是整个网页画龙点晴般的存在
  • 依赖加载模块：element

引入资源

<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<script src="layui-v2.6.8/layui/layui.js"></script>

依赖加载模块

<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use('element', function(){
	var element = layui.element;
	});
</script>

水平导航

  • layui-nav 表示水平导航
  • layui-nav-item表示导航子项
  • layui-this表示当前被选中的项
  • layui-nav-child表示是二级菜单
<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child"> <!-- 二级菜单 -->
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<a href="javascript:;">解决方案</a>
<a href="">解决方案</a>

垂直导航

class=“layui-nav layui-nav-tree”

侧边导航

class=“layui-nav layui-nav-tree layui-nav-side”

内置了图片和徽章

  • layui-badge可显示数字9
  • layui-badge-dot可显示点
  • layui-nav-img可显示图片
<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item">
    <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>
</ul>

主题

//如定义一个墨绿背景色的导航
<ul class="layui-nav layui-bg-green" lay-filter="">
  …
</ul>

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

面包屑

<span class="layui-breadcrumb" lay-separator="|">
  <a href="">娱乐</a>
  <a href="">八卦</a>
  <a href="">体育</a>
  <a href="">搞笑</a>
  <a href="">视频</a>
  <a href="">游戏</a>
  <a href="">综艺</a>
</span>

选项卡

  • 导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。
  • 依赖加载模块：element
<!-- 默认风格 .layui-tab-->
<div class="layui-tab">
<!-- 设置选项卡标题 .layui-tab-title -->
	<ul class="layui-tab-title">
		<li>网站设置</li>
		<li>用户管理</li>
		<li class="layui-this">权限分配</li>
		<li>商品管理</li>
		<li>订单管理</li>
	</ul>
	<!-- 设置选项卡的内容 .layui-tab-content -->
	<div class="layui-tab-content">
		<div class="layui-tab-item">内容1</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>
  • layui-tab 默认风格
  • layui-tab-brief 简洁风格
  • layui-tab-card 卡片风格

带删除Tab lay-allowClose=“true”

表格

​ class=“layui-table”
​ 常用属性
​ lay-even 如果设置了该属性，则可以显示隔行换色的效果
​ lay-skin 设置表格边框风格
​ line （行边框风格）
​ row （列边框风格）
​ nob （无边框风格）
​ lay-size 设置表格的尺寸
​ sm （小尺寸）
​ lg （大尺寸）

<table class="layui-table">
    <colgroup>
        <!-- 第一列宽 150px 第二列宽300px 第三列宽自适应100% -->
        <col width="150">
        <col width="300">
        <col>
    </colgroup>
    <!-- thead 标签表示表格的头部区域,其内部必须拥有 tr 标签, tr标签一般位于第一行 -->
    <thead>
        <!-- tr用于定义表格中的行,必须嵌套在 table 中 -->
        <tr>
            <!-- th 用于定义表格中的表头,必须嵌套在 tr 中 -->
            <th>昵称</th>
            <th>加入时间</th>
            <th>签名</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>贤心</td>
            <td>2016-11-29</td>
            <td>人生就像是一场修行</td>
        </tr>
        <tr>
            <td>许闲心</td>
            <td>2016-11-28</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
        </tr>
    </tbody>
</table>

表单

  1. 引入的资源
  2. 依赖加载模块
<!-- 加载模块 -->
<script type="text/javascript">
    // 加载form模块
    layui.use("form",function(){
        var form = layui.form;
    });		
</script>

3.在一个容器中设定 class="layui-form" 来标识一个表单元素块

<form class="layui-form" action="">
...
</form>

4.基本的行区块结构，它提供了响应式的支持

  • 给 div 添加 class="layui-form-item" 代表”行“
  • 给 label 添加 class="layui-form-label" 代表”区“
  • 给 div 添加 class="layui-input-inline" 代表”块“

输入框

<form action="" class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">标题区域</label>
		<div class="layui-input-inline">
			<!--输入框-->
			<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" 
				autocomplete="off" class="layui-input"/>
		</div>
	</div>
			
	<div class="layui-form-item">
		<label class="layui-form-label">密码框区域</label>
		<div class="layui-input-inline">
			<input type="password" name="password" required lay-verity="required" placeholder="请输入密码"
				autocomplete="off" class="layui-input"/>
		</div>
	</div>		
</form>
常用属性描述
required浏览器固定的必填字段
lay-verify需要验证的类型(值为 required 的话表示必填项)
class=“layui-input”提供的通用的样式(layui.css提供的通用CSS类)
class=“layui-input-block”占据全部宽度
class=“layui-input-inline”占据部分宽度
placeholder当文本框为空时，默认显示的文本信息
autocomplete表单元素是否自动填充(当浏览器中缓存中存在相同name属性的值时，会填充)

下拉选择框

  • 通过selected属性设置默认选中项
  • 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
<div class="layui-form-item">
	<label class="layui-form-label">城市</label>
	<div class="layui-input-inline">
		<select name="city" lay-verify="required">
			<option value="">请选择一个城市</option>
			<option value="010">北京</option>
			<option value="021" selected>上海</option>
			<option value="0571" disabled>杭州</option>
		</select>
	</div>
</div>
  • optgroup 标签给select分组：
<select name="quiz">
  <option value="">请选择</option>
  
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜欢的老师">你最喜欢的老师？</option>
  </optgroup>
</select>
  • 通过设置lay-search属性开启搜索匹配功能
<div class="layui-form-item">
	<select name="city" lay-verify="" lay-search>
		<option value="">请选择</option>
		<option value="010">layer</option>
		<option value="021">form</option>
		<option value="05771">layui</option>
	</select>
</div>

复选框

  • 通过设置 title 属性设置自定义文本(如果不需要显示文本，则不设置 title 属性)
  • 通过 checked 属性设置被选中的项
  • 通过·lay-skin 属性设置复选框的样式效果(lay-skin="primary" 表示原始效果)
  • 通过 disabled 属性禁用元素
<div class="layui-form-item">
	<label class="layui-form-label">爱好</label>
	<div class="layui-input-block">
		<!--默认效果-->
		<input type="checkbox" name="hobby" title="唱歌" checked value="sing"/>
		<input type="checkbox" name="hobby" title="跳舞" value="dance"/>
		<input type="checkbox" name="hobby" title="禁用" disabled />
		<br>
		<!--原始效果-->
		<input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" checked value="sing" />
		<input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance" />
		<input type="checkbox" name="hobby" title="禁用" lay-skin="primary" disabled />
	</div>
</div>

开关

  • 将复选框，设置 lay-skin="switch" 形成开关风格
  • 通过 lay-text="打开的值|关闭的值" 来设定开关的两种状态的文本，通过| 分隔
  • 通过 checked 属性设置默认打开状态
  • 通过 disabled 属性禁用开关
  • 通过 value 属性设置选中的值
<div class="layui-form-item">
	<label class="layui-form-label">开关</label>
	<div class="layui-input-block">
		<input type="checkbox" name="aa" lay-skin="switch" />
		<input type="checkbox" name="bb" lay-skin="switch" checked />
		<input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off" />
		<input type="checkbox" name="dd" lay-skin="switch" checked lay-text="打开|关闭" value="打开" />
		<input type="checkbox" name="ee" lay-skin="switch" lay-text="打开|关闭" disabled />
	</div>
</div>

单选框

  • 通过 checked 设置默认选中项
  • 通过 disabled 属性禁用单选框
  • 通过 value 属性设置选中的值
<div class="layui-form-item">
	<label class="layui-form-label">性别</label>
	<div class="layui-input-block">
		<input type="radio" name="sex" value="nam" title="男" />
		<input type="radio" name="sex" value="nv" title="女" checked />
		<input type="radio" name="sex" value="" title="中性" disabled />
	</div>
</div>

文本域

  • 给 textarea 标签添加class="layui-textarea"
<div class="layui-form-item">
	<label class="layui-form-label">简介</label>
	<div class="layui-input-inline">
		<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea">
			...			
		</textarea>
	</div>
</div>

组装行内表单

行内表单：表单元素在一行显示（div 盒子也不会全部占完宽度）

  • 给 div 设置 class="layui-inline" ： 定义外层行内
  • 给 div 设置 class="layui-input-inline" ：定义内层行内
<div class="layui-form-item">
	<!--定义外层行内 layui-inline-->
	<div class="layui-inline">
		<!--定义内层行内 layui-input-inline-->
		<div class="layui-input-inline" style="width:100px;">
			<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input" />
		</div>
		<div class="layui-form-mid">-</div>
		<div class="layui-input-inline" style="width:100px;">
			<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input" />
		</div>
	</div>
				
	<!--定义外层行内-->
	<div class="layui-inline">
		<label class="layui-form-label">密码</label>
		<!--定义内层行内-->
		<div class="layui-input-inline" style="width:100px;">
			<input type="password" name="" autocomplete="off" class="layui-input" />
		</div>
	</div>
				
</div>

表单方框风格

<form class="layui-form layui-form-pane" action="">
	<div class="layui-form-item" pane>
	<label class="layui-form-label">单选框</label>
		<div class="layui-input-block">
			<input type="radio" name="sex" value="男" title="男">
			<input type="radio" name="sex" value="女" title="女" checked>
		</div>
	</div>
</form>

最后是 提交和充值按钮

<div class="layui-form-item">
	<div class="layui-btn" lay-submit lay-filter="formDemoe">立即提交</div>
	<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>

弹出层

layer可以独立使用，也可以通过LayUI模块使用

两种使用方式

作为独立组件使用

  • 首先去layer独立版本官网下载组件包
  • 下载完成后解压，复制到目录
  1. layer.js 来自(layer\layer.js)
  2. layer.css 来自(layer\theme\default\layer.css)
  3. jQuery1.8以上任意版本
  • 引入资源
<!-- 引入 layer.css -->
<link rel="stylesheet" href="layer/layer.css" />
<!--引入jquery.js-->
<script src="js/jquery-3.5.1.js"></script>
<!-- 引入layer.js -->
<script src="layer/layer.js"></script>
  • 开始使用
<script type="text/javascript">
	layer.msg('Hello');
</script>

使用模块化

  • 引入资源
<!-- 引入 layui.css -->
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<!-- 引入 layui.js -->
<script src="layui-v2.6.8/layui/layui.js"></script>
  • 在script中使用layui.use()加载模块 依赖模块：layer
<script type="text/javascript">
	layui.use("layer",function(){
        var layer=layui.layer;
		layer.msg('Hello world');
	})		
</script>

基础参数

基本案例，三大参数

<script type="text/javascript">
	layui.use("layer",function(){
	var layer=layui.layer;
	layer.open({
		type:0,
		title:"系统消息",
		//content可以传入任意的文本或html
		content:"Hello" 
			});
		})
</script>

type-及时层类型

  • 类型Number,默认为0

  • layer提供5种层类型。可传入的值有
    ​ 0 信息框，默认

    ​ 1 页面层

    ​ 2 iframe层

    ​ 3 加载层

    ​ 4 tips层

    若你采用*layer.open({type: 1})*方式调用，则type为必填项（信息框除外）

title-标题

  • 类型String/Array/Boolean，默认为信息

  • 若不想显示标题，则title:false

  • title支持三种类型

    ​ 若传入的是普通的字符串，如：title:'我是标题' ，那么只会改变标题文本；

    ​ 若需要自定义标题区域样式，title:['文本','color:red;font-size: 18px;']，数组第二项可以写任意css 样式

    ​ 若不想显示标题栏，title: false

content内容

类型：String/DOM/Array，默认 : " "

页面层 ,就是信息提示
iframe 弹出来的是页面,例如百度页面
tips 就是一个信息提示小框

layer.open({
	type:1,
	title:"系统消息",
	content:"<div style='height:200px;width:200px'>Hello</div>"
});

layer.open({
	type:2,
	title:"系统消息",
	content:"https://www.baidu.com/"
});
  • content如不出现滚动条，则content:[‘url’,‘no’]
  • content如要固定宽高，则content:‘url’,area:‘500px’

area宽高

  • 类型： String/Array，默认为auto

  • 在默认状态下，layer是宽高都自适应的

    ​ 但当你只想定义宽度时，你可以 area: '500px'，高度仍然是自适应的

    ​ 当你宽高都要定义时，你可以 area: ['500px', '300px']

<span>内容1</span>
<span id="sp">内容2</span>
<span>内容3</span>
<span>内容4</span>
	
<script type="text/javascript">
	layui.use("layer",function(){
		var layer=layui.layer;
			/* tips层 */
			 layer.open({
			  	type: 4,
			     content: ['内容', '#sp'] //数组第二项即吸附元素选择器或者DOM
		});	 
	});
</script>

icon图标

  • 类型：Number，默认：-1(信息框) / 0(加载层)
  • 信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6
  • 如果是加载层，可以传入0-2
script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;
            //加载层
            layer.alert('酷毙了', {
                icon: 1				// 0 ~ 6 均可填
            });
        })
</script>

 <script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;
            //信息层
            layer.msg('不开心。。', {
                icon: 5				// -1 ~ 6 均可填
            });
        })
 </script>

<script type="text/javascript">
	layui.use('layer', function() {
     	var layer = layui.layer;
			// 加载层
            layer.load(1); 		// 0 ~ 2 均可填
        })
</script>

btn按钮

  • 类型：String/Array，默认 ‘确认’
  • 信息框(type = 0)模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。
  • 当您只想自定义一个按钮时，你可以 btn: ‘我知道了’，当你要定义两个按钮时，你可以btn: [‘yes’, ‘no’]
  • 当然，你也可以定义更多按钮，比如：btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推
<body>
    <script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;
            layer.msg('你愿意和我做朋友么？', {
                time: 0, //第一个弹出层不自动关闭(因为默认弹出层会5s自动关闭)
                btn: ['当然愿意', '狠心拒绝'], // 按钮
                yes: function(index) {
                    layer.close(index); // 关闭当前弹出框
                    layer.msg('新朋友，你好！', {
                        icon: 6, // 图标
                        btn: ['开心', '快乐']
                    });
                }
            });
        })
    </script>
</body>

time自动关闭所需毫秒

  • 类型：Number，默认为0
  • 默认不会关闭。当你想关闭时，可以 time:5000 ，即代表 5 s 后自动关闭

offset - 坐标

  • 类型：String/Array，默认：垂直水平居中
  • offset默认情况下不用设置。但如果你不想垂直水平居中

核心方法

原始核心方法

  • layer.open(options)
<body>
    <script type="text/javascript">
        layui.use('layer', function() {
            var layer = layui.layer;

            var index = layer.open({
                content: 'test'
            });
            console.log(index);
            //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。

        })
    </script>
</body>

普通信息框

  • layer.alert(content, options, yes)
<script type="text/javascript">
    layui.use('layer', function() {
        var layer = layui.layer;

        //eg1
        //layer.alert('只想简单的提示');
        //eg2
        layer.alert('加了个图标', {
            icon: 1
        });
    })
</script>

询问框

  • layer.confirm(content, options, yes, cancel)
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
  //do something
  
  layer.close(index);
});

提示框

layer.msg(content, options, end)

layer.msg('关闭后想做些什么', function(){
  //do something
});

加载层

layer.load(icon, options)

var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒

日期与时间选择

  • 引入资源
<!-- 引入 layui.css -->
<link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css" />
<!-- 引入 layui.js -->
<script src="layui-v2.6.8/layui/layui.js"></script>
  • 在 script 中使用 layui.use() 加载模块 ;依赖模块：laydate
<body>
    <!-- 用一个容器元素放我们的日期时间选择器 -->
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date1" />
    </div>
    <script type="text/javascript">
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            // 加载 laydate 实例
            laydate.render({
                elem: "#date1" //绑定id为date1的元素
            })
        })
    </script>
</body>

基础参数选项

  • 通过核心方法：laydate.render(options) 来设置基础参数

elem绑定元素

  • 类型：String/DOM ，默认值：无
  • 必填项，用于执行绑定日期渲染的元素，值一般为选择器，或DOM对象
<script>
	layui.use('laydate',function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test' 
       //或 elem: document.getElementById('test')、elem: lay('#test') 等
        })
    })
</script>

type控件选择类型

  • 类型：String ，默认值：date
  • 用于单独提供不同的选择器类型，可选值如下表
type可选值名称用途
year年选择器只提供年列表选择
month年月选择器只提供年、月选择
date日期选择器可选择：年、月、日。type默认值，一般可不填
time时间选择器只提供时、分、秒选择
datetime日期时间选择器可选择：年、月、日、时、分、秒
<body>
    <!-- 用一个容器元素放我们的日期时间选择器 -->
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date1" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date2" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date3" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date4" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date5" />
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date6" />
    </div>

    <script type="text/javascript">
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            // 加载 laydate 实例
            laydate.render({
                elem: "#date1", //绑定id为date1的元素
            });

            laydate.render({
                elem: "#date2", //绑定id为date2的元素
                type: "year", // 年选择器
            });

            laydate.render({
                elem: "#date3", //绑定id为date3的元素
                type: "month" // 年月选择器
            });

            laydate.render({
                elem: "#date4", //绑定id为date4的元素
                type: "date" // 年月日选择器
            });

            laydate.render({
                elem: "#date5", //绑定id为date5的元素
                type: "time" // 时间（时分秒）选择器
            });

            laydate.render({
                elem: "#date6", //绑定id为date6的元素
                type: "datetime" // 年月日时分秒选择器
            });

        })
    </script>
</body>

format自定义格式

  • 类型：String，默认值：yyyy-MM-dd
  • 通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：
格式符说明
yyyy年份，至少四位数。如果不足四位，则前面补零
y年份，不限制位数，即不管年份多少位，前面均不补零
MM月份，至少两位数。如果不足两位，则前面补零。
M月份，允许一位数。
dd日期，至少两位数。如果不足两位，则前面补零。
d日期，允许一位数。
HH小时，至少两位数。如果不足两位，则前面补零。
H小时，允许一位数。
mm分钟，至少两位数。如果不足两位，则前面补零。
m分钟，允许一位数。
SS秒数，至少两位数。如果不足两位，则前面补零。
S秒数，允许一位数。
  • 通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示：
格式示例值
yyyy-MM-dd HH:mm:ss2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒2017年08月18日 20时08分08秒
yyyyMMdd20170818
dd/MM/yyyy18/08/2017
yyyy年M月2017年8月
M月d日8月18日
北京时间：HH点mm分北京时间：20点08分
yyyy年的M月某天晚上，大概H点2017年的8月某天晚上，大概20点
<body>
    <!-- 用一个容器元素放我们的日期时间选择器 -->
    <div class="layui-inline">
        <input type="text" class="layui-input" id="date1" />
    </div>

    <script type="text/javascript">
        // 加载laydate模块
        layui.use('laydate', function() {
            var laydate = layui.laydate;
            //自定义日期格式
            laydate.render({
                elem: '#date1',
                format: 'yyyy/MM月dd日' // yyyy年MM月dd日可任意组合
            });
        });
    </script>
</body>

value初始值

  • 类型：String，默认值：new Date()
  • 支持传入符合format参数设定的日期格式字符，或者 new Date()
<script type="text/javascript">
    // 加载laydate模块
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        // 传入符合format格式的字符给初始值
        laydate.render({
            elem: '#date1',
            value: '2018-08-18' //必须遵循format参数设定的格式
        });
        // 传入Date对象给初始值
        laydate.render({
            elem: '#date2',
            value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
        });
    });
</script>

lang语言

  • 类型：String，默认：cn
  • 内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。
<script type="text/javascript">
    // 加载laydate模块
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1',
            lang: 'en'
        });
    });
</script>

theme主题

  • 类型：String ，默认值：default
  • 内置了多种主题，theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
<script type="text/javascript">
    // 加载laydate模块
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1',
            theme: 'molv'
        });

    });
</script>

calendar公历节日

  • 类型：Boolean，默认值：false
  • 内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示
<script type="text/javascript">
    // 加载laydate模块
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1',
            lang: 'cn',
            calendar: true
        });

    });
</script>

分页

  • 模块加载名称：laypage
  • laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染
<body>
    <div id="page"></div>
    <script type="text/javascript">
        // 加载laypage模块
        layui.use('laypage', function() {
            var laypage = layui.laypage;
            // 加载laypage实例
            laypage.render({
                elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
                count: 100, // 总数量，一般是从服务器获取
            });

        });
    </script>
</body>

基础参数选项

  • 通过核心方法：laypage.render(options) 来设置基础参数

elem绑定元素

  • 类型：String/Object，比填项

  • elem 指向存放分页的容器，值可以是 容器 ID、DOM对象

    ​ elem: ‘id’注意：这里不能加#` 号

    ​ elem: document.getElementById('id')

count数据总数

  • 类型：Number，必填项
  • 数据总数，一般通过服务端得到
  • count: 100

limit每页显示条数

  • 类型：Number，默认值 10
  • laypage将会借助 count 和 limit 计算出分页数。
<body>
    <div id="page"></div>

    <script type="text/javascript">
        // 加载laydate模块
        layui.use('laypage', function() {
            var laypage = layui.laypage;
            // 加载laypage实例
            laypage.render({
                elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
                count: 100, // 总数量，一般是从服务器获取
                limit: 5, // 每页显示的数量
            });
        });
    </script>
</body>

layout自定义排版

  • 类型：Array，默认值：[‘prev’, ‘page’, ‘next’]
  • 自定义排版，可选值有：
    • count ：总条目输出区域
    • limit：条目选项区域
    • prev：上一页区域
    • page：分页区域
    • next：下一页区域
    • refresh：页面刷新区域(layui 2.3.0新增)
    • skip：快捷跳页区域
<body>
    <div id="page"></div>

    <script type="text/javascript">
        // 加载laydate模块
        layui.use('laypage', function() {
            var laypage = layui.laypage;
            // 加载laypage实例
            laypage.render({
                elem: "page", // elem属性绑定的是容器的ID属性值，不需要加#
                count: 100, // 总数量，一般是从服务器获取
                layout: ['prev', 'page', 'next', 'limit', 'skip', 'count', 'refresh']
            });
        });
    </script>
</body>

limits每页条数的选择

  • 类型：Array，默认值：[10,20,30,40,50]
  • 如果 layout 参数开启了 limit，则会出现每页条数的select下拉选择框

groups连续出现的页码个数

  • 类型：Number，默认值为5
  • 连续出现的页面个数，就是分页区域省略号…之前显示的页面个数

jump切换分页的回调

  • 当分页被切换时触发，函数返回两个参数：
  • obj（当前分页的所有选项值）、
  • first（是否首次，一般用于初始加载的判断）
jump: function(obj, first) {
    // obj包含了当前分页的所有参数，比如：
    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数
    //首次不执行
    if (!first) {
    	//do something
    }
}

数据表格

  • 支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
  • 模块加载名称：table
<body>
    <!-- 准备容器（标签），设置id属性值 -->
    <div id="demo"></div>

    <script type="text/javascript">
        // 加载table模块
        layui.use('table', function() {
            var table = layui.table;
            // 加载table实例
            table.render({
                elem: "#demo", //elem属性用来绑定容器的id属性值
                url: "js/user.json", // 数据接口
                cols: [
                    [{
                        field: 'id',
                        title: '用户编号',
                        sort: true,
                        width: 120
                    }, {
                        field: 'username',
                        title: '用户姓名',
                        width: 100
                    }, {
                        field: 'sex',
                        title: '性别',
                        width: 100,
                        sort: true
                    }, {
                        field: 'city',
                        title: '城市',
                        width: 100
                    }, {
                        field: 'sign',
                        title: '签名'
                    }]
                ],
            })

        })
    </script>
</body>
  • 注意：上面有一个数据接口 url，通常是从服务器获取。我们这里先本地模拟一些json数据传入
{
	"code": 0,
	"msg": "",
	"count": 50,
	"data": [{
			"id": 10000,
			"username": "user-0",
			"sex": "女",
			"city": "城市-0",
			"sign": "签名-0"			
		},
		{
			"id": 10001,
			"username": "user-1",
			"sex": "男",
			"city": "城市-1",
			"sign": "签名-1"
		},
		{
			"id": 10002,
			"username": "user-2",
			"sex": "女",
			"city": "城市-2",
			"sign": "签名-2"
		},
		{
			"id": 10003,
			"username": "user-3",
			"sex": "女",
			"city": "城市-3",
			"sign": "签名-3"
		},
		{
			"id": 10004,
			"username": "user-4",
			"sex": "男",
			"city": "城市-4",
			"sign": "签名-4"
		}

	]
}

绑定容器、设置数据接口、在表头设定对应的字段

三种初始化渲染方式

方法渲染

1.将基础参数的设定放在了JS代码中，且原始的table标签只需要一个选择器

<div id="demo"></div>

2.渲染表格

layui.use('table',function(){
	var table = layui.table;
    table.render({
                elem: "#demo",
                url: 'js/user.json', // 数据接口
                height: 315, // 容器高度
                page:true, // 开启分页
                cols: [[  // 设置表头
                    {field: 'id', title: 'ID'},
                    {field: 'username', title: '用户名'},
                    {field: 'sex', title: '性别'}
                ]]
            });
        });

注: table.render()方法返回一个对象: var tableIns = table.render(options)，可用于对当前表格进行"重载"等操作。

自动渲染

在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需写初始的渲染方法。我们需要关注的是以下三点

  • 带有 class="layui-table" 的 <table> 标签
  • 对标签设置属性 lay-data=" " 用于配置一些基础参数
  • 在 <th> 标签中设置属性 lay-data=" " 用于配置表头信息。
<body>
    <table class="layui-table" lay-data="{height:315, url:'js/user.json', page:true, id:'test'}" lay-filter="test">
        <thead>
            <tr>
                <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                <th lay-data="{field:'username', width:80}">用户名</th>
                <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">
        layui.use('table', function() {
            var table = layui.table;

        })
    </script>
</body>

elem绑定元素

  • 类型：String/DOM
  • 指定原始 table 容器的选择器或 DOM，方法渲染方式为必填

cols设置表头

  • 类型：Array
  • 设置表头，值是一个二维数组。表头参数设定在数组内，表头部分参数如下：
参数类型说明示例值
fieldString设定字段名。非常重要，与表格数据列要一一对应usename
titleString设定标题名称用户名
widthNumber/String设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比。200/30%
typeString设定列类型。可选值有：
normal（常规列，无需设定）
checkbox（复选框列）
radio（单选框列，layui 2.4.0 新增）
numbers（序号列）
space（空列）		任意一个可选值
sortBoolean是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。true
unresizeBoolean是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。false
editString单元格编辑类型（默认不开启）目前只支持：text（输入框）text

url异步数据参数

  • 还是一句话，不必记忆，会查会用会修改即可

page开启分页

  • 类型：Boolean/Object，开启分页(默认为 false)
  • 支持传入一个对象，里面可包含 laypage 组件所有支持的参数(jump、elem除外)
<body>
    <!-- 准备一个容器,设置id属性值 -->
    <table id="demo"></table>
    <script type="text/javascript">
        // 加载 table 模块
        layui.use('table', function() {
            var table = layui.table;
            // 加载table 实例
            table.render({
                elem: "#demo",      // elem属性用来绑定容器的 id 属性值
                url: "js/user.json",// 数据接口
                cols:[[
                    // 设置序列号
                    {field:'aa',type:"numbers"},
                    // 设置复选框列
                    {field:'bb',type:"checkbox"},
                    {field:'id',title:'用户编号',sort:true,width:120},
                    {field:'username',title:'用户姓名',width:100},
                    {field:'sex',title:'性别',width:100,sort:true},
                    {field:'city',title:'城市',width:100},
                    {field:'sign',title:'签名'}
                ]],
                // 开启分页
                page: true
            })
        })
    </script>
</body>
  • {field:‘aa’,type:“numbers”} 序列号码
  • {field:‘bb’,type:“checkbox”} 复选框列

toolbar开启表格头部工具栏

类型：String/DOM/Boolean，开启表格头部工具栏，该参数支持四种类型值

  • toolbar: ‘#toolbarDemo’ 指向自定义工具栏模板选择器
  • toolbar: ‘
    xxx
    ’ 直接传入工具栏模板字符
  • toolbar: true 仅开启工具栏，不显示左侧模板
  • toolbar: ‘default’ 让工具栏左侧显示默认的内置模板
<body>
    <div id="demo"></div>

    <!-- 表格工具栏 -->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <!-- lay-event 给元素绑定事件名 -->
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
                获取选中行数据
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
                获取选中数目
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">
                验证是否全选
            </button>
        </div>
    </script>

    <!-- 表头工具栏 -->
    <script type="text/html" id="barDemo">
        <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>
    </script>

    <script type="text/javascript">
        layui.use('table', function() {
            var table = layui.table;

            table.render({
                elem: "#demo",
                url: 'js/user.json', // 数据接口
                cols:[[
						// 设置序列号列
						{field:'aa',type:"numbers"},
						// 设置复选框列
						{field:'aa',type:"checkbox"},
						{field:'id',title:'用户编号',sort:true,width:120,hide:true},
						{field:'username',title:'用户姓名',width:100,edit:'text'},
						{field:'sex',title:'性别',width:100,sort:true},
						{field:'city',title:'城市',width:100},
						{field:'sign',title:'签名',edit:'text'},
						// 设置表头工具栏
						{field:"操作",toolbar:"#barDemo"}
					]],
					// 开启分页
					page:true,
					// 设置表格工具栏
					toolbar:"#toolbarDemo"
            })
        })
    </script>
</body>

defaultTooBlar头部工具栏右侧图标

  • 类型：Array，默认值：[“filter”,“exports”,“print”]
  • 该参数可自由配置头部工具栏右侧的图标按钮，值为一个数组，支持以下可选值：
    • filter: 显示筛选图标
    • exports: 显示导出图标
    • print: 显示打印图标

监听头工具栏事件

点击头部工具栏区域设定了属性为 lay-event="" 的元素时触发

  • 语法：table.on(‘event(filter)’,callback)
  • event 为内置事件名，filter 为容器 lay-filter 设定的值

回调函数返回一个 object 参数

  • obj.config对象中可以获取id属性值，即表示当前容器的ID属性值
  • obj.event 对象中可以获取 事件名
  • table.checkStatus(obj.config.id) 获取当前表格被选中记录对象，返回数组
<body>
    <div id="demo" lay-filter="test"></div>

    <!-- 表格工具栏 -->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <!-- lay-event 给元素绑定事件名 -->
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
                获取选中行数据
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
                获取选中数目
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">
                验证是否全选
            </button>
        </div>
    </script>

    <!-- 表头工具栏 -->
    <script type="text/html" id="barDemo">
        <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>
    </script>

    <script type="text/javascript">
        layui.use('table', function() {
            var table = layui.table;

            table.render({
                elem: "#demo",
                url: 'js/user.json', // 数据接口
                cols: [
                    [
                        // 设置序列号列
                        {
                            field: 'aa',
                            type: "numbers"
                        },
                        // 设置复选框列
                        {
                            field: 'aa',
                            type: "checkbox"
                        }, {
                            field: 'id',
                            title: '用户编号',
                            sort: true,
                            width: 120,
                            hide: true
                        }, {
                            field: 'username',
                            title: '用户姓名',
                            width: 100,
                            
                        }, {
                            field: 'sex',
                            title: '性别',
                            width: 100,
                            sort: true
                        }, {
                            field: 'city',
                            title: '城市',
                            width: 100
                        }, {
                            field: 'sign',
                            title: '签名',
                            
                        },
                        // 设置表头工具栏
                        {
                            field: "操作",
                            toolbar: "#barDemo"
                        }
                    ]
                ],
                // 开启分页
                page: true,
                // 设置表格工具栏
                toolbar: "#toolbarDemo"
            })

            /**
             * 头监听事件
             * 	语法：
             * 		table.on('toolbar(demo)',function(obj){
                 
                    });
                    注:demo表示的是容器上设置的lay-filter属性值
                */
            
            table.on('toolbar(test)', function(obj) {
                // console.log(obj);
                // obj.config对象中可以获取id属性值，即表示当前容器的ID属性值，也就是demo 
                // 获取当前表格被选中记录对象，返回数据
                var checkStatus = table.checkStatus(obj.config.id);
                console.log(checkStatus);
                // 获取事件名
                var eventName = obj.event;
                // 判断事件名，执行对应的代码
                switch (eventName) {
                    case "getCheckData":
                        // 获取被选中的记录的数组
                        var arr = checkStatus.data;
                        // 将数组解析成字符串
                        layer.alert(JSON.stringify(arr));
                        break;
                    case "getCheckLength":
                        // 获取被选中的记录的数组
                        var arr = checkStatus.data;
                        layer.msg("选中了" + arr.length + "条记录！")
                        break;
                    case "isAll":
                        // 通过isAll属性判断是否全选
                        var flag = checkStatus.isAll;
                        var str = flag ? '全选' : '未全选';
                        layer.msg(str);
                        break;
                    case "LAYTABLE_TIPS":
                        layer.alert("这是一个自定义的图标按钮");
                        break;
                }
            });

        })
    </script>
</body>
  • lay-filter=“test”
  • table.on(‘toolbar(test)’, function(obj) {｝

监听行工具栏事件

语法：table.on(‘tool(filter)’,callback{})

  • filter 为容器 lay-filter 设定的值

回调函数返回一个 object 参数

  • obj.data 获取当前行数据
  • obj.event 获取 lay-event 对应的值 (也可以是表头 event 参数对应的值)
/**
  * 监听行工具栏事件
  */
table.on('tool(test)', function(obj) {
	// 得到当前操作行的相关信息
    var tr = obj.data;
    console.log(tr);
    // 得到事件名
    var eventName = obj.event;

    // 判断事件名，执行对应的方法
    if (eventName == 'del') { // 删除
    	// 确认框
    	layer.confirm("您确认要删除吗？", function(index) {
    		// 删除指定tr  del()
     		obj.del();
        	// 关闭弹出层（index是当前弹出层的下标）
        	layer.close(index);
     	});
     } else if (eventName == 'edit') { // 编辑
     	 // 输出框
          layer.prompt({
          		// 表单元素的类型 0=文本框  1=密码框 2=文本域
                formType: 0,
                value: tr.username // 设置输入框的值
                }, function(value, index) {
                // 修改指定单元格的值
                // value表示输入的值
                obj.update({
                    username: value
                  });
                  // 关闭弹出层
                  	layer.close(index);
                  });
                }
 });

监听单元格编辑

监听单元格编辑之前要先打开单元格的编辑

  • edit 类型String，单元格编辑类型（默认不开启）目前只支持：text（输入框）

语法：table.on(‘edit(filter)’,callback)

  • filter 为容器 lay-filter 设定的值

单元格被编辑，且值发生改变时触发，回调函数返回一个 object 参数

  • obj.value 获取修改后的值
  • obj.filed 获取编辑的字段名
  • obj.data 获取所在行的所有相关数据

监听单元格编辑事件

  • 表头设置edit属性， 单元格编辑类型（默认不开启）目前只支持：text（输入框）
table.on('edit(test)', function(obj) {
	console.log(obj);
    // 获取修改后的值
    var value = obj.value;
   	// 得到当前修改的tr对象
    var data = obj.data;
    // 得到修改的字段名
    var field = obj.field;
    layer.msg("【ID:" + data.id + "】的" + field + "字段的值修改为：" + value);
});

数据表格重载

语法：table.reload(ID,options,deep)

  • 参数 ID 即为基础参数id对应的值
  • 参数 options 即为各项基础参数
  • 参数 deep：是否采用深度重载（即参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认 false。注意：deep 参数为 layui 2.6.0 开始新增。

1.添加一个搜索框

<div class="demoTable">
   搜索ID：
   <div class="layui-inline">
    	<input class="layui-input" name="id" id="demoReload" autocomplete="off">
   </div>
   <button class="layui-btn" id="searchBtn">搜索</button>
</div>

2.获取一个jquery对象

var $ = layui.jquery; // 获取jquery对象

3.给指定元素绑定事件

$(document).on('click', '#searchBtn', function(data) {
	// 获取搜索文本框对象
	var sreach = $("#demoReload");
	// 调用数据表格的重载方法  table.reload(ID, options)
	table.reload('demo', {
		where: { // 设置需要传递的参数
			    id: sreach.val(),
			     name: "zhangsan"
			   },
	page: {
	// 表示让条件查询从第一页开始；如果未设置则从当前页开始查询，此页前面的所有数据不纳入条件筛选
		curr: 1 // 从第一页开始
		}
	});
});
林烈涛
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui几个功能
qq_41912366的博客
01-10 389
后台布局(导航栏): <!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>layui-demo</title&g
前端LayUI框架快速上手详解(一)
2401_83915664的博客
03-29 1215
默认圆角按钮 原始圆角按钮 百搭圆角按钮 暖色圆角按钮 警告圆角按钮 禁用圆角按钮。侧边导航: 支持1px-30px区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔。属性开启禁用，可以设置 select 和 option 标签(表示禁用下拉框和禁用下拉选项)| lay-even | 无 | 用于开启隔行背景，可与其他属性一起使用 |
如何快速上手LayUI
dix85228的博客
04-10 270
我本身是一个写后台的程序员，对于前台不是很感冒。每每遇到一些前台的问题就容易让我头疼，需要花很长的时间来调节一些样式。这里我推荐使用LayUI这款前台框架，对于一些不太喜欢写前台的小伙伴有很大的帮助哦~ 废话不多说，上官网下载http://www.layui.com/一个最新的layui框架 需要提醒的是，使用LayUI前必须要引用两个文件，但是不是随随便便引用哦。它要分为两种用法：...
layui之快速上手
qq_63431773的博客
07-12 286
Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。
layui快速上手
weixin_30443813的博客
11-03 176
第一步当然是下载 并引入layui的文件layui.css ayui.js 官网中还有一个layui.all.js 等会再看它的用处 引用好了之后可以来看一个基本页面 <link href="layui/css/layui.css" rel="stylesheet" /> <script src="layui/layui.js"></script&...
来了老弟，layui简单上手
weixin_44548718的博客
05-27 311
开发工具与关键技术：VS，插件 作者：江炳渝 撰写时间：2019年5月23日 下面小编要讲的是一个和bootstrap差不多的插件，它叫layui！ 但不同的是，这是一个经典模块化的插件。 当然，用法也是一样的啦。先到官网下载它插件文件，然后直接在你的项目中引入这个插件（一个css文件和一个js文件）就可以使用了，不用去管其它任何文件。 还有就是你不想它模块的一个个加载，而是一次性加载全部的话，...
前端LayUI框架快速上手详解(二)
最新发布
2401_83915812的博客
03-29 790
类型：String，默认值：yyyy-MM-dd通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：| 格式符 | 说明 || — | — || yyyy | 年份，至少四位数。如果不足四位，则前面补零 || y | 年份，不限制位数，即不管年份多少位，前面均不补零 || MM | 月份，至少两位数。如果不足两位，则前面补零。| M | 月份，允许一位数。| dd | 日期，至少两位数。如果不足两位，则前面补零。| d | 日期，允许一位数。
php layui 框架,快速上手前端框架layui
weixin_29915703的博客
03-22 1468
layui(谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。一、介绍在使用layui之前，我们先要了解一下layui是什么？我觉得用作者贤心的一句话来概括就好了：为后端程序员设计的前端框架。更加详细的描述是：这是一个封装了各种css和js、Ajax等等的前端框架，其封装程度之高，有时甚至对程序员来说不大友好。但对...
LayUI框架示例整合
06-21
这个“LayUI框架示例整合”是为初学者提供的一份实践教程，旨在帮助小白快速上手LayUI，掌握其基本用法和常见功能。 LayUI的核心思想是模块化，它将页面元素如表格、表单、按钮、弹窗等封装成独立的模块，开发者...
layui框架简单解读，为什么要使用layui框架，layui框架的好处，后端程序员快速学习掌握layui框架技术型文档博文，layui学习笔记，快速掌握前端技术框架
秃头的博客
10-09 5195
本文章创建于2021年10月8日，20时10分 目录标题1、layui官方公告2、为什么要使用layui框架、layui框架的好处3、layui框架的使用3.1、导入Layui的资源3.2、项目中的资源引入，我们项目中的webapp文件下，直接将资源的layui文件复制进去即可3.3、技术文档的支持 1、layui官方公告 今天是我刚接触layui，对于后台的开发人员来说，了解基本的前端编程还是很有必要的，虽然平时写的前端不多，但也是被繁琐的前端代码搞得很烦，于是为了.
layui.table快速使用
weixin_44570988的博客
10-08 300
创建一个table实例最简单的方法是在页面放置一个元素，代码如下： <table id="personageDate"></table> 绑定容器，设置数据接口，在表头设置对应的字段。渲染方式使用的是方法渲染，将基础参数的设定放在JS代码中，而且table的标签只需要一个选择器。 //table数据-----------------------------开始 layui.use('table',function() { var table = layui.table.
layui框架部分功能介绍
weixin_30883311的博客
05-21 150
注意；代码的所有功能都没有导入layui的css样式 一，分页功能 layui框架分页使用，其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介绍， 注意：传入的是页数不是数据库查询的条数 laypage的使用； 1 <div id="demo1"></div>//界面容器 2 ...
layui常用功能
weixin_30600197的博客
03-22 136
包含的主要样式： 验证不通过时的弹窗 弹窗修改信息 询问框（是否删除之类的） 操作成功提示、操作失败提示 加载样式（显示加载层） 文件下载请前往github over！over！over！ 转载于:https://www.cnblogs.com/yulongcode/p/10581018.html...
layui学习第一天
qq_39066412的博客
11-23 275
页面元素 1.布局 一、栅格布局规则： 采用 layui-row 来定义行，如： 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中： 变量md 代表的是不同屏幕下的标记（可选值见下文） 变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列...
Layui快速入门之第三节栅格布局
qq_61313896的博客
09-06 2017
Layui快速入门之第三节栅格布局
【开发】前端工程——layui
努力，奋斗！
03-14 1455
layui 常用组件 1. 常用 #mermaid-svg-Ua6qV5RMiKcHQegc {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Ua6qV5RMiKcHQegc .error-icon{fill:#552222;}#mermaid-svg-Ua6qV5RMiKcHQegc .error-text{fill:#552222;stroke:#552222;}#me
基于layui图片管理器
闪耀星星的窝
07-31 2991
页面展示效果（支持编辑，单选，多选） 页面 pictures.cshtml @model Web.Admin.Models.PicturesPage @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>@(string.IsNullOrWhiteSpace(Model.title)?"图片管理器": Model.title)</title> <l
layui布局
raik520的博客
06-29 659
介绍一下这个很炫的插件吧 比如你在敲for循环,妹子就会说:比如你在敲for循环,妹子就会说:比如你在敲for循环,妹子就会说: 啊，你是在遍历你的鱼塘吧?..啊，你是在遍历你的鱼塘吧?..啊，你是在遍历你的鱼塘吧?.. 关键是,声音很萌有木有啊啊啊啊啊啊关键是,声音很萌有木有啊啊啊啊啊啊关键是,声音很萌有木有啊啊啊啊啊啊~~~ Ⅰ.如何下载? 这个插件暂时没有在viscode商店上架这个插件暂时没有在viscode商店上架这个插件暂时没有在viscode商店上架 所以只能去githup上下载,也,非常快,
Spring boot项目开发实战——（LayUI实现前后端数据交换与定义方法渲染数据）
个人学习笔记库，一篇一篇记录成长的足迹
02-08 3240
layui使用内置jquery的ajxa实现数据传输，定定义方法渲染数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值