LayUI

 经典模块化前端框架,低门槛开箱即用的前端 UI 解决方案.

  其他UI框架:

    Bootstrap,Element, EasyUI,LayUI 等等

LayUI使用

 Layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

  1. 官网首页下载 https://www.layui.com/

  2. 引入layui核心文件:

layui/css/layui.css	// layui中内置的样式
layui/layui.js // layui中核心的js插件(模块化使用)
layui/layui.all.js // layui中所有的js

  3. layui的目录介绍:

   layui

    ├─css //css目录

    │ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)

    │ │ ├─laydate

    │ │ ├─layer

    │ │ └─layim

    │ ├─layui.css //核心样式文件

    │ └─layui.mobile.css //移动端CCSS样式

    ├─font //字体图标目录(内置字体)

    ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)

    │─lay //模块核心目录

    │ └─modules //各模块组件(所有模块的JS)

    │─layui.js //基础核心库(所有JS的入口)

    └─layui.all.js //包含layui.js和所有模块的合并文件(layui中所有的js)

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<!--
1. 在JS引入时 若引入多个JS, JS之间存在依赖性.则优先引入被依赖的JS
2. 一般引入JS,在body的最后面引入,因为代码自上而下的执行,这样可以等页面的DOM元素都加载了引入JS,避免不生效和异常问题
-->
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
// 初始化layui模块
layui.use(['form','jquery'],function(){
// 初始化模块的对象
// 初始化jquery对象
var $ = layui.jquery;
// 初始化form表单模块对象
var form = layui.form;
});
</script>
</body>
</html>

页面元素

布局

栅格系统:

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

一.栅格布局规则

  1. 采用 layui-row 来定义行,如:<div class="layui-row"></div>
  2. 采用类似 layui-col-md 这样的预设类来定义一组列(column),且放在行(row)内。其中:变量md 代表的是不同屏幕下的标记(可选值见下文)变量代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。
  3. 列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。
  4. 可对列追加类似 layui-col-space5layui-col-md-offset3 这样的预设类来定义列的内边距的间距和偏移(自身所在容器的12等份)。
  5. 最后,在列(column)元素中放入你自己的任意元素填充内容,完成布局!

颜色

样式 颜色
class="layui-bg-red" 赤色,比较引人注意的颜色
class="layui-bg-orange" 橙色,暖色系,一般用于提示性元素
class="layui-bg-green" 墨绿,通常用于按钮、及任何修饰元素
class="layui-bg-cyan" 藏青:侧边或底部普遍采用的颜色
class="layui-bg-blue" 蓝色:比较适合一些鲜艳色系的页面
class="layui-bg-black" 雅黑:通常用于导航
class="layui-bg-gray" 银灰:背景、边框

字体图标

​ 通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标.然后对元素加上图标对应的字体图标.

layui-icon : 表示是一个字体图标

layui-icon-XXXX:具体的内置图标

字体图标在LayUI中有两种表现方式:

​ 1.使用class样式

​ 2.使用图标字符集

例如:

<p>字体图标</p>
<!-- 使用class样式 -->
<i class="layui-icon layui-icon-rate"></i>
<!-- 使用特殊的字体字符集 -->
<i class="layui-icon"></i>

动画

​ 内置动画,使用: class="layui-anim" 表示是动画,动画Layui内置8种,后面跟具体的动画效果

动画样式 动画效果
class="layui-anim layui-anim-up" 从最底部往上滑入
class="layui-anim layui-anim-upbit" 微微向上划入
class="layui-anim layui-anim-scale" 平滑放大
class="layui-anim layui-anim-scaleSpring" 弹簧式放大
class="layui-anim layui-anim-fadein" layui-anim-fadein
class="layui-anim layui-anim-fadeout" 渐隐
class="layui-anim layui-anim-rotate" 360旋转
class="layui-anim layui-anim-loop" 循环动画

按钮(重点)

​ 使用class = "layui-btn" 表示按钮样式

颜色:

名称 组合
原始 class="layui-btn layui-btn-primary"
默认 class="layui-btn"
百搭 class="layui-btn layui-btn-normal"
暖色 class="layui-btn layui-btn-warm"
警告 class="layui-btn layui-btn-danger"
禁用 class="layui-btn layui-btn-disabled"

尺寸:

尺寸 组合
大型 class="layui-btn layui-btn-lg"
默认 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"

形状:

是否圆角:class=" layui-btn-radius" :表示圆角

例如:

主题 组合
原始 class="layui-btn layui-btn-radius layui-btn-primary"
默认 class="layui-btn layui-btn-radius"
百搭 class="layui-btn layui-btn-radius layui-btn-normal"
暖色 class="layui-btn layui-btn-radius layui-btn-warm"
警告 class="layui-btn layui-btn-radius layui-btn-danger"
禁用 class="layui-btn layui-btn-radius layui-btn-disabled"

图标按钮:即将button和i标签使用字体图标结合

<button class="layui-btn  layui-btn-lg layui-btn-danger">
<i class="layui-icon layui-icon-fire"></i>按钮
</button>

注意:

​ class="layui-btn-group" 按钮组,将多个按钮放在一起,可以缩小默认的按钮之间的间隙

导航

​ layui默认导航是水平导航,使用: class="layui-nav".

​ class="layui-nav-item" : 表示导航中的项

水平导航

class="layui-nav" 表示导航 水平导航

​ |--- class="layui-nav-item" 表示导航中的具体项

​ |--- class="layui-nav-child" 表示导航项中的子项

​ |--- class="layui-this" 表示当前被选中的项

垂直导航

class="layui-nav layui-nav-tree" : 表示是导航中垂直导航

​ |--- class="layui-nav-itemed" : 被展开的导航项

​ |--- class="layui-nav-side" : 会垂直占一列

Tab选项卡

导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能.

在layui中,class="layui-tab"表示是一个选项卡

​ |--- class="layui-tab-title" : 表示选项卡的标题

​ |--- class="layui-this" : 表示当前被选中的项

​ |--- class="layui-tab-content" : 表示选项卡中的内容

​ |--- class="layui-tab-item" : 表示内容项

​ |--- class="layui-show" : 表示当前内容项会展示

选项卡风格:

样式 说明
layui-tab-brief 简单风格(下划线)
layui-tab-card Tab卡片风格(块)

特殊属性:

属性名 说明
lay-allowClose="true" 选项卡可以被关闭(只要该属性有值,则表示生效)
lay-id="xxx" 选项卡中用于设置选项的唯一的匹配索引
lay-filter="xxx" 选卡的唯一标识(一般用于layui中事件)

事件:

