layui.js css 最细致的LayUI【前端框架】从入门到实战-快速搭建后台管理系统

6.0 表单的常用属性

6.1 输入框

required：注册浏览器所规定的必填字段lay-verify=“required”：注册 form 模块需要验证的类型class=“layui-input”：layui.css 提供的通用 CSS 类

6.2 下拉选择框

通过 selected 属性设置默认选中项通过 disabled 属性开启禁用，可以设置 select 和 option 标签(表示禁用下拉框和禁用下拉选项)通过 optgroup 标签给 select 分组通过设置 lay-search 属性开启搜索匹配功能

①分组

可以通过 optgroup 标签给select分组

②开启搜索匹配

通过设置 lay-search 属性开启搜索匹配功能

6.3 复选框

通过设置 title 属性设置自定义文本(如果不需要显示文本，则不设置 title 属性)通过 checked 属性设置被选中的项通过·lay-skin属性设置复选框的样式效果(lay-skin=“primary” 表示原始效果)通过 disabled 属性禁用元素

①开关

将复选框，设置 ==lay-skin=“switch” 形成开关风格通过 lay-text=“打开的值|关闭的值” 来设定开关的两种状态的文本，通过==|== 分隔通过 checked 属性设置默认打开状态通过 disabled 属性禁用开关通过 value 属性设置选中的值

6.4 单选框

通过 checked 设置默认选中项通过 disabled 属性禁用单选框通过 value 属性设置选中的值

6.5 文本域

给 textarea 标签添加class=“layui-textarea”

6.6 组装行内表单

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

给 div 设置 class=“layui-inline” ： 定义外层行内给 div 设置 class=“layui-input-inline” ：定义内层行内

6.7 表单方框风格

给 form 标签追加 class="layui-form-pane "，来设定表单的方框风格。内部结构不变，值得注意的是：复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性

八、弹出层

8.1 弹出层

弹出层官方文档：https://layuion.com/layer/

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)*加载模块

①作为独立组件使用

1、首先去https://layuion.com/layer/独立版本官网下载组件包

2、下载完成后解压，将 layer.js 和 layer.css 拷贝到我们的项目中

3、引入资源

4、开始使用

②使用模块化

引入资源

2、在 script 中使用 layui.use() 加载模块

依赖模块：layer

8.2 基础参数

①type 基本层类型

类型 Number ， 默认为0 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

③area宽高

类型： String/Array，默认为auto在默认状态下，layer是宽高都自适应的

但当你只想定义宽度时，你可以 area: ‘500px’，高度仍然是自适应的当你宽高都要定义时，你可以 area: [‘500px’, ‘300px’]

④btn按钮

类型：String/Array，默认 ‘确认’信息框(type = 0)模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以 btn: ‘我知道了’，当你要定义两个按钮时，你可以btn: [‘yes’, ‘no’]当然，你也可以定义更多按钮，比如：btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推

⑤time自动关闭所需毫秒

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

⑥content内容

类型：String/DOM/Array，默认 : " " content 可传入的值是灵活多变的，不仅可以传入普通的 html 内容，还可以指定DOM，更可以随着 type 的不同而不同

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

内容1

内容2

内容3

内容4

⑦icon图标

类型：Number，默认：-1(信息框) / 0(加载层)信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2

我们的信息框还可以参与互动响应,会有多个选项可选：

8.3 核心方法

①layer.open(options)

原始核心方法创建任何类型的弹层都会返回一个当前层索引，上述的 options 即是基础参数

②layer.alert()

普通信息框

③layer.msg()

提示框默认是 3s 关闭

④layer.load()

加载层加载层默认是不会自动关闭的

内容1

内容2

内容3

内容4

九、日期与时间选择

日期与时间选择官方文档：https://layuion.com/docs/modules/laydate.html

和 layer 一样，你可以在 layui 中使用 layDate，也可直接使用 layDate 独立版

场景用前准备调用方式1. 在 layui 模块中使用下载 layui 后，引入layui.css和layui.js即可通过*layui.use(‘laydate’, callback)*加载模块后，再调用方法2. 作为独立组件使用去 layDate 独立版本官网下载组件包，引入 laydate.js 即可直接调用方法使用

我们使用模块化使用

1、引入资源

2、在 script 中使用 layui.use() 加载模块

依赖模块：laydate

9.1 基础参数

基础参数选项

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

①elem绑定元素

类型：String/DOM ，默认值：无必填项，用于执行绑定日期渲染的元素，值一般为选择器，或DOM对象

