Layui基础

认识 Layui

一、介绍

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。
官网：https://www.layui.com

二、下载安装

<link rel="stylesheet" href="./layui/css/layui.css" />
<script src="./layui/layui.js"></script>
1
2

三、模块

layui 定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后，成为 layui 最核心的模块加载引擎。

1、模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zn1wUfaQ-1669037555174)(assets/01.jpg)]

2、加载模块

layui 通过 use 方法加载模块

<button type="button" class="layui-btn" id="test1">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>

<script>
    layui.use(['form', 'upload'], function(){  //如果只加载一个模块，可以不填数组。如：layui.use('form')
  var form = layui.form //获取form模块
  ,upload = layui.upload; //获取upload模块

  //提交按钮事件
  form.on('submit(test)', function(data){
    console.log(data);
  });

  //实例化一个上传控件
  upload({
    url: '上传接口url'
    ,success: function(data){
      console.log(data);
    }
  })
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3、Jquery

layui 部分模块依赖 jQuer，但是不用去额外加载 jQuery，layui 已经将 jQuery 最稳定的一个版本改为 layui 的内部模块

<script>
    layui.use('layer', function(){
        var $ = layui.jquery;
    });
</script>

1
2
3
4
5
6

表单按钮

一、按钮

1、写法

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

2、颜色

<button type="button" class="layui-btn layui-btn-primary">原始button>
<button type="button" class="layui-btn">默认button>
<button type="button" class="layui-btn layui-btn-normal">百搭button>
<button type="button" class="layui-btn layui-btn-warm">暖色button>
<button type="button" class="layui-btn layui-btn-danger">警告button>
<button type="button" class="layui-btn layui-btn-disabled">禁用button>
1
2
3
4
5
6

3、镂空

<button type="button" class="layui-btn layui-btn-primary layui-border-green">
    主色
button>
<button type="button" class="layui-btn layui-btn-primary layui-border-blue">
    百搭
button>
<button type="button" class="layui-btn layui-btn-primary layui-border-orange">
    暖色
button>
<button type="button" class="layui-btn layui-btn-primary layui-border-red">
    警告
button>
<button type="button" class="layui-btn layui-btn-primary layui-border-black">
    深色
button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4、尺寸

<button type="button" class="layui-btn layui-btn-lg">大型button>
<button type="button" class="layui-btn">正常button>
<button type="button" class="layui-btn layui-btn-sm">小型button>
<button type="button" class="layui-btn layui-btn-xs">迷你button>
<button type="button" class="layui-btn layui-btn-fluid">最大化 (响应)button>
1
2
3
4
5

5、圆角

<button type="button" class="layui-btn layui-btn-radius">圆角button>
1

6、按钮组

<div class="layui-btn-group">
    <button type="button" class="layui-btn">增加button>
    <button type="button" class="layui-btn">编辑button>
    <button type="button" class="layui-btn">删除button>
div>
1
2
3
4
5

二、表单

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的 HTML 结构及 CSS 类，来组装成各式各样的表单元素，并通过内置的 form 模块来完成各种交互。
依赖加载模块：form （如果不加载 form 模块，select、checkbox、radio 等将无法显示，并且无法使用 form 相关功能）

1、输入框

<form class="layui-form">
    <input type="text" placeholder="请输入标题" class="layui-input" />
form>
1
2
3

2、下拉选择框
默认选中

<form class="layui-form">
    <select>
        <option value="">请选择一个老师option>
        <option value="1">天蓬option>
        <option value="2">灭绝师太option>
        <option value="3">西门大官人option>
        <option value="4">欧阳克option>
    select>
    <select>
        <option value="">option>
        <option value="1">天蓬option>
        <option value="2">灭绝师太option>
        <option value="3">西门大官人option>
        <option value="4">欧阳克option>
    select>
    <select>
        <option value="1">天蓬option>
        <option value="2">灭绝师太option>
        <option value="3">西门大官人option>
        <option value="4">欧阳克option>
    select>
form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

自定义：选中、禁用

<form class="layui-form">
    <select>
        <option value="1">天蓬option>
        <option value="2" selected>灭绝师太option>
        <option value="3">西门大官人option>
        <option value="4" disabled>欧阳克option>
    select>
form>
1
2
3
4
5
6
7
8

分组

<form class="layui-form">
    <select>
        <option value="">请选择option>
        <optgroup label="男老师">
            <option value="1">天蓬option>
            <option value="3">西门大官人option>
            <option value="4">欧阳克option>
        optgroup>
        <optgroup label="女老师">
            <option value="2">灭绝师太option>
        optgroup>
    select>
form>
1
2
3
4
5
6
7
8
9
10
11
12
13

3、单选框

<form class="layui-form">
    <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 />
form>
1
2
3
4
5

4、多选框
默认风格

<form class="layui-form" action="">
    <input type="checkbox" name="" title="天蓬" checked />
    <input type="checkbox" name="" title="灭绝师太" />
    <input type="checkbox" name="" title="欧阳克" disabled />
form>
1
2
3
4
5

原始风格

<form class="layui-form" action="">
    <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 />
form>
1
2
3
4
5

5、开关

<form class="layui-form" action="">
    <input type="checkbox" name="" lay-skin="switch" />
    <input type="checkbox" name="" lay-skin="switch" lay-text="开启|关闭" />
    <input type="checkbox" name="" lay-skin="switch" disabled />
form>
1
2
3
4
5

6、文本框

<form class="layui-form" action="">
    <textarea name="" placeholder="请输入" class="layui-textarea">textarea>
form>
1
2
3

7、区块结构

class="layui-form-item" class="layui-form-label" class="layui-input-block"
class="layui-input-inline"
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">输入框label>
        <div class="layui-input-block">
            <input type="text" placeholder="请输入标题" class="layui-input" />
        div>
    div>
    <div class="layui-form-item">
        <label class="layui-form-label">输入框label>
        <div class="layui-input-inline">
            <input type="text" placeholder="请输入标题" class="layui-input" />
        div>
    div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择框label>
        <div class="layui-input-block">
            <select>
                <option value="">请选择一个老师option>
                <option value="1">天蓬option>
                <option value="2">灭绝师太option>
                <option value="3">西门大官人option>
                <option value="4">欧阳克option>
            select>
        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">
            <input type="checkbox" name="" title="天蓬" checked />
            <input type="checkbox" name="" title="灭绝师太" />
            <input type="checkbox" name="" title="欧阳克" disabled />
        div>
    div>
    <div class="layui-form-item">
        <label class="layui-form-label">富文本label>
        <div class="layui-input-block">
            <textarea placeholder="请输入" class="layui-textarea">textarea>
        div>
    div>
form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

8、表单方框
class=“layui-form-pane” 设定表单的方框风格
class=“layui-form-text”
pane 复选框/开关/单选框，需要额外添加属性

<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">输入框label>
        <div class="layui-input-block">
            <input type="text" placeholder="请输入标题" class="layui-input" />
        div>
    div>
    <div class="layui-form-item">
        <label class="layui-form-label">输入框label>
        <div class="layui-input-inline">
            <input type="text" placeholder="请输入标题" class="layui-input" />
        div>
        <div class="layui-input-inline">
            <input type="text" placeholder="请输入标题" class="layui-input" />
        div>
    div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择框label>
        <div class="layui-input-block">
            <select>
                <option value="">请选择一个老师option>
                <option value="1">天蓬option>
                <option value="2">灭绝师太option>
                <option value="3">西门大官人option>
                <option value="4">欧阳克option>
            select>
        div>
    div>
    <div class="layui-form-item" pane>
        <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">
            <input type="checkbox" name="" title="天蓬" checked />
            <input type="checkbox" name="" title="灭绝师太" />
            <input type="checkbox" name="" title="欧阳克" disabled />
        div>
    div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">富文本label>
        <div class="layui-input-block">
            <textarea placeholder="请输入" class="layui-textarea">textarea>
        div>
    div>
form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

表单模块

一、预设元素属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SjqRAwzf-1669037555175)(assets/02.png)]