事件名 说明
element.on('tab(filter)', function(data){}); 监听选项卡切换
element.on('tabDelete(filter)', function(data){})' 监听选项卡的删除
element.tabAdd('demo', options); 新增选项卡
element.tabChange('lay-filter值', layid); 切换选项卡
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<div class="layui-tab" lay-allowClose="true" lay-filter="myTab">
<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</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>
<button id="addBtn">新增一个选项卡</button>
<button id="addBtn2">切换选项卡</button>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
//选项卡事件:
//选项卡切换事件
element.on('tab(myTab)',function(data){//tab(lay-filter的值)
console.log(data);
//当前选项信息: 整个选项卡信息以及当前信息
console.log(data.elem);
console.log("get(0):"+data.elem.get(0)); //jquery 对象 : js对象转化为jquery对象 jquery 对象怎么转化为js对象
// js对象转化为jquery 对象 : $(js对象) :
// 获取上一个选项
console.log(data.elem.prevObject);
//所在选项卡的下标索引, 从 0 开始
console.log(data.index);
});
//选项卡删除事件
element.on('tabDelete(myTab)', function(data){//tab(lay-filter的值)
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
//为按钮绑定点击事件
$("#addBtn").click(function(){
//新增选项卡
var tab = {
title: '新增选项卡的标题',
content: '选项卡的内容', //支持传入html
id: '999'
};
element.tabAdd("myTab", tab);
});
//切换选项卡
$("#addBtn2").click(function(){
//切换选项卡 tabChange("lay-filter的值", lay-id值);
element.tabChange("myTab", 999);
});
});
</script>
</body>
</html>

进度条

​ 在layui中,使用class="layui-progress"表示进度条.

​ class="layui-progress-bar" 表示具体的进度条

​ class="layui-progress-big" 表示尺度大号

属性:

属性名 说明
lay-percent="10%" 进度条进度
lay-showPercent="true" 是否显示进度值
lay-filter="XXX" 事件操作相关属性值

事件:

事件名称 说明
element.progress('lay-filter的值',value); 更新进度条进度

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">
<!-- 表示进度条 -->
<div class="layui-progress" lay-showPercent="true" lay-filter="myProgress">
<div class="layui-progress-bar" lay-percent="0%" id="myProgressBar"></div>
</div>
<button id="btn1">开始涨涨涨</button>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery; //点击按钮后 让进度条进度增涨
$("#btn1").click(function(){
var m = 10;
window.setInterval(function(){
var v = m+"%";
m = m+10;
if(m > 100){
m = 100;
}
//获取进度条的值
element.progress('myProgress', v);
}, 1000);
});
});
</script>
</body>
</html>

面板

​ 在layui中,面板是指:一个独立的容器,装元素,而折叠面板则能有效地节省页面的可视面积.

普通面板:

​ class="layui-card" : 表示普通面板

​ |--- class="layui-card-header" 面板的头部信息

​ |--- class="layui-card-body" 面板内容

折叠面板:

​ class="layui-collapse" : 表示折叠面板

​ |--- class="layui-colla-item" : 折叠面板中的项

​ |--- class="layui-colla-title" : 折叠面板中的项中的标题

​ |--- class="layui-colla-content" : 折叠面板项中的内容

​ |--- class="layui-show" : 折叠面板中 展开的项

属性:
属性名 说明
lay-accordion 表示折叠面板只能展开一个面板项
事件
事件名 说明
element.on('collapse(lay-filter值)', function(data){}); 监听面板的展开或者收缩

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding-left: 100px">
<h1>普通面板</h1>
<div class="layui-card">
<div class="layui-card-header">面板标题</div>
<div class="layui-card-body">
面板内容
</div>
</div>
<h1>折叠面板</h1>
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content ">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content ">内容区域</div>
</div>
</div>
<h1>手风琴面板---只能显示一个</h1>
<div class="layui-collapse" lay-accordion lay-filter="myPanel">
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
</div>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
//监听面板的展开或者收缩
element.on('collapse(myPanel)', function(data){
//console.log(data);
console.log(data.show); //得到当前面板的展开状态,true或者false
console.log(data.title); //得到当前点击面板的标题区域DOM对象
console.log(data.content); //得到当前点击面板的内容区域DOM对象
});
});
</script>
</body>
</html>

时间线

在layui中,使用class="layui-timeline"表示时间线.

使用class="layui-timeline-item" 表示实现线中的项

​ |--- class="layui-timeline-content 表示时间线的内容

​ |--- class="layui-timeline-title" 表示内容的标题

​ 使用<p>标签表示具体的内容

注意: 在时间线中可以插入图标:

 <i class="layui-icon layui-timeline-axis"></i>

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding-left: 100px">
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
<br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
<ul>
<li>《登高》</li>
<li>《茅屋为秋风所破歌》</li>
</ul>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
中国人民抗日战争胜利72周年
<br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
<br>铭记、感恩
<br>所有为中华民族浴血奋战的英雄将士
<br>永垂不朽
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis" style="color:red"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
});
</script>
</body>
</html>

表单-form(重点)

​ 在layui中,layui不仅仅为表单提供了一套内置的样式.也为表单提供了一系列的操作的方法.

样式:

class="layui-form"表示该容器使用表单的样式.该样式,是表单中具体样式的基础.

​ |--- class="layui-form-item" : 表示表单中的具体项

​ |--- class="layui-form-label" : 表示表单项中label标签,文本说明

​ |--- class="layui-input-block" : 表示一个input容器,block块元素 占一行

​ |--- class="layui-input-inline" : 表示一个input容器,inline 行内块.不占一行

​ |--- class="layui-input" : 表示一个input标签

​ |--- class="layui-inline" : 表示不独占一行,一般用于一项中存在多个form元素,使用其包裹

特殊样式:

​ 在layui中,对form表单中checkbox,radio,select的样式,做了特殊处理.使用javascript,根据原生input中的属性,进行渲染,重新生成了响应效果的DIV元素.并且生成的DIV元素与原生input标签存在属性值的绑定关系.

复选框:

属性名 说明
title 显示的文字
lay-skin 风格:默认 primary 原始复选框效果 switch: 开关形式
checked 选中
value 复选框值
lay-text="文本1|文本2" 开关效果显示的文字

单选按钮:

属性名 说明
title 显示的文字
checked 选中
value 复选框值

下拉框:

属性名 说明
selected 选中
lay-search 开启搜索效果

form表单特殊属性:

属性名 属性值 说明
title 任意字符 设定元素名称,一般用于checkbox、radio框
lay-skin switch(开关风格) primary(原始风格) 定义元素的风格,目前只对 checkbox 元素有效,可将其转变为开关样式
lay-ignore 任意字符或不设值 是否忽略元素美化处理。设置后,将不会对该元素进行初始化渲染,即保留系统风格
lay-filter 任意字符 事件过滤器,主要用于事件的精确匹配,跟选择器是比较类似的。其实它并不私属于form模块,它在 layui 的很多基于事件的接口中都会应用到。
lay-verify email(邮箱)url(网址) number(数字) date(日期) identity(身份证) 自定义值 同时支持多条规则的验证,格式:lay-verify="验证A|验证B" 如:lay-verify="required|phone|number" 另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify="pass",那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证
lay-verType tips(吸附层) alert(对话框) msg(默认) 用于定义异常提示层模式。
lay-reqText 任意字符 用于自定义必填项(即设定了 lay-verify="required" 的表单)的提示文本 注意:该功能为 layui 2.5.0 新增
lay-submit 无需填写值 绑定触发提交的元素,如button

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px"> <form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-block">
<input class="layui-input" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg" lay-reqText="独占一行不能为空" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">显示文字1</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" lay-verify="number|username" lay-verType="tips"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" placeholder="显示的文字" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框:</label>
<div class="layui-input-block">
<!-- 原始风格 -->
<input type="checkbox" name="like[write]" title="写作" lay-skin="primary">
<!-- 开关风格 -->
<input type="checkbox" name="like[read]" lay-text="文本1|文本2" lay-skin="switch" checked>
<!-- 默认风格 -->
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选按钮:</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉框:</label>
<div class="layui-input-block">
<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
</div>
</div>
<button class="layui-btn" lay-submit >提交</button>
</form>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use([ 'element', 'jquery', 'form' ], function() {
var element = layui.element;
var $ = layui.jquery;
var from = layui.form;
//自定义校验规则
from.verify({
username:function(value, item){
console.log(value);
if(value.length < 10){
return '用户名不能少于10位';
}
}
});
});
</script>
</body>
</html>
事件:
事件类型 描述
select 监听select下拉选择事件
checkbox 监听checkbox复选框勾选事件
switch 监听checkbox复选框开关事件
radio 监听radio单选框事件
submit 监听表单提交事件
方法:
方法名称 解释
render() 重新渲染
val() 获取或者为表单赋值

