【开发】前端工程——layui
layui
常用组件
1. 常用
页面元素
布局
布局容器
栅格系统
基本元素
按钮
导航
选项卡
表格
表单
组件示例
弹出层
日期和时间选择
数据表格
分页
2. LayUI的安装与使用
layui是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛低。由国人开发，16年出厂的框架，和Bootstrap有些相似，但该框架极大的好处就是定义了很多前后端交互的样式接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的成本
官网：Layui - 经典开源模块化前端 UI 框架
文档：Layui 开发使用文档 - 入门指南
特点
- layui属于轻量级框架。适合开发后台前端，在服务端页面由很好效果
- layui是提供给后端开发人员的ui框架，基于DOM驱动
目录结构
它经过了自动化构建，更适合用于生产环境
├─css //css目录
│ │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
│ │ ├─laydate
│ │ └─layer
│ └─layui.css //核心样式文件
├─font //字体图标目录
└─layui.js //核心库
简单使用
<head>
<meta charset="utf-8">
<title>开始使用 layuititle>
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js">script>
head>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
script>
3. 布局容器与栅格系统
布局容器
<div class="layui-container">div>
<div class="layui-container">div>
栅格系统
布局规则
-
layui-row定义行<div class="layui-row">div> -
llayui-col-md*预设类来定义一组列(column)，且放在行（row）内-
md表示不同屏幕取值- xs：超小屏幕(手机)
- sm：小屏幕（平板）
- md：桌面等中等屏幕
- lg：桌面大型屏幕
-
*表示列数量
该列所占用的12等数
可选数量1-12，超过则自动换行
-
响应式规则
- 栅格会自动根据屏幕分辨率选择对应的样式效果
列边距
通过列间距的预设类，来说设定列之间的间距。且一行中最左的列不会出现做边距，最右的列不会出现右边距。预设十二种不同尺寸的边距
/* 支持列之间为 1px-30px 区间的双数间隔，以及 1px，5px，15px，25px的单数间距 */
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30
列偏移
layui-col-md-offset* 的预设类，从而列向右偏移
layui-col-md-offset3 ，代表在 “中型屏幕下”，让该列向右偏移3个列宽度
当低于桌面屏幕的规定的临界值，就会堆叠排列
列嵌套
在列元素 layui-col-md* 中插入行元素 layui-row 可以完成嵌套
4. 基本元素
按钮
向任意HTML元素设定 class=“layui-btn” ，建立一个基础按钮。通过追加格式为 layui-btn-{type} 的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。
<button type="button" class="layui-btn">一个标准的按钮button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮a>
按钮主题
| 名称 | 组合 |
|---|---|
| 原始 | 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-primary layui-border-green” |
| 百搭 | class=“layui-btn layui-btn-primary layui-border-blue” |
| 暖色 | class=“layui-btn layui-btn-primary layui-border-orange” |
| 警告 | class=“layui-btn layui-btn-primary layui-border-red” |
| 深色 | class=“layui-btn layui-btn-primary layui-border-black” |
尺寸
| 尺寸 | 组合 |
|---|---|
| 大型 | class=“layui-btn layui-btn-lg” |
| 默认 | class=“layui-btn” |
| 小型 | class=“layui-btn layui-btn-sm” |
| 迷你 | class=“layui-btn layui-btn-xs” |
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）button>
圆角按钮
| 主题 | 组合 |
|---|---|
| 原始 | 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” |
按钮组
将按钮放入一个*class=“layui-btn-group”*元素中，即可形成按钮组，按钮本身仍然可以随意搭配
<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>
<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>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon">i>
button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon">i>
button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon">i>
button>
div>
图标
字体图标 - 页面元素 - Layui
导航
导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。
依赖加载模块：element
实现步骤：
-
引入资源
<link rel="stylesheet" href="./layui/css/layui.css"> <script src="./layui/layui.js">script> -
依赖加载模块
<script> //注意：导航 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); script> -
显示指定类型的导航
水平导航栏
选中 layui-this
<ul class="layui-nav">
<li class="layui-nav-item">最新活动li>
<li class="layui-nav-item layui-this">产品li>
<li class="layui-nav-item">大数据li>
ul>
二级菜单
<ul class="layui-nav">
<li class="layui-nav-item">最新活动li>
<li class="layui-nav-item layui-this">产品li>
<li class="layui-nav-item">大数据li>
<li class="layui-nav-item">
<a>解决方案a>
<dl class="layui-nav-child">
<dd><a href="">移动模块a>dd>
<dd><a href="">后台模版a>dd>
<dd><a href="">电商平台a>dd>
dl>
li>
ul>
垂直导航
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item">最新活动li>
<li class="layui-nav-item layui-this">产品li>
<li class="layui-nav-item">大数据li>
<li class="layui-nav-item">
<a>解决方案a>
<dl class="layui-nav-child">
<dd><a href="">移动模块a>dd>
<dd><a href="">后台模版a>dd>
<dd><a href="">电商平台a>dd>
dl>
li>
ul>
侧边导航
<ul class="layui-nav layui-nav-side">
<li class="layui-nav-item">最新活动li>
<li class="layui-nav-item layui-this">产品li>
<li class="layui-nav-item">大数据li>
<li class="layui-nav-item">
<a>解决方案a>
<dl class="layui-nav-child">
<dd><a href="">移动模块a>dd>
<dd><a href="">后台模版a>dd>
<dd><a href="">电商平台a>dd>
dl>
li>
ul>
导航主题
通过对导航追加CSS背景类，让导航呈现不同的主题色
水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）
面包屑式导航
<span class="layui-breadcrumb">
<a href="">首页a>
<a href="">国际新闻a>
<a href="">亚太地区a>
<a><cite>正文cite>a>
span>
你还可以通过设置属性 lay-separator=“-” 来自定义分隔符。如： 首页- 国际新闻- 亚太地区- 正文
选项卡
导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。
依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）
实现步骤
-
引入资源
<link rel="stylesheet" href="./layui/css/layui.css"> <script src="./layui/layui.js">script> -
依赖加载模块
<script> //注意：导航 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); script> -
加载HTML
layui-tab选项卡layui-this选中
layui-tab选项头layui-tab-content选项体layui-tab-item选项内容layui-show展示内容
<div class="layui-tab"> <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">内容1div> <div class="layui-tab-item">内容2div> <div class="layui-tab-item">内容3div> <div class="layui-tab-item">内容4div> <div class="layui-tab-item">内容5div> div> div>
选项卡风格
默认风格 layui-tab
简约风格 layui-tab-brief
卡片风格 layui-tab-card
带删除的选项卡
你可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除
<div class="layui-tab" lay-allowClose="true">
<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">1div>
<div class="layui-tab-item">2div>
<div class="layui-tab-item">3div>
<div class="layui-tab-item">4div>
<div class="layui-tab-item">5div>
<div class="layui-tab-item">6div>
div>
div>
表格
基本用法
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
colgroup>
<thead>
<tr>
<th>昵称th>
<th>加入时间th>
<th>签名th>
tr>
thead>
<tbody>
<tr>
<td>贤心td>
<td>2016-11-29td>
<td>人生就像是一场修行td>
tr>
<tr>
<td>许闲心td>
<td>2016-11-28td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…td>
tr>
tbody>
table>
基本属性
| 属性名 | 属性值 | 备注 |
|---|---|---|
| lay-even | 无 | 用于开启 隔行 背景，可与其它属性一起使用 |
| lay-skin=“属性值” | line （行边框风格） row （列边框风格） nob （无边框风格） | 若使用默认风格不设置该属性即可 |
| lay-size=“属性值” | sm （小尺寸） lg （大尺寸） | 若使用默认尺寸不设置该属性即可 |
<table class="layui-table" lay-skin="line">
行边框表格（内部结构参见右侧目录“常规用法”）
table>
<table class="layui-table" lay-skin="row">
列边框表格（内部结构参见右侧目录“常规用法”）
table>
<table class="layui-table" lay-even lay-skin="nob">
无边框表格（内部结构参见右侧目录“常规用法”）
table>
表单
在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）
-
在一个容器中设定
class="layui-form"来标识一个表单元素块<form class="layui-form" action=""> form> -
基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。
<div class="layui-form-item"> <label class="layui-form-label">标签区域label> <div class="layui-input-block"> 原始表单元素区域 div> div>
输入框
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型 取值
class=“layui-input”：layui.css提供的通用CSS类
class=“layui-input-block”：占据全部宽度
class=“layui-input-inline”：占据部分宽度
属性
placeholder 文本框默为空，默认显示的文本信息
autocomplete 表单元素是否自动填充 off |
当浏览器缓存中存在相同 name 属性的值时，会填充
下拉选择框
<select name="city" lay-verify="">
<option value="">请选择一个城市option>
<option value="010">北京option>
<option value="021">上海option>
<option value="0571">杭州option>
select>
-
通过
selected属性设置默认选中项 -
通过
disabled属性开启禁用，可以设置select和option标签禁用下拉框或下拉选项 -
select分组
optgroup<select name="quiz"> <option value="">请选择option> <optgroup label="城市记忆"> <option value="你工作的第一个城市">你工作的第一个城市？option> optgroup> <optgroup label="学生时代"> <option value="你的工号">你的工号？option> <option value="你最喜欢的老师">你最喜欢的老师？option> optgroup> select>
-
通过设定属性 lay-search 来开启搜索匹配功能——模糊匹配
<select name="city" lay-verify="" lay-search> <option value="010">layeroption> <option value="021">formoption> <option value="0571" selected>layimoption> …… select>
复选框
默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>
原始风格：
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
- 属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
- 属性checked可设定默认选中
- 属性lay-skin可设置复选框的风格
- 设置*value=“1”*可自定义值，否则选中时返回的就是默认的on
开关
checkbox复选框的“变种”，通过设定 lay-skin=“switch” 形成了开关风格
<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
- 属性checked可设定默认开
- 属性disabled开启禁用
- 属性lay-text可自定义开关两种状态的文本
- 设置*value=“1”*可自定义值，否则选中时返回的就是默认的on
单选框
<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>
- 属性title可自定义文本
- 属性disabled开启禁用
- 设置*value=“xxx”*可自定义值，否则选中时返回的就是默认的on
文本域
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea">textarea>
组装行内表单
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围label>
<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_max" 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>
- class=“layui-inline”：定义外层行内
- class=“layui-input-inline”：定义内层行内
忽略美化渲染
可以对表单元素增加 lay-ignore ，将不会对该标签进行美化渲染，即保留系统风格
方框表单
通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变
5. 组件
layui-layer
layer 已然成为网页弹出层的首先交互方案
模块加载名称：layer，独立版本：layer.layui.com
layer弹层组件开发文档 - Layui
使用场景
由于layer可以独立使用，也可以通过Layui模块化使用
| 场景 | 用前准备 | 调用方式 |
|---|---|---|
| 1. 作为独立组件使用 | 如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。 | 通过script标签引入layer.js后，直接用即可。 参考：快速上手 |
| 2. layui 模块化使用 | 如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js | 通过*layui.use(‘layer’, callback)*加载模块 |
基本参数
基础参数主要指调用方法时用到的配置项,以键值形式存在，基础参数可合理应用于任何层类型中
-
type - 基本层类型
类型：Number，默认：0 可传入的值有： 0（信息框，默认） 1（页面层） 2（iframe层） 3（加载层） 4（tips层）若你采用*layer.open({type: 1})*方式调用，则type为必填项
-
title - 标题
类型：String/Array/Boolean，默认：'信息' 1. 若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本 2. 若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式 3. 如果你不想显示标题栏，你可以title: false -
content - 内容
类型：String/DOM/Array，默认：'' content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。
/* 信息框 */
layer.open({
type:0,
title:['标题','color:red'],
//content可传入任意的文本或html
content:"Hello"
})
/* 页面层 */
layer.open({
type:1,
title:"系统消息",
content: "Hello"
})
/* iframe */
layer.open({
type:2,
title:"系统消息",
//content是一个URL，如果不想让那个Iframe出现滚动条，可以content:['url','no']
content: "Hello"
})
/* tips */
<span>内容1span>
<span>内容2span>
<span>内容3span>
<span id="#sp">内容4span>
layer.open({
type:4,
content:['内容','#sp']//数组第二项即吸附元素选择器或者DOM
})
aera - 宽高
类型：String/Array，默认：'auto'
在默认状态下，layer是宽高都自适应的，
只定义宽度时，你可以area: '500px'，高度仍然是自适应的。
当你宽高都要定义时，你可以area: ['500px', '300px']
icon - 图标
信息框和加载层的私有参数
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。
-
layer.alert("很高兴见到你",{icon:6})
-
layer.msg('?',{ time: 0,//不自动关闭 btn:['是','否'],//按钮 yes: function(index){ layer.close(index);//关闭当前弹出层 layer.msg('你好!',{ icon: 6//图标 btn:['开心','不开心'] }) } })
-
layer.msg('常用的弹出层')
-
layer.msg('玩命加载中...',function(){ //关闭后操作 layer.msg('') })
日期和时间组件
layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器.五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）
模块加载名称：laydate，独立版本：http://www.layui.com/laydate/
使用
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/build/layui.css" media="all">
head>
<body>
<div class="layui-inline">
<input type="text" class="layui-input" id="test1">
div>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test1' //将日期控件绑定到元素上
});
});
script>
body>
html>
参数
通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数.
-
elem - 绑定元素
类型：String/DOM，默认值：无 必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象laydate.render({ elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等 }); -
type - 控件选择类型
类型：String，默认值：date用于单独提供不同的选择器类型，可选值如下表：
type可选值 名称 用途 year 年选择器 只提供年列表选择 month 年月选择器 只提供年、月选择 date 日期选择器 可选择：年、月、日。type默认值，一般可不填 time 时间选择器 只提供时、分、秒选择 datetime 日期时间选择器 可选择：年、月、日、时、分、秒 //年范围选择 laydate.render({ elem: '#test' ,type: 'year' ,range: true //或 range: '~' 来自定义分割字符 });
//年月范围选择 laydate.render({ elem: '#test' ,type: 'month' ,range: true //或 range: '~' 来自定义分割字符 });
//日期范围选择 laydate.render({ elem: '#test' ,range: true //或 range: '~' 来自定义分割字符 });
//时间范围选择 laydate.render({ elem: '#test' ,type: 'time' ,range: true //或 range: '~' 来自定义分割字符 });
//日期时间范围选择
laydate.render({
elem: '#test'
,type: 'datetime'
,range: true //或 range: '~' 来自定义分割字符
});
-
format - 自定义格式
类型：String，默认值：yyyy-MM-dd通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：
格式符 说明 yyyy 年份，至少四位数。如果不足四位，则前面补零 y 年份，不限制位数，即不管年份多少位，前面均不补零 MM 月份，至少两位数。如果不足两位，则前面补零。 M 月份，允许一位数。 dd 日期，至少两位数。如果不足两位，则前面补零。 d 日期，允许一位数。 HH 小时，至少两位数。如果不足两位，则前面补零。 H 小时，允许一位数。 mm 分钟，至少两位数。如果不足两位，则前面补零。 m 分钟，允许一位数。 ss 秒数，至少两位数。如果不足两位，则前面补零。 s 秒数，允许一位数。 通过上述不同的格式符组合成一段日期时间字符串，可任意排版
格式 示例值 yyyy-MM-dd HH:mm:ss 2017-08-18 20:08:08 yyyy年MM月dd日 HH时mm分ss秒 2017年08月18日 20时08分08秒 yyyyMMdd 20170818 dd/MM/yyyy 18/08/2017 yyyy年M月 2017年8月 M月d日 8月18日 -
value - 初始值
类型：String，默认值：new Date() 支持传入符合format参数设定的日期格式字符，或者 new Date()//传入符合format格式的字符给初始值 laydate.render({ elem: '#test' ,value: '2018-08-18' //必须遵循format参数设定的格式 }); //传入Date对象给初始值 laydate.render({ elem: '#test' ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳 });
分页
模块加载名称：laypage
使用
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layPage快速使用title>
<link rel="stylesheet" href="/static/build/layui.css" media="all">
<script src="/static/build/layui.js">script>
head>
<body>
<div id="test1">div>
<script>
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,count: 50 //数据总数，从服务端得到
});
});
script>
body>
html>
基本参数
通过核心方法：laypage.render(options) 来设置基础参数。
| 参数选项 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| elem | 指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: ‘id’ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id’) | String/Object | - |
| count | 数据总数。一般通过服务端得到 | Number | - |
| limit | 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。 | Number | 10 |
| limits | 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框 | Array | [10, 20, 30, 40, 50] |
| curr | 起始页。一般用于刷新类型的跳页以及HASH跳页。如：code//开启location.hash的记录laypage.render({ elem: 'test1' ,count: 500 ,curr: location.hash.replace('#!fenye=', '') //获取起始页 ,hash: 'fenye' //自定义hash值}); |
Number | 1 |
| groups | 连续出现的页码个数 | Number | 5 |
| prev | 自定义“上一页”的内容，支持传入普通文本和HTML | String | 上一页 |
| next | 自定义“下一页”的内容，同上 | String | 下一页 |
| first | 自定义“首页”的内容，同上 | String | 1 |
| last | 自定义“尾页”的内容，同上 | String | 总页数值 |
| layout | 自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域） | Array | [‘prev’, ‘page’, ‘next’] |
| theme | 自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类，以便自定义主题 | String | - |
| hash | 开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页 | String/Boolean | false |
jump - 切换分页的回调
laypage.render({
elem: 'test1'
,count: 70 //数据总数，从服务端得到
,jump: function(obj, first){
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
//do something
}
}
});
数据表格
它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
模块加载名称：table
使用
在页面放置一个元素
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用title>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
head>
<body>
<table id="demo" lay-filter="test">table>
<script src="/layui/layui.js">script>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: '/demo/table/user/' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
});
script>
body>
html>
数据格式
{
"count":,
"data":[
{
"id":,
"username":,
"sex":
}
]
}
初始化渲染方式
| 方式 | 机制 | 适用场景 |
|---|---|---|
| 方法渲染 | 用JS方法的配置完成渲染 | （推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。 |
| 自动渲染 | HTML配置，自动渲染 | 无需写过多 JS，可专注于 HTML 表头部分 |
| 转换静态表格 | 转化一段已有的表格元素 | 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可 |
自动渲染
在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染
- 带有 class=“layui-table” 的 标签。
- 对标签设置属性 lay-data=“” 用于配置一些基础参数
- 在 标签中设置属性*lay-data=“”*用于配置表头信息
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">IDth>
<th lay-data="{field:'username', width:80}">用户名th>
<th lay-data="{field:'sex', width:80, sort: true}">性别th>
<th lay-data="{field:'city'}">城市th>
<th lay-data="{field:'sign'}">签名th>
<th lay-data="{field:'experience', sort: true}">积分th>
<th lay-data="{field:'score', sort: true}">评分th>
<th lay-data="{field:'classify'}">职业th>
<th lay-data="{field:'wealth', sort: true}">财富th>
tr>
thead>
table>
方法渲染
原始的 table 标签只需要一个 选择器
<table id="demo" lay-filter="test">table>
layui.user('table',function(){
var table = layui.table;
//执行渲染
table.render({
elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
,height: 315 //容器高度
,cols: [{}] //设置表头
//,…… //更多参数参考右侧目录：基本参数选项
});
})
table.render() 方法返回一个对象：var tableIns = table.render(options)
转换静态表格
假设你的页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素
<table lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'username', width:100}">昵称th>
<th lay-data="{field:'experience', width:80, sort:true}">积分th>
<th lay-data="{field:'sign'}">签名th>
tr>
thead>
<tbody>
<tr>
<td>贤心1td>
<td>66td>
<td>人生就像是一场修行atd>
tr>
<tr>
<td>贤心2td>
<td>88td>
<td>人生就像是一场修行btd>
tr>
<tr>
<td>贤心3td>
<td>33td>
<td>人生就像是一场修行ctd>
tr>
tbody>
table>
var table = layui.table;
//转换静态表格
table.init('demo', {
height: 315 //设置高度
,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
//支持所有基础参数
});
基础参数
格式
场景一：下述方法中的键值即为基础参数项
table.render({
height: 300
,url: '/api/data'
});
场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
……
更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); //转化静态表格
> var tableObj = table.render({});
tableObj.reload(options); //重载表格
table 数据表格文档 - Layui
工具 - 分页
| 参数 | 类型 | 说明 | 示例值 |
|---|---|---|---|
| page | Boolean/Object | 开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外） | {theme: ‘#c00’} |
cols - 表头参数
| 参数 | 类型 | 说明 | 示例值 |
|---|---|---|---|
| type | String | 设定列类型。可选值有： normal（常规列，无需设定） checkbox（复选框列） radio（单选框列，layui 2.4.0 新增）numbers（序号列） space（空列） |
任意一个可选值 |
| hide | Boolean | 是否初始隐藏列，默认：false。layui 2.4.0 新增 | true |
工具栏
<table id="demo" lay-filter="demo">table>
<script type="text/html" id="toolbarDemo">
<!-- 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>
script>
<script type="text/html" id="barDemo">
<div class="layui-btn-container">
<a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
<a class="layui-btn layui-btn-sm" lay-event="delete">删除</a>
<a class="layui-btn layui-btn-sm" lay-event="update">编辑</a>
</div>
script>
<script type="text/javascript">
layui.use("table",function(){
var table = layui.table;
table.render({
elem:"#demo",
url:"",,
cols:[[
{},
{fileld:'aa',type:"numbers"},
//设置表头工具栏
{field:"操作",type:"#barDemo"}
]],
page:true,//开启分页
toolbar:'#toolbarDemo'
})
})
script>
工具栏事件
头监听事件
语法：
table.on('toobar(lay-filter-name)',function(obj){
obj.config对象可以获取id属性值，表示当前容器的id属性值
//获取当前表格中被选中对象，返回数据
var checkStatus = table.checkstatus(obj.config.id)
console.log(checkStatus)
});
表头工具栏的监听事件 - table.on(‘toolbar()’,function(){})
table.on('toobar(demo)',function(obj){
obj.config对象可以获取id属性值，表示当前容器的id属性值
//获取当前表格中被选中对象，返回数据
var checkStatus = table.checkstatus(obj.config.id)
//获取当前表格被选中的记录对象，返回数据
console.log(checkStatus)
//获取事件名
var eventName = obj.event;
var arr = chechStatus.data;
//判断事件名，执行对应代码
switch(eventName){
case "getCheckStatus":
layer.alert(JSON.stringify(arr));
break;
case "getCheckLength":
layer.msg("选中了"+arr.length+"条记录!")
break;
case "isAll":
//通过isAll属性判断是否全选
var flag = checkStatus.isAll;
var str = flag?'全选':'未全选';
layer.msg(str)
break;
}
});
行工具栏监听事件 - table.on(‘tool()’,function(){})
原始容器
<table id="demo" lay-filter="test">table>
工具栏模板：
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
</div>
script>
<script;>
//JS 调用：
table.render({
elem: '#demo'
,toolbar: '#toolbarDemo'
//,…… //其他参数
});
//触发事件
//工具条事件
//工具条事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if(layEvent === 'detail'){ //查看
//do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123'
,title: 'xxx'
});
} else if(layEvent === 'LAYTABLE_TIPS'){
layer.alert('Hi，头部工具栏扩展的右侧图标。');
}
});
script>
监听单元格编辑事件
表头参数
| 参数 | 类型 | 说明 | 示例值 |
|---|---|---|---|
| edit | String | 单元格编辑类型（默认不开启）目前只支持：text（输入框） | text |
table.on('edit(test)',functionobj(){
//获取修改后的值
var value = obj.value;
//得到当前修改的行对象
var data = obj.data
})
表格重载
| 语法 | 说明 | 适用场景 |
|---|---|---|
| table.reload(ID, options, deep) | 参数 ID 即为基础参数id对应的值，见：设定容器唯一ID 参数 options 即为各项基础参数 参数 deep：是否采用深度重载（即参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认 false 注意：deep 参数为 layui 2.6.0 开始新增。 | 所有渲染方式 |
| tableIns.reload(options, deep) | 参数同上 tableIns 可通过 var tableIns = table.render() 得到 | 仅限方法级渲染 |
<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>
$(document).on('click','#searchBtn',function(data){
//获取搜索文本框的内容
var searchText = $('demoReload');
//调用数据表格的重载方法
table.reload('demo',{
where:{//设定需要传递的参数
id:search.val(),
name:""
},
page:{//指定条件查询的起始页，如果未指定则从当前页开始查询，此页前面的数据不纳入筛选
curr:1
},
})
})
LayuiMini
layuimini - 基于Layui的后台管理系统前端模板 (99php.cn)
文件上传
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
layui.use(['upload', 'element', 'layer'], function(){
var $ = layui.jquery
,upload = layui.upload
,element = layui.element
,layer = layui.layer;
//多文件列表示例
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'
,url: 'https://httpbin.org/post' //改成您自己的上传接口
,accept: 'file'
,multiple: true
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['+ index +'">'
,''+ file.name +' '
,''+ (file.size/1024).toFixed(1) +'kb '
,'等待上传 '
,''
,''
,''
,' '
,' '].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
,done: function(res, index, upload){
if(res.files.file){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('上传成功');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('上传失败');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
})