1、title

<div class="layui-form layui-form-item" pane>
    <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 layui-form-item">
    <label class="layui-form-label">多选框label>
    <div class="layui-input-block">
        <input type="checkbox" name="" title="天蓬" checked />
        <input type="checkbox" name="" title="灭绝师太" />
        <input type="checkbox" name="" title="欧阳克" disabled />
    div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2、lay-skin

<div class="layui-form layui-form-item">
    <label class="layui-form-label">多选框label>
    <div class="layui-input-block">
        <input type="checkbox" lay-skin="primary" title="天蓬" value="1" />
        <input type="checkbox" lay-skin="switch" title="灭绝师太" value="2" />
        <input type="checkbox" title="欧阳克" value="3" />
    div>
div>
1
2
3
4
5
6
7
8

3、lay-ignore

<div class="layui-form-item">
    <label class="layui-form-label">选择框label>
    <div class="layui-input-block">
        <select lay-filter="test1" lay-ignore>
            <option value="">请选择一个老师option>
            <option value="1">天蓬option>
            <option value="2">灭绝师太option>
            <option value="3">西门大官人option>
            <option value="4">欧阳克option>
        select>
    div>
div>
<div class="layui-form-item" pane>
    <label class="layui-form-label">单选框label>
    <div class="layui-input-block">
        <input type="radio" name="sex" value="nan" lay-ignore title="男" />
        <input
            type="radio"
            name="sex"
            value="nv"
            lay-ignore
            title="女"
            checked
        />
        <input
            type="radio"
            name="sex"
            value=""
            lay-ignore
            title="保密"
            disabled
        />
    div>
div>
<div class="layui-form-item" pane>
    <label class="layui-form-label">多选框label>
    <div class="layui-input-block">
        <input lay-ignore type="checkbox" title="天蓬" value="1" />
        <input lay-ignore type="checkbox" title="灭绝师太" value="2" />
        <input lay-ignore type="checkbox" title="欧阳克" value="3" />
    div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

二、事件触发

语法：form.on(‘event(过滤器值)’, callback);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ceemuk2t-1669037555176)(assets/03.png)]

1、select 触发下拉选择事件
elem 得到 select 原始 DOM 对象
value 得到被选中的值
othis 得到美化后的 DOM 对象

<div class="layui-form layui-form-item">
    <label class="layui-form-label">选择框label>
    <div class="layui-input-block">
        <select lay-filter="test">
            
            <option value="">请选择一个老师option>
            <option value="1">天蓬option>
            <option value="2">灭绝师太option>
            <option value="3">西门大官人option>
            <option value="4">欧阳克option>
        select>
    div>
div>

<script>
    layui.use('form', function () {
        //引用form 模块
        var form = layui.form //赋值一个变量
        form.on('select(test)', function (data) {
            console.log(data)
        })
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gGVyAJHQ-1669037555176)(assets/04.png)]

lay-filter=“” 事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的

<div class="layui-form layui-form-item">
    <label class="layui-form-label">选择框label>
    <div class="layui-input-block">
        <select lay-filter="test1">
            <option value="">请选择一个老师option>
            <option value="1">天蓬option>
            <option value="2">灭绝师太option>
            <option value="3">西门大官人option>
            <option value="4">欧阳克option>
        select>
    div>
div>
1
2
3
4
5
6
7
8
9
10
11
12

2、checkbox 触发复选框勾选事件
elem 得到 checkbox 原始 DOM 对象
elem.checked 是否被选中，true 或者 false
value 复选框 value 值，也可以通过 elem.value 得到
othis 得到美化后的 DOM 对象


<script>
  layui.use("form", function () {
    var form = layui.form;
    form.on("checkbox(test2)", function (data) {
      console.log(data);
    });
  });
</script>

1
2
3
4
5
6
7
8
9
10

<div class="layui-form-item" pane>
    <label class="layui-form-label">多选框label>
    <div class="layui-input-block">
        <input type="checkbox" lay-filter="test2" title="天蓬" value="1" />
        <input type="checkbox" lay-filter="test2" title="灭绝师太" value="2" />
        <input type="checkbox" lay-filter="test2" title="欧阳克" value="3" />
    div>
div>
1
2
3
4
5
6
7
8

3、switch 触发复选框开关事件
elem 得到 checkbox 原始 DOM 对象
elem.checked 开关是否被选中，true 或者 false
value 复选框 value 值，也可以通过 elem.value 得到
othis 得到美化后的 DOM 对象