示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">
<form class="layui-form" action="http://www.baidu.com" lay-filter="myForm">
<div class="layui-form-item">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-block">
<input class="layui-input" name="input1" value="13111111111" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg" lay-reqText="独占一行不能为空" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">显示文字1</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" name="input2" value="13111111111" lay-verify="number|username" lay-verType="tips"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">显示文字</label>
<!-- input 容器 这种是独占一行 -->
<div class="layui-input-inline">
<input class="layui-input" name="input3" placeholder="显示的文字" />
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框:</label>
<div class="layui-input-block">
<!-- 原始风格 -->
<input type="checkbox" lay-filter="formCheckbox" value="写作" name="like[write]" title="写作" lay-skin="primary">
<!-- 开关风格 -->
<input type="checkbox" lay-filter="formCheckbox" value="文本" name="like[text]" lay-text="文本1|文本2" lay-skin="switch" checked>
<!-- 默认风格 -->
<input type="checkbox" lay-filter="formCheckbox" value="发呆" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选按钮:</label>
<div class="layui-input-block">
<input type="radio" lay-filter="formRadio" name="sex" value="男" title="男">
<input type="radio" lay-filter="formRadio" name="sex" value="女" title="女" checked>
<input type="radio" lay-filter="formRadio" name="sex" value="" title="中性" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉框:</label>
<div class="layui-input-block">
<select id="city" name="city" lay-search lay-filter="formSelect">
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
</div>
</div>
<button class="layui-btn" lay-submit lay-filter="submitBtn">提交</button>
</form>
<br>
<button class="layui-btn" id="initForm">为表单初始化值</button>
<br>
<button class="layui-btn" id="addDom">为下拉框新增option</button>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use([ 'element', 'jquery', 'form' ], function() {
var element = layui.element;
var $ = layui.jquery;
var form = layui.form;
//自定义校验规则
form.verify({
username:function(value, item){
if(value.length < 10){
return '用户名不能少于10位';
}
}
});
//==========监听下拉框选择事件===========
//监听下拉框选择事件
form.on("select(formSelect)",function(data){
console.log(data);
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
//==========复选框选择事件:只支持原生风格 默认风格===========
form.on("checkbox(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 原生风格和默认风格
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中,true或者false
console.log(data.value); //复选框value值,也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
//===========复选框选择事件:开关风格===========
form.on("switch(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //开关是否开启,true或者false
console.log(data.value); //开关value值,也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
//==========单选按钮:==========
form.on("radio(formRadio)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});
//========监听表单提交=========
form.on('submit(submitBtn)',function(data){// submit(lay-filter值):lay-filter值是提交按钮上面
console.log(data);
console.log(data.field);
//阻止表单提交 因为表单提交后 会刷新页面.一般使用ajax提交表单数据,然后阻止表单提交.只有使用layui的表单提交才能触发数据校验.
//使用layui的表单提交事件,在事件中使用ajax提交数据,然后阻止表单提交,这样既可以使用layui的数据校验,也可以使用ajax的异步提交数据
return false;
});
//==========方法: 为表单初始化值:===========
$("#initForm").click(function(){
var data = {
'input1':'12345678911',
'input2':'12345678911',
'input3':'12345678911',
'like[write]': true,
'like[text]':true,
'like[dai]':true,
'sex':'女',
'city':'021'
};
form.val("myForm",data);//此时lay-filter值,是form表单上的lay-filter值
//得到form的值
console.log(form.val("myForm"));
});
//===========方法: 重新渲染表单============
$("#addDom").click(function(){
$("#city").append("<option value='option' >新增option</option>");
//重新渲染表单
form.render();
});
});
</script>
</body>
</html>

表格-table(重点)

​ 在layui中,使用class="layui-table"表示表格的样式.表格分为静态表格和动态表格.静态表格是指页面固定数据写死的静态HTML标签.动态的表格是指使用Javascript自动渲染出来的表格.根据数据,以及特定属性渲染出响应的表格.

表格基础参数

参数 类型 说明 示例值
elem String/DOM 指定原始 table 容器的选择器或 DOM,方法渲染方式必填 "#demo"
cols Array 设置表头。值是一个二维数组。方法渲染方式必填 详见表头参数
url(等) - 异步数据接口相关参数。其中 url 参数为必填项 详见异步接口
toolbar String/DOM/Boolean 开启表格头部工具栏区域,该参数支持四种类型值:toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器toolbar: '
xxx

' //直接传入工具栏模板字符toolbar: true //仅开启工具栏,不显示左侧模板toolbar: 'default' //让工具栏左侧显示默认的内置模板注意: 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能,则必须开启该参数

false
defaultToolbar Array 该参数可自由配置头部工具栏右侧的图标按钮 详见头工具栏图标
width Number 设定容器宽度。table容器的默认宽度是跟随它的父元素铺满,你也可以设定一个固定值,当容器中的内容超出了该宽度时,会自动出现横向滚动条。 1000
height Number/String 设定容器高度 详见height
cellMinWidth Number (layui 2.2.1 新增)全局定义所有常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth 100
done Function 数据渲染完的回调。你可以借此做一些其它的操作 详见done回调
data Array 直接赋值数据。既适用于只展示一页数据,也非常适用于对一段已知数据进行多页展示。 [{}, {}, {}, {}, …]
totalRow Boolean 是否开启合计行区域。layui 2.4.0 新增 false
page Boolean/Object 开启分页(默认:false) 注:从 layui 2.2.0 开始,支持传入一个对象,里面可包含 laypage 组件所有支持的参数(jump、elem除外) {theme: '#c00'}
limit Number 每页显示的条数(默认:10)。值务必对应 limits 参数的选项。 注意:优先级低于 page 参数中的 limit 参数 30
limits Array 每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。 注意:优先级低于 page 参数中的 limits 参数 [30,60,90]
loading Boolean 是否显示加载条(默认:true)。如果设置 false,则在切换分页时,不会出现加载条。该参数只适用于 url 参数开启的方式 false
title String 定义 table 的大标题(在文件导出等地方会用到)layui 2.4.0 新增 "用户表"
text Object 自定义文本,如空数据时的异常提示等。注:layui 2.2.5 开始新增。 详见自定义文本
autoSort Boolean 默认 true,即直接由 table 组件在前端自动处理排序。 若为 false,则需自主排序,通常由服务端直接返回排序好的数据。 注意:该参数为 layui 2.4.4 新增 详见监听排序
initSort Object 初始排序状态。用于在数据表格渲染完毕时,默认按某个字段排序。 详见初始排序
id String 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。 值得注意的是:从 layui 2.2.0 开始,该参数也可以自动从

中的 id 参数中获取。

test
skin(等) - 设定表格各种外观、尺寸等 详见表格风格

表头参数

参数 类型 说明 示例值
field String 设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识,其值是JSON数据中key username
title String 设定标题名称,显示标题 用户名
width Number/String 设定列宽,若不填写,则自动分配;若填写,则支持值为:数字、百分比 请结合实际情况,对不同列做不同设定。 200 30%
minWidth Number 局部定义当前常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth 100
type String 设定列类型。可选值有:normal(常规列,无需设定)checkbox(复选框列)radio(单选框列,layui 2.4.0 新增)numbers(序号列)space(空列) 任意一个可选值
LAY_CHECKED Boolean 是否全选状态(默认:false)。必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。 true
fixed String 固定列。可选值有:left(固定在左)、right(固定在右)。一旦设定,对应的列将会被固定在左或右,不随滚动条而滚动。 注意:如果是固定在左,该列必须放在表头最前面;如果是固定在右,该列必须放在表头最后面。 left(同 true) right
hide Boolean 是否初始隐藏列,默认:false。layui 2.4.0 新增 true
totalRow Boolean 是否开启该列的自动合计功能,默认:false。layui 2.4.0 新增 true
totalRowText String 用于显示自定义的合计文本。layui 2.4.0 新增 "合计:"
sort Boolean 是否允许排序(默认:false)。如果设置 true,则在对应的表头显示排序icon,从而对列开启排序功能。注意:不推荐对值同时存在“数字和普通字符”的列开启排序,因为会进入字典序比对。比如:'贤心' > '2' > '100',这可能并不是你想要的结果,但字典序排列算法(ASCII码比对)就是如此。 true
unresize Boolean 是否禁用拖拽列宽(默认:false)。默认情况下会根据列类型(type)来决定是否禁用,如复选框列,会自动禁用。而其它普通列,默认允许拖拽列宽,当然你也可以设置 true 来禁用该功能。 false
edit String 单元格编辑类型(默认不开启)目前只支持:text(输入框) text
event String 自定义单元格点击事件名,以便在 tool 事件中完成对该单元格的业务处理 任意字符
style String 自定义单元格样式。即传入 CSS 样式 background-color: #5FB878; color: #fff;
align String 单元格排列方式。可选值有:left(默认)、center(居中)、right(居右) center
colspan Number 单元格所占列数(默认:1)。一般用于多级表头 3
rowspan Number 单元格所占行数(默认:1)。一般用于多级表头 2
templet String 自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等 详见自定义模板
toolbar String 行工具栏 详见行工具事件

异步数据接口参数

​ 数据的异步请求由以下几个参数组成:

参数名 功能
url 接口地址。默认会自动传递两个参数:?page=1&limit=30(该参数可通过 request 自定义) page 代表当前页码、limit 代表每页数据量
method 接口http请求类型,默认:get
where 接口的其它参数。如:where: {token: 'sasasas', id: 123}
contentType 发送到服务端的内容编码类型。如果你要发送 json 内容,可以设置:contentType: 'application/json'
headers 接口的请求头。如:headers: {token: 'sasasas'}
parseData 数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式.在layui中,默认规定返回3个字段: code,msg,count,data,并且默认code的值为0表示正常.其他值不正常.且data是一个数组.其他格式layui默认是无法解析.所以需要使用parseData函数进行适配.
request 用于对分页请求的参数:page、limit重新设定名称,如:
response 如果你想重新规定返回的数据格式,那么可以借助 response 参数,如:

在layui中,渲染表格存在两种方式:

方式一:自动渲染

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

  1. 带有 class="layui-table"
    标签。
  2. 对标签设置属性 lay-data="" 用于配置一些基础参数
  3. 标签中设置属性lay-data=""用于配置表头信息

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
    <!-- 自动渲染 -->
    <!-- lay-data属性配置基础参数信息 -->
    <table class="layui-table" lay-data="{url:'data/data01.json',page:true}">
    <thead>
    <tr>
    <th lay-data="{field:'id', width:80}">用户ID</th>
    <th lay-data="{field:'username', width:120}">用户名称</th>
    <th lay-data="{field:'sex', width:50}">性别</th>
    <th lay-data="{field:'city', width:80}">城市</th>
    <th lay-data="{field:'sign', width:80}">签名</th>
    <th lay-data="{field:'experience', width:80}">积分</th>
    <th lay-data="{field:'score', width:80}">评分</th>
    <th lay-data="{field:'wealth',sort:true}">财富</th>
    <th lay-data="{field:'classify', width:80}">职业</th>
    </tr>
    </thead>
    </table>
    <!-- 引入layui中JS -->
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
    //初始化layui模块
    layui.use(['jquery', 'table' ], function() {
    var $ = layui.jquery;
    var table = layui.table;
    });
    </script>
    </body>
    </html>

    方式二:方法渲染

    ​ 方法级渲染”将基础参数的设定放在了JS代码中",页面只需要定义一个table,然后在JS中找到table进行绑定.然后将这个table进行数据渲染。

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
    <!-- 自动渲染 -->
    <!-- lay-data属性配置基础参数信息 -->
    <!-- <table class="layui-table" lay-data="{url:'data/data01.json',page:true}">
    <thead>
    <tr>
    <th lay-data="{field:'id', width:80}">用户ID</th>
    <th lay-data="{field:'username', width:120}">用户名称</th>
    <th lay-data="{field:'sex', width:50}">性别</th>
    <th lay-data="{field:'city', width:80}">城市</th>
    <th lay-data="{field:'sign', width:80}">签名</th>
    <th lay-data="{field:'experience', width:80}">积分</th>
    <th lay-data="{field:'score', width:80}">评分</th>
    <th lay-data="{field:'wealth',sort:true}">财富</th>
    <th lay-data="{field:'classify', width:80}">职业</th>
    </tr>
    </thead>
    </table> -->
    <!-- 方法渲染 -->
    <table class="layui-table" id="myTable"></table> <script type="text/html" id="titleTpl">
    {{# if(d.sex == '男'){ }}
    <font color='red'>GG</font>
    {{# } else if(d.sex == '女') { }}
    <font color='green'>MM</font>
    {{# } }}
    </script>
    <script type="text/html" id="headBtns">
    <div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
    </button>
    </div>
    </script>
    <script type="text/html" id="rowBtns">
    <div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
    </button>
    </div>
    </script>
    <!-- 引入layui中JS -->
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
    //初始化layui模块
    layui.use(['jquery', 'table' ], function() {
    var $ = layui.jquery;
    var table = layui.table;
    //渲染表格 且返回该表格对象
    var t = table.render({
    id:'myTableId', //容器对象的唯一标识
    elem:"#myTable",// 绑定的table容器
    url:'data/data01.json',//数据接口
    page:true,//开启分页
    toolbar:"#headBtns",//开启表头工具栏 默认会开启右侧默认工具栏
    defaultToolbar:['exports','filter','print'],//自定义默认工具栏 exports 导出 filter 筛选 print 打印
    width:1200, //设置table容器宽度 只支持像素
    height:520, //设置table容器的高度 只支持像素
    cellMinWidth: 60,// 设置表格中单元格的最小宽度 一般用于自动分配,若表头中设置了则使用表头
    done:function(res, curr, count){ //表格渲染完成后进行回调
    console.log(res); // 返回的数据
    console.log(curr);//当前页
    console.log(count);//总数据条数
    },
    parseData:function(rs){//此时对数据进行解析适配 rs就是后台返回的数据
    return {
    "code":rs.code,
    "msg":rs.msg,
    "count":rs.count,
    "data":rs.data.data
    } },
    response: {// 为响应的数据进行别名
    //statusName: 'status' //规定数据状态的字段名称,默认:code
    statusCode: 200 //规定成功的状态码,默认:0
    //,msgName: 'hint' //规定状态信息的字段名称,默认:msg
    //,countName: 'total' //规定数据总数的字段名称,默认:count
    //,dataName: 'rows' //规定数据列表的字段名称,默认:data
    } ,
    request: {//对默认请求参数进行别名
    pageName: 'currentPage', //页码的参数名称,默认:page
    limitName: 'pageSize' //每页数据量的参数名,默认:limit
    },
    where:{'name':'张三'},
    totalRow:true,//开启数据统计,需要在需统计的列中配置 :totalRow:true
    limit:20,//每页显示的条数
    limits:[20,50,100],//每页条数的选择项
    loading:true,//是否显示加载条 在table进行数据加载时,是否显示loading的效果
    title:'用户表',//在数据导出时 用于设置文件的名称
    text:{
    none: '没有符合条件的数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
    },
    autoSort:false,// 是否前端进行排序
    //skin:'nob', //边框风格
    even:true,// 隔行背景
    cols:[[
    {type:'checkbox',width:80,LAY_CHECKED:true},
    {field:'id',title:'ID', width:80},
    {field:'username',title:'用户名', width:80},
    /* {field:'sex',title:'性别', width:80,templet:function(d){
    var sex = d.sex;
    if(sex =='男'){
    return "<font color='red'>GG</font>";
    }else if(sex =='女'){
    return "<font color='green'>MM</font>";
    }
    }}, */
    {field:'sex',title:'性别', width:80,templet:'#titleTpl'},
    {field:'city',title:'城市', width:80},
    {field:'sign',title:'签名',edit:'text', width:80},
    {field:'experience',title:'积分',width:80},
    {field:'score',title:'评分',unresize:true,totalRowText:'合计:', width:80},
    {field:'wealth',title:'财富',totalRow:true,align:'center'},
    {field:'classify',title:'职业', width:80,style:'color:red'},
    {title:'操作', width:200,fixed:'right',toolbar:'#rowBtns'},
    ]] //设置表头 });
    });
    </script>
    </body>
    </html>

    table中的方法

    方法名 说明
    reader() 渲染一个table
    table.checkStatus('ID') 获取选中的行,id为初始化的ID值
    row.del() 删除行
    row.update({username: '123' ,title: 'xxx'}); 修改行
    reload("初始化ID",option)或者初始化对象.reload(option) 重载表格

    事件监听

    事件类型 说明
    table.on('toolbar('table的lay-filter值')', function(obj){}); 监听头工具栏事件
    table.on('checkbox('table的lay-filter值')', function(obj){}); 监听复选框选择事件
    table.on('edit('table的lay-filter值')', function(obj){}); 监听单元格编辑事件
    table.on('row(test)', function(obj){}); 监听行单击事件
    table.on('tool(test)', function(obj){}); 监听行工具栏事件

    注意: 在工具栏事件中,工具栏中存在多个按钮,即多种事件,在layui中,使用lay-event进行区分.

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
    <!-- 自动渲染 -->
    <!-- lay-data属性配置基础参数信息 -->
    <!-- <table class="layui-table" lay-data="{url:'data/data01.json',page:true}">
    <thead>
    <tr>
    <th lay-data="{field:'id', width:80}">用户ID</th>
    <th lay-data="{field:'username', width:120}">用户名称</th>
    <th lay-data="{field:'sex', width:50}">性别</th>
    <th lay-data="{field:'city', width:80}">城市</th>
    <th lay-data="{field:'sign', width:80}">签名</th>
    <th lay-data="{field:'experience', width:80}">积分</th>
    <th lay-data="{field:'score', width:80}">评分</th>
    <th lay-data="{field:'wealth',sort:true}">财富</th>
    <th lay-data="{field:'classify', width:80}">职业</th>
    </tr>
    </thead>
    </table> -->
    <input type="text" id="name"/> <button id="searchBtn" class="layui-btn">搜索</button>
    <!-- 方法渲染 -->
    <table class="layui-table" id="myTable" lay-filter="myTableFilter"></table> <script type="text/html" id="titleTpl">
    {{# if(d.sex == '男'){ }}
    <font color='red'>GG</font>
    {{# } else if(d.sex == '女') { }}
    <font color='green'>MM</font>
    {{# } }}
    </script>
    <script type="text/html" id="headBtns">
    <div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-sm" lay-event='add'>
    <i class="layui-icon"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm" lay-event='del'>
    <i class="layui-icon"></i>
    </button>
    </div>
    </script>
    <script type="text/html" id="rowBtns">
    <div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-sm" lay-event='update'>
    <i class="layui-icon"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm" lay-event='del'>
    <i class="layui-icon"></i>
    </button>
    </div>
    </script>
    <!-- 引入layui中JS -->
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
    //初始化layui模块
    layui.use(['layer','jquery', 'table' ], function() {
    var $ = layui.jquery;
    var table = layui.table;
    var layer = layui.layer;
    // 渲染表格 且返回该表格对象
    var t = table.render({
    id:'myTableId', // 容器对象的唯一标识
    elem:"#myTable",// 绑定的table容器
    url:'data/data01.json',//数据接口
    page:true,// 开启分页
    toolbar:"#headBtns",// 开启表头工具栏 默认会开启右侧默认工具栏
    defaultToolbar:['exports','filter','print'],//自定义默认工具栏 exports 导出 filter 筛选 print 打印
    width:1200, // 设置table容器宽度 只支持像素
    height:520, // 设置table容器的高度 只支持像素
    cellMinWidth: 60,// 设置表格中单元格的最小宽度 一般用于自动分配,若表头中设置了则使用表头
    done:function(res, curr, count){ //表格渲染完成后进行回调
    console.log(res); // 返回的数据
    console.log(curr);// 当前页
    console.log(count);// 总数据条数
    },
    parseData:function(rs){//此时对数据进行解析适配 rs就是后台返回的数据
    return {
    "code":rs.code,
    "msg":rs.msg,
    "count":rs.count,
    "data":rs.data.data
    } },
    response: {// 为响应的数据进行别名
    //statusName: 'status' //规定数据状态的字段名称,默认:code
    statusCode: 200 //规定成功的状态码,默认:0
    //,msgName: 'hint' //规定状态信息的字段名称,默认:msg
    //,countName: 'total' //规定数据总数的字段名称,默认:count
    //,dataName: 'rows' //规定数据列表的字段名称,默认:data
    } ,
    request: {//对默认请求参数进行别名
    pageName: 'currentPage', //页码的参数名称,默认:page
    limitName: 'pageSize' //每页数据量的参数名,默认:limit
    },
    where:{'name':'张三'},
    totalRow:true,//开启数据统计,需要在需统计的列中配置 :totalRow:true
    limit:20,//每页显示的条数
    limits:[20,50,100],//每页条数的选择项
    loading:true,//是否显示加载条 在table进行数据加载时,是否显示loading的效果
    title:'用户表',//在数据导出时 用于设置文件的名称
    text:{
    none: '没有符合条件的数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
    },
    autoSort:false,// 是否前端进行排序
    //skin:'nob', //边框风格
    even:true,// 隔行背景
    cols:[[
    {type:'checkbox',width:80,LAY_CHECKED:false},
    {field:'id',title:'ID', width:80},
    {field:'username',title:'用户名', width:80},
    /* {field:'sex',title:'性别', width:80,templet:function(d){
    var sex = d.sex;
    if(sex =='男'){
    return "<font color='red'>GG</font>";
    }else if(sex =='女'){
    return "<font color='green'>MM</font>";
    }
    }}, */
    {field:'sex',title:'性别', width:80,templet:'#titleTpl'},
    {field:'city',title:'城市', width:80},
    {field:'sign',title:'签名',edit:'text', width:80},
    {field:'experience',title:'积分',width:80},
    {field:'score',title:'评分',unresize:true,totalRowText:'合计:', width:80},
    {field:'wealth',title:'财富',totalRow:true,align:'center'},
    {field:'classify',title:'职业', width:80,style:'color:red'},
    {title:'操作', width:200,fixed:'right',toolbar:'#rowBtns'},
    ]] //设置表头 });
    //===========事件监听=============
    //头工具栏事件监听
    table.on('toolbar(myTableFilter)', function(obj){
    console.log(obj);
    //获取事件类型
    var event = obj.event;
    if(event == 'add'){
    console.log("触发添加");
    }else if(event == 'del'){
    console.log("触发删除");
    //获取选中的数据
    var data = table.checkStatus('myTableId');
    console.log(data);//选中的数据
    console.log(data.data);// 选中的具体数据
    console.log(data.isAll);//是否全选 true 全选 false 不是全选
    }
    });
    //==========表格行监听事件 ============
    table.on('tool(myTableFilter)', function(obj){
    console.log(obj);
    //获取事件类型
    var event = obj.event;
    console.log(event);
    var data = obj.data;// 获取该行数据
    console.log(data);
    if(event == 'update'){
    console.log("修改业务");
    //修改数据
    obj.update({
    'id':'UID',
    'username':'韩梅梅'
    });
    }else if(event == 'del'){
    console.log("删除业务");
    //方法: 删除该行
    obj.del();
    }
    });
    //=========复选框选择监听事件=============
    table.on('checkbox(myTableFilter)', function(obj){
    console.log(obj);
    console.log(obj.checked);//复选框的选中状态
    console.log(obj.data);//所在行的数据
    });
    //==========单元格编辑事件============
    table.on('edit(myTableFilter)', function(obj){
    console.log(obj);
    console.log(obj.value);//单元格编辑后的新值
    console.log(obj.data);//修改后的行数据
    console.log(obj.field);//被修改的字段
    });
    //=============行单击事件=============
    table.on('row(myTableFilter)', function(obj){
    console.log(obj);
    console.log(obj.data);
    layer.msg(JSON.stringify(obj.data));
    });
    // 重新渲染表格
    $("#searchBtn").click(function(){
    t.reload({
    where:{
    'name':$("#name").val(),
    'minAge':18,
    'maxAge':30
    }
    })
    });
    });
    </script>
    </body>
    </html>

    日期和时间- laydate(重点)

    laydate使用

    1. 定义一个日期时间容器

    2. 初始化laydate组件

      入门示例:

      <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
      <!-- 引入layui的css样式 -->
      <link rel="stylesheet" href="layui/css/layui.css" />
      </head>
      <body>
      <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
      <div class="layui-inline">
      <input class="layui-input" id="beginTime" readonly="readonly" />
      </div>
      <!-- 引入layui中JS -->
      <script type="text/javascript" src="layui/layui.js"></script>
      <script type="text/javascript">
      //初始化layui模块
      layui.use(['layer','jquery', 'laydate' ], function() {
      var layer = layui.layer;
      var $ = layui.jquery;
      var laydate = layui.laydate;
      //2. 初始化组件
      laydate.render({
      elem:"#beginTime"
      });
      });
      </script>
      </body>
      </html>

    配置参数

    属性名 值类型 说明
    elem DOM/String 绑定的容器
    type String year:只提供年列表选择
    month:只提供年、月选择
    date:年、月、日。type默认值
    time:只提供时、分、秒选择
    datetime:可选择:年、月、日、时、分、秒
    range Boolean/String 开启范围选择
    format String 时间字符串格式,默认:yyyy-MM-dd
    min/max string 最小值/最大值
    isInitValue boolean 是否允许给默认值
    trigger String 默认是:focus,如果绑定的元素非输入框,则默认事件为:click
    show boolean 是否默认显示
    zIndex number 设置浮层的层叠顺序,值越大显示在最外层
    showBottom boolean 是否显示底部工具栏
    btns array 底部工具栏按钮,默认值:['clear', 'now', 'confirm']
    lang string cn 中文(默认值) en 英文
    theme string default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)
    calendar boolean 是否显示公历节日
    mark Object 标记重要的节日

    事件

    事件名 说明
    ready: function(date){} 组件弹出时触发
    change: function(value, date, endDate){} 年月日时间被切换时都会触发(只支持范围时生效)
    done: function(value, date, endDate){} 选择完成时 才生效

    代码示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
    <h1>年月日期选择器-date</h1>
    <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
    <div class="layui-inline">
    <input class="layui-input" id="beginTime" readonly="readonly" />
    </div>
    <h1>年月日期选择器-month</h1>
    <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
    <div class="layui-inline">
    <input class="layui-input" id="month" readonly="readonly" />
    </div>
    <h1>年月日期选择器-time</h1>
    <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
    <div class="layui-inline">
    <input class="layui-input" id="time" readonly="readonly" />
    </div>
    <h1>年月日期选择器-datetime</h1>
    <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
    <div class="layui-inline">
    <input class="layui-input" id="datetime" readonly="readonly" />
    </div>
    <h6>年月日期选择器-触发事件</h6>
    <!-- 1. 定义laydate 组件容器 : 一般使用input 作为组件容器 因为laydate 默认触发是使用 获取焦点触发 -->
    <div class="layui-inline">
    <button id="btn1" >选择时间</button>
    </div>
    <!-- 引入layui中JS -->
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
    //初始化layui模块
    layui.use(['layer','jquery', 'laydate' ], function() {
    var layer = layui.layer;
    var $ = layui.jquery;
    var laydate = layui.laydate;
    //2. 初始化组件
    laydate.render({
    elem:"#beginTime",
    //range:true,//开启范围选择
    //format: 'yyyy年MM月dd日', // 时间日期格式
    value : '2019-11-19', // 设置默认值
    min:'2019-01-01', // 限制的最小值
    max:'2019-12-31', //限制的最大值
    show:true, //是否默认显示
    //showBottom:false, //是否显示底部工具栏
    btns :['clear', 'now','confirm'],// 底部工具栏按钮
    //lang :'en' ,// 显示的语言环境
    theme:'molv', //主题色
    calendar:true, //是否显示公历节日
    mark:{
    '0-9-18':'国耻日',
    '0-0-15':'发工资'
    }, //标记重要的日子
    ready: function(date){//组件打开时触发
    //注意 date 当前选中的时间 默认当前时间
    console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    },
    change: function(value, date, endDate){
    console.log(value); //得到日期生成的值,如:2017-08-18
    console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
    },
    done: function(value, date, endDate){//选择完成时 才生效
    console.log("done");
    console.log(value); //得到日期生成的值,如:2017-08-18
    console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
    }
    });
    laydate.render({
    elem:"#month",
    type:'month'
    });
    laydate.render({
    elem:"#time",
    type:'time'
    });
    laydate.render({
    elem:"#datetime",
    type:'datetime'
    });
    laydate.render({
    elem:"#btn1"
    });
    });
    </script>
    </body>
    </html>

    弹出层-layer(重点)

    layer的使用

    1. 初始化layer对象
    2. 调用layer中方法

    入门示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
    <p>
    <button class="layui-btn" id="btn1">点击我</button>
    <button class="layui-btn" id="btn2">点击我</button>
    </p>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
    //初始化layui模块
    layui.use(['layer','jquery'], function() {
    var layer = layui.layer;
    var $ = layui.jquery;
    // 消息
    $("#btn1").click(function(){
    layer.msg("弹出层 ----消息");
    });
    // 对话框
    $("#btn2").click(function(){
    layer.alert("弹出层 ----消息");
    });
    });
    </script>
    </body>
    </html>

    基础参数

    属性名 值类型 说明
    type Number 层类型:layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)
    title String/Array/Boolean title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false
    content String/DOM/Array content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同
    skin String 弹出主题色,内置layui-layer-lan**layui-layer-molv
    area String/Array 弹出等的宽高,默认:'auto'
    offset String/Array 页面位置,默认:垂直水平居中
    icon Number 信息框和加载层的私有参数,只对这两种弹出层生效
    btn String/Array 默认:'确认'按钮,若想有多个,则使用数组
    btnAlign String 默认:r,内置的按钮的排列.
    btnAlign: 'l' 按钮左对齐
    btnAlign: 'c' 按钮居中对齐
    btnAlign: 'r' 按钮右对齐
    closeBtn String/Boolean layer提供了两种风格的关闭按钮,可通过配置12来展示,如果不显示,则closeBtn: 0
    shade String/Array/Boolean 即弹层外区域。默认是0.3透明度的黑色背景('#000'),如果你想定义别的颜色,可以shade: [0.8, '#393D49'];如果你不想显示遮罩,可以shade: 0
    shadeClose Boolean 默认:false ,是否点击遮罩关闭
    time Number 自动关闭所需毫秒
    id String 用于控制弹层唯一标识
    anim Number 弹出动画
    isOutAnim Boolean 默认:true,默认情况下,关闭层时会有一个过度动画。如果你不想开启,设置 isOutAnim: false 即可
    maxmin Boolean 最大最小化,默认:false
    fixed Boolean 默认,true,即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可
    resize Boolean 默认:true,是否允许改变弹层的大小
    maxWidth Number 弹层最大的宽度,默认360
    maxHeight Number 最大高度,默认:无
    zIndex Number 层叠顺序,默认:19891014
    move String/DOM/Boolean 默认:选中标题可以进行拖动,move: false
    moveOut Boolean 默认:false,是否允许拖拽到窗口外

    属性示例

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
    <p>
    <button class="layui-btn" id="btn1">点击我</button>
    <button class="layui-btn" id="btn2">点击我</button>
    </p>
    <hr />
    <p>
    <button class="layui-btn" id="btn3">演示弹层各种属性</button>
    </p>
    <div style="height: 2000px">111</div>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
    //初始化layui模块
    layui.use(['layer','jquery'], function() {
    var layer = layui.layer;
    var $ = layui.jquery;
    // 消息
    $("#btn1").click(function(){
    layer.msg("弹出层 ----消息");
    });
    // 对话框
    $("#btn2").click(function(){
    layer.alert("弹出层 ----消息");
    });
    //===========演示弹层各种属性===========
    $("#btn3").click(function(){
    layer.open({
    title :'我是自己定义的标题', //标题
    type:1,// 表示页面层 0 信息框 1 页面层 2 iframe
    // 当type为 1时 此时 content 可以时html字符串,也可以dom对象
    // 当type为2时, 此时 content是一个url地址
    content:"<div>内容</div>",
    //skin:'layui-layer-lan',//主题色
    area:['500px','500px'],//设置弹出层的宽高
    //offset:'rb',// 弹层的位置
    btn:['按钮1','按钮2'],//自定义按钮
    btnAlign: 'c',//按钮排列方式
    closeBtn :1, // 关闭按钮 1,2 2种, 0 表示没有关闭按钮
    shade :[0.8, '#393D49'],// 透明度 颜色
    shadeClose :true,// 点击遮罩层是否关闭
    id:'layerId1',// 弹层唯一标识
    anim:6, // 动画效果
    //isOutAnim :false,// 关闭时的动画
    maxmin:true,//最小最大化
    fixed :true,// 固定弹层的位置
    resize:false,// 是否允许改变弹层大小
    //move:false, //是否允许拖动 false 不允许拖动
    moveOut:true //是否允许拖动到窗口外
    });
    });
    });
    </script>
    </body>
    </html>

    方法

    方法名 说明
    index = layer.open(options) 根据配置,创建弹出层,返回弹出层的索引标识
    layer.close(index) 关闭指定索引的弹出层
    layer.closeAll([type]) 关闭所有的弹出层,关闭指定类型的弹出层
    layer.alert(content, options, yes) 普通信息框:
    content : 显示的内容
    yes:点击确定调用函数
    options:相关配置
    layer.confirm(content, options, yes) 询问框:
    content : 显示的内容
    yes:点击确定调用函数
    options:相关配置
    layer.msg(content, options, end) 提示框:
    content : 显示的内容
    end:提示框消失时调用的函数
    options:相关配置

    事件

    事件名称 说明
    success: function(layero, index){} 层弹出成功后回调的方法
    yes: function(index, layero){} 点击yes按钮调用的方法
    cancel: function(index, layero){} 点击右上角关闭按钮调用的方法
    end: function(index, layero){} 层销毁后调用的方法
    多个按钮自定义事件

    代码示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
    <p>
    <button class="layui-btn" id="btn1">点击我</button>
    <button class="layui-btn" id="btn2">点击我</button>
    </p>
    <hr />
    <p>
    <button class="layui-btn" id="btn3">演示弹层各种属性</button>
    </p>
    <hr />
    <p>
    <button class="layui-btn" id="btn4">弹出的信息框</button>
    </p>
    <hr />
    <p>
    <button class="layui-btn" id="btn5">弹出的询问框</button>
    </p>
    <hr />
    <p>
    <button class="layui-btn" id="btn6">弹出的提示框</button>
    </p> <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
    //初始化layui模块
    layui.use(['layer','jquery'], function() {
    var layer = layui.layer;
    var $ = layui.jquery;
    // 消息
    $("#btn1").click(function(){
    layer.msg("弹出层 ----消息");
    });
    // 对话框
    $("#btn2").click(function(){
    layer.alert("弹出层 ----消息");
    });
    //=====演示弹层各种属性=================================================
    $("#btn3").click(function(){
    layer.open({
    title :'我是自己定义的标题', //标题
    type:1,// 表示页面层 0 信息框 1 页面层 2 iframe
    // 当type为 1时 此时 content 可以时html字符串,也可以dom对象
    // 当type为2时, 此时 content是一个url地址
    content:"<div>内容</div>",
    //skin:'layui-layer-lan',//主题色
    area:['500px','500px'],//设置弹出层的宽高
    //offset:'rb',// 弹层的位置
    btn:['按钮1','按钮2','按钮3','按钮4'],//自定义按钮
    btnAlign: 'c',//按钮排列方式
    closeBtn :1, // 关闭按钮 1,2 2种, 0 表示没有关闭按钮
    shade :[0.8, '#393D49'],// 透明度 颜色
    shadeClose :true,// 点击遮罩层是否关闭
    id:'layerId1',// 弹层唯一标识
    anim:6, // 动画效果
    //isOutAnim :false,// 关闭时的动画
    maxmin:true,//最小最大化
    fixed :true,// 固定弹层的位置
    resize:false,// 是否允许改变弹层大小
    //move:false, //是否允许拖动 false 不允许拖动
    moveOut:true, //是否允许拖动到窗口外
    success:function(layero, index){//弹层 成功弹出调用的方法
    console.log("success");
    },
    yes: function(index, layero){ //点击确认按钮触发的方法
    console.log("yes");
    },
    cancel: function(index, layero){//点击关闭按钮触发的方法
    console.log("cancel");
    },
    end: function(index, layero){//弹层销毁触发的方法
    console.log("end");
    },
    btn2: function(index, layero){//为按钮绑定事件
    layer.msg("按钮2");
    //阻止弹层自动关闭
    return false;
    }
    ,btn3: function(index, layero){
    layer.msg("按钮3");
    }
    ,btn4: function(index, layero){
    layer.msg("按钮4");
    }
    });
    }); // 弹出信息框
    $("#btn4").click(function(){
    layer.alert("显示内容",{"icon":9},function(index){
    console.log("点击了确定");
    //关闭弹层
    layer.close(index);
    });
    });
    // 弹出询问框
    $("#btn5").click(function(){
    layer.confirm("确定要删除吗?",{"icon":6},function(index){
    console.log("点击了确定");
    //关闭弹层
    layer.close(index);
    });
    });
    // 弹出提示框
    $("#btn6").click(function(){
    layer.msg("确定要删除吗?",{"icon":6},function(index){
    console.log("消失了");
    });
    }); });
    </script>
    </body>
    </html>

    LayUI笔记的更多相关文章

    1. layui 笔记

      弹出层 点击事件 <!DOCTYPE html> <html> <head> <title></title> {load href=&quo ...

    2. 学习Layui笔记-父窗口获取子窗口的radio

      最近学习layui,使用radio做单项选择的时候,发现layui无论怎么取值,都是默认取到第一个radio的值. 百度下找解决方法. html页面部分 <div class="lay ...

    3. layui confirm 嵌套使用 (随笔记)

      使用layui confirm时不要使用aspx控件,使用html的button按钮 借用一下 官方例子 layer.confirm('您是如何看待前端开发?', { btn: ['重要', '奇葩' ...

    4. layui 学习笔记一:layui table 查询、新增、编辑、删除

      一.table数据的呈现(对应查询) 页面代码: @{ ViewBag.Title = "TableGrid"; } @section styles{ <link href= ...

    5. Layui学习笔记(一)—— 关于模块的扩展

      在使用layui的时候,总有官方自带模块不够用想自己扩展的时候,这时候我们就需要扩展模块了. 模块扩展有两种: (一)普通地扩展 layui.define( function (exports) { ...

    6. springboot学习笔记:8. springboot+druid+mysql+mybatis+通用mapper+pagehelper+mybatis-generator+freemarker+layui

      前言: 开发环境:IDEA+jdk1.8+windows10 目标:使用springboot整合druid数据源+mysql+mybatis+通用mapper插件+pagehelper插件+mybat ...

    7. springboot学习笔记:11.springboot+shiro+mysql+mybatis(通用mapper)+freemarker+ztree+layui实现通用的java后台管理系统(权限管理+用户管理+菜单管理)

      一.前言 经过前10篇文章,我们已经可以快速搭建一个springboot的web项目: 今天,我们在上一节基础上继续集成shiro框架,实现一个可以通用的后台管理系统:包括用户管理,角色管理,菜单管理 ...

    8. springboot学习笔记:5.spring mvc(含FreeMarker+layui整合)

      Spring Web MVC框架(通常简称为"Spring MVC")是一个富"模型,视图,控制器"的web框架. Spring MVC允许你创建特定的@Con ...

    9. 【踩坑笔记】layui之单选和复选框不显示

      直接上代码,下面前端页面代码,使用layui框架: <div class="layui-form-item">      <div class="lay ...

    随机推荐

    1. hive on tez 错误记录

      1.执行过程失败,报 Container killed on request. Exit code is 143 如下图: 分析:造成这种原因是由于总内存不多,而容器在jvm中占比过高,修改tez-s ...

    2. Java 面向对象(五)

      包装类 什么是包装类 在面向对象当中"一切皆对象".基本数据类型变量不是对象,比如 int a = 10; 当中就没有对象,所以就很矛盾.此时我们就可以对基本数据类型进行包装,把基 ...

    3. Microsoft Visual C++ 2017 Redistributable

      版本:14.10.25008https://download.microsoft.com/download/4/5/4/454AC59C-DC3F-4AD3-950F-6DCBDF672071/vc_ ...

    4. linux下如何让控制台程序后台运行

      方法1:./test & 方法2:(./test &) 方法3:nohup 和bg 方法4:screen -mS test /root/test   退出程序需要手动进入screen创 ...

    5. arcgis python 使用光标和内存中的要素类将数据加载到要素集 学习:http://zhihu.esrichina.com.cn/article/634

      学习:http://zhihu.esrichina.com.cn/article/634使用光标和内存中的要素类将数据加载到要素集 import arcpy arcpy.env.overwriteOu ...

    6. docker tcp配置

      1. Ubuntu Docker deamon监听tcp端口设置 https://www.jianshu.com/p/e278b0e44e1b 2. Centos https://www.cnblog ...

    7. eclipse导入maven项目有红叉及pom.xml出错的问题的解决

      导入我们的项目的时候总会出现很多红叉,看着很难受,其实可以解决的(本人使用方法一解决)解决方法:1.先build project,然后右键项目->maven->update project ...

    8. Android简单实现滚动悬停效果

      import android.content.Context; import android.support.design.widget.TabLayout; import android.suppo ...

    9. Java中声明泛型方法

      泛型是什么意思在这就不多说了,而Java中泛型类的定义也比较简单,例如:public class Test<T>{}.这样就定义了一个泛型类Test,在实例化该类时,必须指明泛型T的具体类 ...

    10. Qt自定义类重写 copy

      PtsData PtsData::copy(const PtsData &ptsData) { PtsData ptsData1; ptsData1.data_b = ptsData.data ...