②type控件选择类型

类型：String ，默认值：date用于单独提供不同的选择器类型，可选值如下表

③format自定义格式

类型：String，默认值：yyyy-MM-dd通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示

④value初始值

类型：String，默认值：new Date()支持传入符合format参数设定的日期格式字符，或者 new Date()

⑤lang语言

类型：String，默认：cn内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。

⑥theme主题

类型：String ，默认值：default内置了多种主题，theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）

⑦calendar公历节日

类型：Boolean，默认值：false内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示

十、分页

分页官方文档：https://layuion.com/docs/modules/laypage.html模块加载名称：laypagelaypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染

10.1 基础参数

①基础参数选项

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

②elem绑定元素

类型：String/Object，比填项elem 指向存放分页的容器，值可以是 容器 ID、DOM对象

elem: ‘id’ 注意：这里不能加 # 号elem: document.getElementById(‘id’)

③count数据总数

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

④limit每页显示条数

类型：Number，默认值 10laypage将会借助 count 和 limit 计算出分页数。

⑤layout自定义排版

类型：Array，默认值：[‘prev’, ‘page’, ‘next’]自定义排版，可选值有：

count ：总条目输出区域limit：条目选项区域prev：上一页区域page：分页区域next：下一页区域refresh：页面刷新区域(layui 2.3.0新增)skip：快捷跳页区域

⑥limits每页条数的选择项

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

⑦groups连续出现的页码个数

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

10.2 jump切换分页的回调

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）

十一、数据表格

支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。模块加载名称：table

1、引入资源

2、在页面放置一个元素，然后通过 table.render() 方法指定该容器

注意：上面有一个数据接口 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"

}

]

}

11.1 三种初始化渲染方式

①方法渲染

②自动渲染

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

带有 class=“layui-table” 的 标签

对标签设置属性 lay-data=" " 用于配置一些基础参数 在 标签中设置属性 lay-data=" " 用于配置表头信息。

11.2 基础参数

基础参数官方文档：https://layuion.com/docs/modules/table.html#options官方文档参数很多，我们不必记忆，只要会查会用即可

①elem绑定元素

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

②cols设置表头

表头参数官方文档：https://layuion.com/docs/modules/table.html#cols

类型：Array设置表头，值是一个二维数组。表头参数设定在数组内，表头部分参数如下：

③url异步数据参数

官方文档：https://layuion.com/docs/modules/table.html#async

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

11.3 page开启分页

类型：Boolean/Object，开启分页(默认为 false)支持传入一个对象，里面可包含 laypage 组件所有支持的参数(jump、elem除外)

11.4 toolbar开启表格、头部工具栏

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

toolbar: ‘#toolbarDemo’ 指向自定义工具栏模板选择器toolbar: ‘

xxx

’ 直接传入工具栏模板字符toolbar: true 仅开启工具栏，不显示左侧模板toolbar: ‘default’ 让工具栏左侧显示默认的内置模板

①defaultTooblar头部工具栏右侧图标

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

filter: 显示筛选图标exports: 显示导出图标print: 显示打印图标

11.5 监听头工具栏事件

官方文档：https://layuion.com/docs/modules/table.html#on

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

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

event 为内置事件名，filter 为容器 lay-filter 设定的值 回调函数返回一个 object 参数

obj.config对象中可以获取id属性值，即表示当前容器的ID属性值obj.event 对象中可以获取 事件名table.checkStatus(obj.config.id) 获取当前表格被选中记录对象，返回数组

obj 包含如下：

obj.event 包含如下：

table.checkStatus(obj.config.id) 包含如下：

11.6 监听行工具栏事件

官方文档：https://layuion.com/docs/modules/table.html#ontool

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

filter 为容器 lay-filter 设定的值 回调函数返回一个 object 参数

obj.data 获取当前行数据obj.event 获取 lay-event 对应的值 (也可以是表头 event 参数对应的值)

obj.data 包含如下：

11.7 监听单元格编辑

官方文档：https://layuion.com/docs/modules/table.html#onedit

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

edit 类型String，单元格编辑类型（默认不开启）目前只支持：text（输入框） 语法：table.on(‘edit(filter)’,callback)

filter 为容器 lay-filter 设定的值 单元格被编辑，且值发生改变时触发，回调函数返回一个 object 参数

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

11.8 数据表格重载

官方文档：https://layuion.com/docs/modules/table.html#reload

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

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

推荐链接

 您阅读本篇文章共花了：