<script>
  layui.use("form", function () {
    var form = layui.form;
    form.on("switch(test3)", function (data) {
      console.log(data);
    });
  });
</script>

1
2
3
4
5
6
7
8
9
10

<div class="layui-form-item" pane>
    <label class="layui-form-label">开关label>
    <div class="layui-input-block">
        <input type="checkbox" lay-filter="test3" lay-skin="switch" />
    div>
div>
1
2
3
4
5
6

4、radio 触发单选框事件
elem 得到 radio 原始 DOM 对象
value 被点击的 radio 的 value 值


<script>
  layui.use("form", function () {
    var form = layui.form;
    form.on("radio(test4)", function (data) {
      console.log(data);
    });
  });
</script>
<div class="layui-form-item" pane>
  <label class="layui-form-label">单选框</label>
  <div class="layui-input-block">
    <input
      type="radio"
      name="test4"
      lay-filter="test4"
      value="1"
      title="欧阳克"
    />
    <input
      type="radio"
      name="test4"
      lay-filter="test4"
      value="2"
      title="灭绝师太"
    />
    <input
      type="radio"
      name="test4"
      lay-filter="test4"
      value="3"
      title="西门大官人"
    />
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

5、submit 触发表单提交事件
elem 被执行事件的元素 DOM 对象，一般为 button 对象
form 被执行提交的 form 对象，一般在存在 form 标签时才会返回
field 当前容器的全部表单字段，名值对形式：{name: value}


<script>
  layui.use("form", function () {
    var form = layui.form;
    form.on("submit(submit)", function (data) {
      console.log(data);
    });
  });
</script>

1
2
3
4
5
6
7
8
9
10

lay-submit 绑定触发提交的元素

<button type="button" class="layui-btn" lay-submit lay-filter="submit">
    提交
button>
1
2
3

三、表单验证

lay-verify 表单验证，支持多条规则的验证
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XlJ5DcQ4-1669037555177)(assets/05.png)]

<input type="text" class="layui-input" lay-verify="required" />
<input type="text" class="layui-input" lay-verify="phone" />
<input type="text" class="layui-input" lay-verify="email" />
1
2
3

lay-reqText 自定义必填项的提示文本

<input
    type="text"
    class="layui-input"
    lay-verify="required"
    lay-reqText="请输入php代码"
/>
1
2
3
4
5
6

多个验证:必填项\手机

<form lass="layui-form">
    <div class="layui-form-item">
        <input type="text" class="layui-input" lay-verify="required|phone" />
    div>
    <button type="button" class="layui-btn" lay-submit lay-filter="submit">
        提交
    button>
form>
<script>
    layui.use('form', function () {
        //引用form 模块
        var form = layui.form //赋值一个变量
        form.on('submit(submit)', function (data) {
            console.log(data)
        })
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

lay-verType 提示层模式：tips（吸附层）、alert（对话框）、msg（默认）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2AFhfEPC-1669037555178)(assets/06.png)]

<input
    type="text"
    class="layui-input"
    lay-verify="required"
    lay-reqText="请输入php代码"
    lay-verType="alert"
/>
1
2
3
4
5
6
7

四、更新渲染

Layui 没有双向绑定机制，但是我们需要动态修改

<div class="layui-form-item">
    <label class="layui-form-label">省市label>
    <div class="layui-input-inline">
        <select lay-filter="test1">
            <option value="">请选择省option>
            <option value="1">安徽option>
            <option value="2">北京option>
            <option value="3">江苏option>
        select>
    div>
    <div class="layui-input-inline">
        <select lay-filter="test2" id="city">
            <option value="">请选择市option>
        select>
    div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

render() 方法，更新渲染


<script>
  layui.use("form", function () {
    var $ = layui.jquery;
    var form = layui.form;
    form.on("select(test1)", function (data) {
      var option = '';
      option += '';
      option += '';
      option += '';
      option += '';
      option += '';
      option += '';
      option += '';
      option += '';
      $("#city").html(option);
      form.render();
    });
  });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

参数 1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7H28d6Gw-1669037555179)(assets/07.png)]

弹出层模块

一、弹出层

1、alert 普通弹框

layer.alert(content, options, yes)

三个参数：内容，置配(图标)，返回函数

<script>
    layui.use("layer", function () {
        var layer = layui.layer;
        alert('这是原此的');
        layer.alert("灭绝师太");
        layer.alert("西门大官人",{icon: 1});
        layer.alert("欧阳克",function(){
            console.log('匿名方法');
        });
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12

2、confirm 询问框

layer.confirm(content, options, yes, cancel)
四个参数：内容，置配(图标)，点击确定时的回调函数，点击取消时的回调函数

layer.confirm('你是欧阳克吗?', { icon: 3, title: '疑问' }, function (index) {
    console.log(index)
    layer.close(index)
})
1
2
3
4

3、msg 提示框

layer.msg(content, options, end)

三个参数：内容，置配(图标)，结束函数

layer.msg('我是欧阳克')
layer.msg('我是欧阳克', { icon: 6 })
layer.msg('我是欧阳克', function () {
    console.log('欧阳克')
})
1
2
3
4
5

4、load 加载层

layer.load(icon, options)
icon 支持传入 0-2


layer.load();
layer.load(1);
layer.load(2, { time: 2 \* 1000 });

1
2
3
4
5

5、tips 吸附层

layer.tips(content, follow, options)

三个参数：内容，吸符在那个标签上，置配(图标)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RBkFIBIq-1669037555179)(assets/11.png)]


<div style="margin: 50px" id="test">
    <div>这里显示tip提示框</div>
</div>
<script>
    layui.use("layer", function () {
        var layer = layui.layer;
        layer.tips("tip提示框", "#test", {
            tips: 2,
        });
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

6、open 核心方法

layer.open(options) 不管是使用哪种方式创建层，都是走 open()

layer.open({
    title: '标题',
    content: '我是欧阳克',
})
1
2
3
4

二、基础参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j9tnDps3-1669037555180)(assets/08.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dca5hUT-1669037555180)(assets/09.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UgaBEFvu-1669037555181)(assets/10.png)]

1、信息框

<style>
    .test {
        border: 10px solid #e9e7e7;
        color: orange;
    }
</style>
<script>
    layui.use("layer", function () {
        var layer = layui.layer;
        layer.open({
            type: 0,
            title: "标题",
            content: "我是欧阳克",
            skin: "test",  //这放css类名
            area: ["500px", "500px"], // area:"500px",
            offset: "lt",
            icon: 3,
            btn: ["按钮一", "按钮二", "按钮三"], //可以无限个按钮
            btn1: function (index, layero) {
                console.log("按钮一");
            },
            btn2: function (index, layero) {
                console.log("按钮二");
            },
            btn3: function (index, layero) {
                console.log("按钮三");
            },
            btnAlign: "c",
            closeBtn: 2,
            shade: 0.5,
            shadeClose: true,
            time: 1000,
            anim: 2,
            resize: true,
            success(index, layero) {
                console.log("弹出成功");
            },
            yes(index, layero) {  //btn1的事件会被这个事件
                console.log("点击确定按钮");
            },
            cancel(index, layero) {
                console.log("点击取消按钮");
            },
        });
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

2、页面层

layer.open({
    type: 1,
    title: '标题',
    content:
        '输入框
',
})
1
2
3
4
5
6

3、iframe 层

layer.open({
    type: 2,
    title: '欧阳克',
    content: 'http://www.ouyangke.cn',
})
1
2
3
4
5

4、加载层

layer.open({
    type: 3,
})
1
2
3

5、tips 层

<div style="margin: 150px" id="test">
    <div>这里显示tip提示框div>
div>
;
<script>
    layui.use('layer', function () {
        var layer = layui.layer
        layer.open({
            type: 4,
            content: ['我是欧阳克', '#test'],
            tips: 1,
        })
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

三、其他方法

1、关闭指定层

layer.close(index)
var index = layer.alert('灭绝师太')
layer.close(index)

layer.open({
    type: 0,
    title: '标题',
    content: '我是欧阳克',
    yes(index, layero) {
        console.log('点击确定按钮')
        layer.close(index)
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13

<script>
    layui.use("layer", function () {
      var layer = layui.layer;
      var index =  layer.open({
            type: 0,
            title: "标题",
            content: "我是欧阳克",
            skin: "test",  //这放css类名
            area: ["500px", "500px"], // area:"500px",
            offset: "lt",
            icon: 3,
            btn: ["按钮一", "按钮二", "按钮三"], //可以无限个按钮
            btn1: function (index, layero) {
                console.log("按钮一");
            },
            btn2: function (index, layero) {
                console.log("按钮二");
            },
            btn3: function (index, layero) {
                console.log("按钮三");
            },
            btnAlign: "c",
            closeBtn: 2,
            shade: 0.5,
            shadeClose: true,
            time: 1000,
            anim: 2,
            resize: true,
            success(index, layero) {
                console.log("弹出成功");
            },
            yes(index, layero) {  //btn1的事件会被这个事件
                layui.close(index);  //回调成功关闭这个弹窗
                console.log("点击确定按钮");
            },
            cancel(index, layero) {
                console.log("点击取消按钮");
            },
        });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

2、最大化

layer.full()
var index = layer.alert('灭绝师太')
layer.full(index)

layer.full(
    layer.open({
        type: 2,
        title: '欧阳克',
        maxmin: true,
        content: 'http://www.ouyangke.cn',
    })
)
1
2
3
4
5
6
7
8
9
10
11
12

<script>
    layui.use("layer", function () {
        var layer = layui.layer;
      layer.full(
        layer.open({
            type: 0,
            title: "标题",
            content: "我是欧阳克",
            skin: "test",  //这放css类名
            area: ["500px", "500px"], // area:"500px",
            offset: "lt",
            icon: 3,
            btn: ["按钮一", "按钮二", "按钮三"], //可以无限个按钮
            btn1: function (index, layero) {
                console.log("按钮一");
            },
            btn2: function (index, layero) {
                console.log("按钮二");
            },
            btn3: function (index, layero) {
                console.log("按钮三");
            },
            btnAlign: "c",
            closeBtn: 2,
            shade: 0.5,
            shadeClose: true,
            time: 1000,
            anim: 2,
            resize: true,
            success(index, layero) {
                console.log("弹出成功");
            },
            yes(index, layero) {  //btn1的事件会被这个事件
                layui.close(index);  //回调成功关闭这个弹窗
                console.log("点击确定按钮");
            },
            cancel(index, layero) {
                console.log("点击取消按钮");
            },
        })
      )
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

备：其他方法

layer.closeAll() 关闭所有层
layer.min() 最小化
layer.restore() 恢复弹窗
layer.style() 重新定义层的样式
layer.title() 改变层的标题
layer.iframeAuto() 指定 iframe 层自适应
layer.iframeSrc() 重置特定 iframe url
layer.setTop() 置顶当前窗口
layer.getChildFrame() 获取 iframe 页的 DOM
layer.getFrameIndex() 获取特定 iframe 层的索引

1
2
3
4
5
6
7
8
9
10
11

四、其他层

1、输入层

layer.prompt(options, yes)
layer.prompt(
    {
        formType: 2, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
        value: '我是欧阳克',
        title: '请输入老师介绍',
        area: ['800px', '350px'],
    },
    function (value, index, elem) {
        console.log(value)
        layer.close(index)
    }
)
1
2
3
4
5
6
7
8
9
10
11
12
13

2、tab 层

layer.tab({
    area: ['600px', '300px'],
    tab: [
        {
            title: 'TAB1',
            content: '灭绝师太',
        },
        {
            title: 'TAB2',
            content: '西门大官人',
        },
        {
            title: 'TAB3',
            content: '欧阳克',
        },
    ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3、

layer.photos({
    photos: {
        title: '', //相册标题
        id: 123, //相册id
        start: 1, //初始显示的图片序号，默认0
        data: [
            //相册包含的图片，数组格式
            {
                alt: '图片1',
                pid: 1, //图片id
                src: 'https://img.php.cn/upload/article/000/000/003/60c034e9d3595631.jpg', //原图地址
                thumb: 'https://img.php.cn/upload/article/000/000/003/60c034e9d3595631.jpg', //缩略图地址
            },
            {
                alt: '图片2',
                pid: 2, //图片id
                src: 'https://img.php.cn/upload/article/000/000/003/6093abebf1766794.jpg', //原图地址
                thumb: 'https://img.php.cn/upload/article/000/000/003/6093abebf1766794.jpg', //缩略图地址
            },
            {
                alt: '图片3',
                pid: 3, //图片id
                src: 'https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg', //原图地址
                thumb: 'https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg', //缩略图地址
            },
        ],
    },
    anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

表格

一、页面元素

1、常规用法

class=“layui-table”

<table class="layui-table">
    <colgroup>
        <col width="150" />
        <col width="200" />
        <col />
    colgroup>
    <thead>
        <tr>
            <th>IDth>
            <th>姓名th>
            <th>技能th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>1td>
            <td>灭绝师太td>
            <td>HTML、CSS、PHPtd>
        tr>
        <tr>
            <td>2td>
            <td>西门大官人td>
            <td>PHP、ThinkPHP、Laraveltd>
        tr>
        <tr>
            <td>3td>
            <td>天蓬td>
            <td>HTML、CSS、JavaScripttd>
        tr>
        <tr>
            <td>4td>
            <td>欧阳克td>
            <td>PHP、ThinkPHP、小程序td>
        tr>
    tbody>
table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

2、其他风格

行边框风格

<table class="layui-table" lay-skin="line">table>
1

列边框风格

<table class="layui-table" lay-skin="row">table>
1

无边框风格

<table class="layui-table" lay-skin="nob">table>
1

3、尺寸

小尺寸

<table class="layui-table" lay-size="sm">table>
1

大尺寸

<table class="layui-table" lay-size="lg">table>
1

4、隔行背景

<table class="layui-table" lay-even>table>
1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Us5gGttl-1669037555187)(assets/12.png)]

二、表格渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zr9j5XFF-1669037555188)(assets/13.png)]

1、方法渲染

<table id="demo">table>
<script>
    layui.use('table', function () {
        var table = layui.table
        table.render({
            elem: '#demo',
            cols: [
                [
                    //表头
                    { field: 'area_id', title: 'ID' },
                    { field: 'area_name', title: '城市名' },
                    { field: 'area_ip_desc', title: '归属' },
                    { field: 'first_pinyin', title: '拼音' },
                    { field: 'pinyin', title: '首字母' },
                    { field: 'status', title: '状态' },
                ],
            ],
            data: [
                {
                    area_id: 110000,
                    area_name: '北京',
                    area_ip_desc: '中国,北京',
                    first_pinyin: 'Beijing',
                    pinyin: 'B',
                    status: 1,
                },
                {
                    area_id: 120000,
                    area_name: '天津',
                    area_ip_desc: '中国,天津',
                    first_pinyin: 'Tianjin',
                    pinyin: 'T',
                    status: 1,
                },
                {
                    area_id: 130000,
                    area_name: '河北省',
                    area_ip_desc: '中国,河北省',
                    first_pinyin: 'Hebei',
                    pinyin: 'H',
                    status: 1,
                },
                {
                    area_id: 140000,
                    area_name: '山西省',
                    area_ip_desc: '中国,山西省',
                    first_pinyin: 'Shanxi',
                    pinyin: 'S',
                    status: 1,
                },
                {
                    area_id: 150000,
                    area_name: '内蒙古自治区',
                    area_ip_desc: '中国,内蒙古自治区',
                    first_pinyin: 'Inner Mongolia',
                    pinyin: 'I',
                    status: 1,
                },
                {
                    area_id: 210000,
                    area_name: '辽宁省',
                    area_ip_desc: '中国,辽宁省',
                    first_pinyin: 'Liaoning',
                    pinyin: 'L',
                    status: 1,
                },
                {
                    area_id: 220000,
                    area_name: '吉林省',
                    area_ip_desc: '中国,吉林省',
                    first_pinyin: 'Jilin',
                    pinyin: 'J',
                    status: 1,
                },
                {
                    area_id: 230000,
                    area_name: '黑龙江省',
                    area_ip_desc: '中国,黑龙江省',
                    first_pinyin: 'Heilongjiang',
                    pinyin: 'H',
                    status: 1,
                },
                {
                    area_id: 310000,
                    area_name: '上海',
                    area_ip_desc: '中国,上海',
                    first_pinyin: 'Shanghai',
                    pinyin: 'S',
                    status: 1,
                },
                {
                    area_id: 320000,
                    area_name: '江苏省',
                    area_ip_desc: '中国,江苏省',
                    first_pinyin: 'Jiangsu',
                    pinyin: 'J',
                    status: 1,
                },
            ],
        })
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

2、基础参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2phYqLwF-1669037555189)(assets/14.png)]

<table id="demo">table>
<script>
    layui.use('table', function () {
        var table = layui.table
        table.render({
            elem: '#demo',
            cols: [
                [
                    //表头
                    { field: 'area_id', title: 'ID' },
                    { field: 'area_name', title: '城市名' },
                    { field: 'area_ip_desc', title: '归属' },
                    { field: 'first_pinyin', title: '拼音' },
                    { field: 'pinyin', title: '首字母' },
                    { field: 'status', title: '状态' },
                ],
            ],
            data: [
                {
                    area_id: 110000,
                    area_name: '北京',
                    area_ip_desc: '中国,北京',
                    first_pinyin: 'Beijing',
                    pinyin: 'B',
                    status: 1,
                },
                {
                    area_id: 120000,
                    area_name: '天津',
                    area_ip_desc: '中国,天津',
                    first_pinyin: 'Tianjin',
                    pinyin: 'T',
                    status: 1,
                },
            ],
            width: 500,
            height: 300,
            cellMinWidth: 120,
            skin: 'nob',
            even: true,
            size: 'lg',
        })
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

三、表头参数

cols 设置表头。值是一个二维数组。方法渲染方式必填

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R3jwulZt-1669037555190)(assets/15.png)]

<table id="demo">table>
<script>
    layui.use('table', function () {
        var table = layui.table
        table.render({
            elem: '#demo',
            cols: [
                [
                    { type: 'checkbox', LAY_CHECKED: true },
                    { type: 'radio' },
                    { type: 'numbers' },
                    { type: 'space', title: '空列', width: 120 },
                    //表头
                    {
                        field: 'area_id',
                        title: 'ID',
                        width: 120,
                        fixed: 'left',
                    },
                    { field: 'area_name', title: '城市名', unresize: true },
                    { field: 'area_ip_desc', title: '归属', align: 'right' },
                    { field: 'first_pinyin', title: '拼音', hide: true },
                    {
                        field: 'pinyin',
                        title: '首字母',
                        minWidth: 500,
                        sort: true,
                    },
                    {
                        field: 'status',
                        title: '状态',
                        fixed: 'right',
                        style: 'color:red;',
                    },
                ],
            ],
        })
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

四、异步数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u0mgFcgg-1669037555191)(assets/16.png)]

1、url 接口

<table id="demo">table>
<script>
    layui.use('table', function () {
        var table = layui.table
        table.render({
            elem: '#demo',
            url: 'http://admin.ouyangke.cn/index.php/api/Layui/city',
            cols: [
                [
                    { type: 'checkbox', LAY_CHECKED: true },
                    { type: 'radio' },
                    { type: 'numbers' },
                    { type: 'space', title: '空列', width: 120 },
                    //表头
                    {
                        field: 'area_id',
                        title: 'ID',
                        width: 120,
                        fixed: 'left',
                    },
                    { field: 'area_name', title: '城市名', unresize: true },
                    { field: 'area_ip_desc', title: '归属', align: 'right' },
                    { field: 'first_pinyin', title: '拼音', hide: true },
                    {
                        field: 'pinyin',
                        title: '首字母',
                        minWidth: 500,
                        sort: true,
                    },
                    {
                        field: 'status',
                        title: '状态',
                        fixed: 'right',
                        style: 'color:red;',
                    },
                ],
            ],
        })
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

2、接口返回数据的格式

{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [
    {

    },
    {

    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3、where 传参数

<table id="demo">table>
<script>
    layui.use('table', function () {
        var table = layui.table
        table.render({
            elem: '#demo',
            url: 'http://admin.ouyangke.cn/index.php/api/Layui/city',
            where: {
                id: 0,
                status: 1,
            },
            cols: [
                [
                    { type: 'checkbox', LAY_CHECKED: true },
                    { type: 'radio' },
                    { type: 'numbers' },
                    { type: 'space', title: '空列', width: 120 },
                    {
                        field: 'area_id',
                        title: 'ID',
                        width: 120,
                        fixed: 'left',
                    },
                    { field: 'area_name', title: '城市名', unresize: true },
                    { field: 'area_ip_desc', title: '归属', align: 'right' },
                    { field: 'first_pinyin', title: '拼音', hide: true },
                    {
                        field: 'pinyin',
                        title: '首字母',
                        minWidth: 500,
                        sort: true,
                    },
                    {
                        field: 'status',
                        title: '状态',
                        fixed: 'right',
                        style: 'color:red;',
                    },
                ],
            ],
        })
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

4、回调方法

table.render({
    elem: '#demo',
    url: 'http://admin.ouyangke.cn/index.php/api/Layui/city',
    where: {
        id: 0,
        status: 1,
    },
    cols: [
        [
            { type: 'checkbox', LAY_CHECKED: true },
            { type: 'radio' },
            { type: 'numbers' },
            { type: 'space', title: '空列', width: 120 },
            { field: 'area_id', title: 'ID', width: 120, fixed: 'left' },
            { field: 'area_name', title: '城市名', unresize: true },
            { field: 'area_ip_desc', title: '归属', align: 'right' },
            { field: 'first_pinyin', title: '拼音', hide: true },
            { field: 'pinyin', title: '首字母', minWidth: 500, sort: true },
            {
                field: 'status',
                title: '状态',
                fixed: 'right',
                style: 'color:red;',
            },
        ],
    ],
    done(e) {
        console.log(e)
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

5、开启分页

page: true

table.render({
    elem: '#demo',
    url: 'http://admin.ouyangke.cn/index.php/api/Layui/city',
    where: {
        id: 0,
        status: 1,
    },
    cols: [
        [
            { type: 'checkbox', LAY_CHECKED: true },
            { type: 'radio' },
            { type: 'numbers' },
            { type: 'space', title: '空列', width: 120 },
            { field: 'area_id', title: 'ID', width: 120, fixed: 'left' },
            { field: 'area_name', title: '城市名', unresize: true },
            { field: 'area_ip_desc', title: '归属', align: 'right' },
            { field: 'first_pinyin', title: '拼音', hide: true },
            { field: 'pinyin', title: '首字母', minWidth: 500, sort: true },
            {
                field: 'status',
                title: '状态',
                fixed: 'right',
                style: 'color:red;',
            },
        ],
    ],
    done(e) {
        console.log(e)
    },
    page: true,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

五、数据操作

1、绑定按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sMKDwynL-1669037555192)(assets/17.png)]

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

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm">添加</button>
        <button class="layui-btn layui-btn-sm">编辑</button>
        <button class="layui-btn layui-btn-sm">删除</button>
    </div>
</script>
<table id="demo"></table>
<script>
    layui.use('table', function () {
        var table = layui.table
        table.render({
            toolbar: '#toolbar',
            elem: '#demo',
            url: 'http://admin.ouyangke.cn/index.php/api/Layui/city',
            where: {
                id: 0,
                status: 1,
            },
            cols: [
                [
                    { type: 'checkbox' },
                    { type: 'radio' },
                    { field: 'area_id', title: 'ID', width: 120 },
                    { field: 'area_name', title: '城市名', unresize: true },
                    { field: 'area_ip_desc', title: '归属', align: 'right' },
                    { field: 'first_pinyin', title: '拼音' },
                    {
                        field: 'pinyin',
                        title: '首字母',
                        minWidth: 500,
                        sort: true,
                    },
                    { field: 'status', title: '状态', style: 'color:red;' },
                ],
            ],
            page: true,
            limit: 30,
            limits: [30, 60, 90],
        })
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

defaultToolbar：filter 显示筛选图标，exports 显示导出图标，print 显示打印图标

table.render({
    toolbar: '#toolbar',
    defaultToolbar: ['filter', 'print', 'exports'],
})
1
2
3
4

2、工具条事件

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

event 为内置事件名 filter 为容器

lay-filter 设定的值

<script type="text/html" id="toolbar">
    <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="update">编辑</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>
<table id="demo" lay-filter="test"></table>

<script>
    table.on("toolbar(test)", function (obj) {
    switch (obj.event) {
      case "add":
        layer.msg("添加");
        break;
      case "update":
        layer.msg("编辑");
        break;
      case "delete":
        layer.msg("删除");
        break;
    }
  })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3、checkbox 复选框事件

checked 当前是否选中状态

data 选中行的相关数据

type 如果触发的是全选，则为：all，如果触发的是单选，则为：one

<table id="demo" lay-filter="test"></table>
<script>
    table.on('checkbox(test)', function (obj){' '}
    {
        console.log(obj) //当前行的一些常用操作集合
    }
    )
</script>
1
2
3
4
5
6
7
8

4、radio 单选框事件

checked 当前是否选中状态

data 选中行的相关数据

<table id="demo" lay-filter="test">table>
<script>
    table.on('radio(test)', function (obj) {
        console.log(obj)
    })
script>
1
2
3
4
5
6

5、row 单双击事件

tr 得到当前行元素对象

data 得到当前行数据

<table id="demo" lay-filter="test">table>
<script>
    table.on('row(test)', function (obj) {
        console.log(obj)
    })
script>
1
2
3
4
5
6

选中单行数据

<table id="demo" lay-filter="test">table>
<script>
    table.on('row(test)', function (obj) {
        obj.tr.find('div.layui-unselect.layui-form-radio')[0].click() //单选
        obj.tr.find('div.layui-unselect.layui-form-checkbox')[0].click() // 多选
    })
script>
1
2
3
4
5
6
7

6、sort 排序切换

field 当前排序的字段名 type

当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序） this

当前排序的 th 对象

table.on('sort(test)', function (obj) {
    console.log(obj)
})
1
2
3

重新加载表格

table.on('sort(test)', function (obj) {
    table.reload('demo', {
        initSort: obj, //记录初始排序，如果不设的话，将无法标记表头的排序状态。
        toolbar: '#toolbar',
        elem: '#demo',
        url: 'http://admin.ouyangke.cn/index.php/api/Layui/city',
        where: {
            id: 0,
            status: 1,
            field: obj.field,
            order: obj.type,
        },
        cols: [
            [
                { type: 'radio' },
                { field: 'area_id', title: 'ID', width: 120, sort: true },
                { field: 'area_name', title: '城市名', unresize: true },
                { field: 'area_ip_desc', title: '归属', align: 'right' },
                { field: 'first_pinyin', title: '拼音' },
                { field: 'pinyin', title: '首字母', minWidth: 500, sort: true },
                { field: 'status', title: '状态', style: 'color:red;' },
            ],
        ],
        page: {
            curr: 1,
        },
        limit: 30,
        limits: [30, 60, 90],
    })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

实战

一、列表

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
        <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
        <script type="text/javascript" src="./layui/layui.js">script>
    head>
    <body>
        <script type="text/html" id="toolbar">
            <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="update">
                    编辑
                </button>
                <button class="layui-btn layui-btn-sm" lay-event="delete">
                    删除
                </button>
            </div>
        script>
        <table id="demo" lay-filter="test">table>
        <script>
            layui.use('table', function () {
                var table = layui.table
                table.render({
                    toolbar: '#toolbar',
                    elem: '#demo',
                    url: 'http://admin.ouyangke.cn/index.php/api/Layui/city',
                    where: {
                        id: 0,
                        status: 1,
                    },
                    cols: [
                        [
                            { type: 'radio' },
                            {
                                field: 'area_id',
                                title: 'ID',
                                width: 120,
                                sort: true,
                            },
                            {
                                field: 'area_name',
                                title: '城市名',
                                unresize: true,
                            },
                            {
                                field: 'area_ip_desc',
                                title: '归属',
                                align: 'right',
                            },
                            { field: 'first_pinyin', title: '拼音' },
                            {
                                field: 'pinyin',
                                title: '首字母',
                                minWidth: 500,
                                sort: true,
                            },
                            {
                                field: 'status',
                                title: '状态',
                                style: 'color:red;',
                            },
                        ],
                    ],
                    page: true,
                    limit: 10,
                    limits: [10, 20, 30],
                })
                table.on('row(test)', function (obj) {
                    obj.tr
                        .find('div.layui-unselect.layui-form-radio')[0]
                        .click() //单选
                })
                table.on('toolbar(test)', function (obj) {
                    console.log(obj.event)
                    switch (obj.event) {
                        case 'add':
                            layer.msg('添加')
                            break
                        case 'update':
                            layer.msg('编辑')
                            break
                        case 'delete':
                            layer.msg('删除')
                            break
                    }
                })
            })
        script>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

二、添加

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
        <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
        <script type="text/javascript" src="./layui/layui.js">script>
    head>
    <body>
        <script type="text/html" id="toolbar">
            <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="update">
                    编辑
                </button>
                <button class="layui-btn layui-btn-sm" lay-event="delete">
                    删除
                </button>
            </div>
        script>
        <table id="demo" lay-filter="test">table>
        <script>
            layui.use('table', function () {
                var table = layui.table
                var $ = layui.jquery
                var form = layui.form
                table.render({
                    toolbar: '#toolbar',
                    elem: '#demo',
                    url: 'http://admin.ouyangke.cn/index.php/api/Layui/city',
                    where: {
                        id: 0,
                        status: 1,
                    },
                    cols: [
                        [
                            { type: 'radio' },
                            { field: 'area_id', title: 'ID', width: 120 },
                            { field: 'area_name', title: '城市名' },
                            {
                                field: 'area_ip_desc',
                                title: '归属',
                                align: 'right',
                            },
                            { field: 'first_pinyin', title: '拼音' },
                            { field: 'pinyin', title: '首字母' },
                            {
                                field: 'status',
                                title: '状态',
                                style: 'color:red;',
                            },
                        ],
                    ],
                    page: true,
                    limit: 10,
                    limits: [10, 20, 30],
                })
                table.on('toolbar(test)', function (obj) {
                    switch (obj.event) {
                        case 'add':
                            layer.full(
                                layer.open({
                                    title: '添加',
                                    type: 2,
                                    content: './add.html',
                                    maxmin: true,
                                    btn: ['确定', '关闭'],
                                    yes: function (index, layero) {},
                                })
                            )
                            break
                        case 'update':
                            layer.msg('编辑')
                            break
                        case 'delete':
                            layer.msg('删除')
                            break
                    }
                })
            })
        script>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

添加表单

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
        <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
        <script type="text/javascript" src="./layui/layui.js">script>
    head>
    <body>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">城市名label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        class="layui-input"
                        id="area_name"
                        placeholder="请输入城市名"
                    />
                div>
            div>
            <div class="layui-form-item">
                <label class="layui-form-label">归属label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        class="layui-input"
                        id="area_ip_desc"
                        placeholder="请输入归属"
                    />
                div>
            div>
            <div class="layui-form-item">
                <label class="layui-form-label">拼音label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        class="layui-input"
                        id="first_pinyin"
                        placeholder="请输入拼音"
                    />
                div>
            div>
            <div class="layui-form-item">
                <label class="layui-form-label">首字母label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        class="layui-input"
                        id="pinyin"
                        placeholder="请输入首字母"
                    />
                div>
            div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态label>
                <div class="layui-input-block">
                    <select id="status">
                        <option value="1" selected>开启option>
                        <option value="0">关闭option>
                    select>
                div>
            div>
        form>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

提交数据

getChildFrame 获取 iframe 页的 DOM

yes: function (index, layero) {
  var body = layer.getChildFrame("body", index);
  var data = {
    area_name: body.find("#area_name").val(),
    area_ip_desc: body.find("#area_ip_desc").val(),
    first_pinyin: body.find("#first_pinyin").val(),
    pinyin: body.find("#pinyin").val(),
    status: body.find("#status").val(),
  };
  $.post(
    "http://admin.ouyangke.cn/index.php/api/Layui/city_add",
    data,
    function (res) {
      if (res.code > 0) {
        layer.msg("添加失败", { icon: 2 });
      } else {
        layer.msg("添加成功", { icon: 1 });
        table.render({
          toolbar: "#toolbar",
          elem: "#demo",
          url: "http://admin.ouyangke.cn/index.php/api/Layui/city",
          where: {
            id: 0,
            status: 1,
          },
          cols: [
            [
              { type: "radio" },
              { field: "area_id", title: "ID", width: 120 },
              { field: "area_name", title: "城市名" },
              {
                field: "area_ip_desc",
                title: "归属",
                align: "right",
              },
              { field: "first_pinyin", title: "拼音" },
              { field: "pinyin", title: "首字母" },
              {
                field: "status",
                title: "状态",
                style: "color:red;",
              },
            ],
          ],
          page: true,
          limit: 10,
          limits: [10, 20, 30],
        });
        layer.close(index);
      }
    },
    "json"
  );
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

三、修改

三、修改
case "update":
  var data = table.checkStatus(obj.config.id).data;
  if (!data[0]) {
    layer.msg("请选择一条数据", { icon: 2 });
    return false;
  }
  layer.full(
    layer.open({
      title: "修改",
      type: 2,
      content: "./edit.html",
      maxmin: true,
      btn: ["确定", "关闭"],
      yes: function (index, layero) {
        var body = layer.getChildFrame("body", index);
        console.log(body.find("#area_name").val());
        console.log(body.find("#area_ip_desc").val());
        console.log(body.find("#first_pinyin").val());
        console.log(body.find("#pinyin").val());
        console.log(body.find("#status").val());
      },
    })
  );
  break;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

修改页面

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
        <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
        <script type="text/javascript" src="./layui/layui.js">script>
    head>
    <body>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">城市名label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        class="layui-input"
                        id="area_name"
                        placeholder="请输入城市名"
                    />
                div>
            div>
            <div class="layui-form-item">
                <label class="layui-form-label">归属label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        class="layui-input"
                        id="area_ip_desc"
                        placeholder="请输入归属"
                    />
                div>
            div>
            <div class="layui-form-item">
                <label class="layui-form-label">拼音label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        class="layui-input"
                        id="first_pinyin"
                        placeholder="请输入拼音"
                    />
                div>
            div>
            <div class="layui-form-item">
                <label class="layui-form-label">首字母label>
                <div class="layui-input-block">
                    <input
                        type="text"
                        class="layui-input"
                        id="pinyin"
                        placeholder="请输入首字母"
                    />
                div>
            div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态label>
                <div class="layui-input-block">
                    <select id="status">select>
                div>
            div>
        form>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

设置修改页面数据

success: function (layero, index) {
  var body = layer.getChildFrame("body", index);
  body.find("#area_name").val(data[0].area_name);
  body.find("#area_ip_desc").val(data[0].area_ip_desc);
  body.find("#first_pinyin").val(data[0].first_pinyin);
  body.find("#pinyin").val(data[0].pinyin);
  if (data[0].status == 1) {
    var select =
      '';
  } else {
    var select =
      '';
  }
  body.find("#status").html(select);
  var iframeWindow = layero.find("iframe")[0].contentWindow;
  iframeWindow.layui.form.render();
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

四、修改表格数据

templet 自定义列模板

cols: [
  [
    { type: "radio" },
    { field: "area_id", title: "ID", width: 120 },
    { field: "area_name", title: "城市名" },
    { field: "area_ip_desc", title: "归属", align: "right" },
    { field: "first_pinyin", title: "拼音" },
    { field: "pinyin", title: "首字母" },
    {
      field: "status",
      title: "状态",
      templet: function (res) {
        if (res.status == 1) {
          return '开启';
        } else {
          return '禁用';
        }
      },
    },
  ],
],

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

相关阅读:
这几款好用的办公工具，你们还不知道吗？
【CoderSay】Code For Better 谷歌开发者之声 - 相遇2022GoogleSummit
Synchronized代码详解？
短视频账号矩阵系统源码/技术源码分享/技术搭建架构
 【Python脚本进阶】1.3、第一个脚本：UNIX口令破解机
 （2023，ControlNet，CFGRW，diffusion，控制组合）向文本到图像扩散模型添加条件控制
 jQuery的介绍和简单实用
 【中国电工技术学会主办】2022年能源，电力与电气工程国际研讨会（CoEEPE 2022）
MinIO与MySQL对比以及存储的相关知识
 搭建一个通用监控告警平台，架构上需要有哪些设计
原文地址：https://blog.csdn.net/qq_41988669/article/details/127973173