laytpl语法

👤拔丝英语网 🕔2024/01/09 14:19 📁国外生活

认识 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>

三、模块

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

1、模块

模块名	描述
layer	弹出层组件
laydate	日期与时间组件
laypage	分页组件
laytpl	模板引擎
table	数据表格
form	表单组件
upload	图片/文件上传
dropdown	下拉菜单组件
transfer	穿梭框组件
tree	树形组件
colorpicker	颜色选择器
element	元素操作
slider	滑块组件
rate	评分组件
carousel	通用轮播组件
flow	流加载组件
util	工具集组件
code	代码高亮组件

2、加载模块

layui 通过 use 方法加载模块

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

3、`Jquery`

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

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

表单按钮

一、按钮

1、写法

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

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>

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>

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>

5、圆角

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

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>

二、表单

在一个容器中设定 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>

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>

自定义：选中、禁用

<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>

分组

<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>

3、单选框

<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 />

4、多选框

默认风格

<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 />

5、开关

<input type="checkbox" name="" lay-skin="switch" />
<input type="checkbox" name="" lay-skin="switch" lay-text="开启|关闭" />
<input type="checkbox" name="" lay-skin="switch" disabled />

6、文本框

<textarea name="" placeholder="请输入" class="layui-textarea"></textarea>

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>

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>

表单模块

一、预设元素属性

属性名	说明
title	设定元素名称，用于 checkbox、radio 框
lay-skin	定义元素的风格，目前只对 checkbox 元素有效
lay-ignore	是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格
lay-filter	事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。
lay-verify	表单验证，支持多条规则的验证。
lay-verType	用于定义异常提示层模式。
lay-reqText	用于自定义必填项（`lay-verify="required"`）的提示文本
lay-submit	绑定触发提交的元素，如 button

1、`title`

<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>

2、`lay-skin`

<div class="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>

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>

二、事件触发

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

event	描述
select	触发 `select` 下拉选择事件
checkbox	触发 `checkbox` 复选框勾选事件
switch	触发 `checkbox` 复选框开关事件
radio	触发 `radio` 单选框事件
submit	触发表单提交事件

1、`select` 触发下拉选择事件

elem 得到 select 原始 DOM 对象
value 得到被选中的值
othis 得到美化后的 DOM 对象

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

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

<div class="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>

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>
<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>

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>
<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>

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>

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>

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

<button type="button" class="layui-btn" lay-submit lay-filter="submit">
  提交
</button>

三、表单验证

lay-verify 表单验证，支持多条规则的验证

属性名	说明
required	必填项
phone	手机号
email	邮箱
url	网址
number	数字
date	日期
identity	身份证
自定义值	自定义值

<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" />

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

<input
  type="text"
  class="layui-input"
  lay-verify="required"
  lay-reqText="请输入php代码"
/>

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

<input
  type="text"
  class="layui-input"
  lay-verify="required"
  lay-reqText="请输入php代码"
  lay-verType="alert"
/>

四、更新渲染

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>

render() 方法，更新渲染

<script>
  layui.use("form", function () {
    var $ = layui.jquery;
    var form = layui.form;
    form.on("select(test1)", function (data) {
      var option = '<option value="">请选择市</option>';
      option += '<option value="1">合肥</option>';
      option += '<option value="2">芜湖市</option>';
      option += '<option value="3">蚌埠市</option>';
      option += '<option value="4">淮南市</option>';
      option += '<option value="5">马鞍山市</option>';
      option += '<option value="6">淮北市</option>';
      option += '<option value="7">铜陵市</option>';
      option += '<option value="8">安庆市</option>';
      $("#city").html(option);
      form.render();
    });
  });
</script>

参数 1

参数（type）值	描述
select	刷新 select 选择框渲染
checkbox	刷新 checkbox 复选框（含开关）渲染
radio	刷新 radio 单选框框渲染

参数 2：所在元素的 lay-filter="" 的值

form.render("select", "test2");

弹出层模块

独立版本
官方文档

一、弹出层

1、`alert` 普通弹框

layer.alert(content, options, yes)

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

2、`confirm` 询问框

layer.confirm(content, options, yes, cancel)

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

3、`msg` 提示框

layer.msg(content, options, end)

layer.msg("我是欧阳克");
layer.msg("我是欧阳克", { icon: 6 });
layer.msg("我是欧阳克", function () {
  console.log("欧阳克");
});

4、`load` 加载层

```
layer.load(icon, options)
```

icon 支持传入 0-2

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

5、`tips` 吸附层

layer.tips(content, follow, options)

<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>

6、`open` 核心方法

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

layer.open({
  title: "标题",
  content: "我是欧阳克",
});

二、基础参数

参数名	数据类型	默认	作用
type	Number	0	layer 提供了 5 种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe 层）3（加载层）4（tips 层）
title	String/Array/Boolean	信息	`title` 支持三种类型的值：`title :'我是标题'`、`title: ['文本', 'font-size:18px;']`、`false`
content	String/DOM/Array		content 可传入的值是灵活多变的，不仅可以传入普通的 `html` 内容，还可以指定 `DOM`，更可以随着 `type` 的不同而不同
skin	String		样式类名，layer 皮肤制作说明
area	String/Array	auto	宽高，在默认状态下，`layer` 是宽高都自适应的
offset	String/Array	垂直水平居中	坐标
icon	Number	-1（信息框）/0（加载层）	图标，信息框和加载层的私有参数
btn	String/Array	确认	按钮，信息框模式时，`btn` 默认是一个确认按钮，其它层类型则默认不显示
btnAlign	String	r	按钮的排列位置
closeBtn	String/Boolean	1	关闭按钮，两种风格的关闭按钮，配置 1 和 2 来展示
shade	String/Array/Boolean	0.3	弹层外区域。默认是 0.3，定义别的颜色，可以 `shade: [0.8, '#393D49']`
shadeClose	Boolean	false	是否点击遮罩关闭弹层
time	Number	0	自动关闭所需毫秒
id	String	空字符	用于控制弹层唯一标识
anim	Number	0	弹出动画
isOutAnim	Boolean	true	关闭动画
maxmin	Boolean	false	该参数值对 `type:1` 和 `type:2` 有效。默认不显示最大小化按钮。需要显示配置 `true` 即可
fixed	Boolean	true	即鼠标滚动时，层是否固定在可视区域。如果不想，设置 `false` 即可
resize	Boolean	true	默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 `false` 即可。该参数对 `loading、tips` 层无效
resizing	Function	null	当你拖拽弹层右下角对窗体进行尺寸调整时，如果你设定了该回调，则会执行。回调返回一个参数：当前层的 `DOM` 对象
scrollbar	Boolean	true	默认允许浏览器滚动，如果设定 scrollbar: false，则屏蔽
maxWidth	Number	360	只有当 `area: 'auto'` 时，`maxWidth` 的设定才有效。
maxHeight	Number	无	只有当高度自适应时，maxHeight 的设定才有效。
zIndex	Number	19891014	一般用于解决和其它组件的层叠冲突。
move	String/DOM/Boolean	.layui-layer-title	默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者 `DOM` 即可。如 `move: '.mine-move'`。你还配置设定 `false` 来禁止拖拽
moveOut	Boolean	false	默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定 `true` 即可
moveEnd	Function	null	默认不会触发 moveEnd，如果你需要，设定 `moveEnd: function(layero){}` 即可
tips	Number/Array	2	tips 层的私有参数。支持上右下左四个方向，通过 `1-4` 进行方向设定。如 `tips: 3` 则表示在元素的下面出现。定义颜色 `tips: [1, '#c00']`
tipsMore	Boolean	false	允许多个意味着不会销毁之前的 `tips` 层
success	Function	null	当你需要在层创建完毕时即执行一些语句，可以通过该回调。`success` 会携带两个参数，分别是当前层 `DOM` 当前层索引。
yes	Function	null	该回调携带两个参数，分别为当前层索引、当前层 DOM 对象。
cancel	Function	null	该回调携带两个参数，分别为当前层索引、当前层 DOM 对象。默认会自动触发关闭。如果不想关闭，return false 即可
end	Function	null	无论是确认还是取消，只要层被销毁了，end 都会执行，不携带任何参数。

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",
            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) {
                console.log("点击确定按钮");
            },
            cancel(index, layero) {
                console.log("点击取消按钮");
            },
        });
    });
</script>

2、页面层

layer.open({
  type: 1,
  title: "标题",
  content:
    '<form style="margin:20px;" 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></form>',
});

3、`iframe` 层

layer.open({
  type: 2,
  title: "欧阳克",
  content: "http://www.ouyangke.cn",
});

4、加载层

layer.open({
  type: 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、关闭指定层

layer.close(index)

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

layer.open({
  type: 0,
  title: "标题",
  content: "我是欧阳克",
  yes(index, layero) {
    console.log("点击确定按钮");
    layer.close(index);
  },
});

2、最大化

layer.full()

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

layer.full(
  layer.open({
    type: 2,
    title: "欧阳克",
    maxmin: true,
    content: "http://www.ouyangke.cn",
  })
);

备：其他方法

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、输入层

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);
  }
);

2、`tab` 层

layer.tab({
  area: ["600px", "300px"],
  tab: [
    {
      title: "TAB1",
      content: "灭绝师太",
    },
    {
      title: "TAB2",
      content: "西门大官人",
    },
    {
      title: "TAB3",
      content: "欧阳克",
    },
  ],
});

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、常规用法

class="layui-table"

<table class="layui-table">
  <colgroup>
    <col width="150" />
    <col width="200" />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>技能</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>灭绝师太</td>
      <td>HTML、CSS、PHP</td>
    </tr>
    <tr>
      <td>2</td>
      <td>西门大官人</td>
      <td>PHP、ThinkPHP、Laravel</td>
    </tr>
    <tr>
      <td>3</td>
      <td>天蓬</td>
      <td>HTML、CSS、JavaScript</td>
    </tr>
    <tr>
      <td>4</td>
      <td>欧阳克</td>
      <td>PHP、ThinkPHP、小程序</td>
    </tr>
  </tbody>
</table>

2、其他风格

行边框风格

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

列边框风格

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

无边框风格

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

3、尺寸

小尺寸

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

大尺寸

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

4、隔行背景

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

属性名	说明
lay-even	用于开启隔行背景，可与其它属性一起使用
lay-skin="属性值"	边框风格，若使用默认风格不设置该属性即可
lay-size="属性值"	尺寸，若使用默认尺寸不设置该属性即可

二、表格渲染

方式	机制	适用场景
方法渲染	用 `JS` 方法的配置完成渲染	（推荐）无需写过多的 `HTML`，在 `JS` 中指定原始元素，再设定各项参数即可。
自动渲染	`HTML` 配置，自动渲染	无需写过多 `JS`，可专注于 `HTML` 表头部分
转换静态表格	转化一段已有的表格元素	无需配置数据接口，在 `JS` 中指定表格元素，并简单地给表头加上自定义属性即可

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>

2、基础参数

参数	类型	说明
elem	String/DOM	指定原始 `table` 容器的选择器或 `DOM`，方法渲染方式必填
width	Number	设定容器宽度
height	Number/String	设定容器高度：1、不填写 2、固定值 3、full-差值
cellMinWidth	Number	常规单元格的最小宽度（默认：60）
skin	Boolean/String	表格风格：line （行边框风格）、row （列边框风格）、nob （无边框风格）
even	Boolean	隔行背景
size	String	尺寸：sm （小尺寸）、lg （大尺寸）

<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>

三、表头参数

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

参数	类型	说明
field	String	设定字段名。非常重要，且是表格数据列的唯一标识
title	String	设定标题名称
width	Number/String	设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比
minWidth	Number	局部定义当前常规单元格的最小宽度
type	String	设定列类型：`normal`（常规列）、`checkbox`（复选框）、`radio`（单选框）、`numbers`（序号列）、`space`（空列）
LAY_CHECKED	Boolean	是否全选状态（默认：`false`）。必须复选框列开启后才有效
fixed	String	固定列。可选值有：`left`（固定在左）、`right`（固定在右）
hide	Boolean	是否初始隐藏列，默认：`false`
sort	Boolean	是否允许排序，默认：`false`
unresize	Boolean	是否禁用拖拽列宽，默认：`false`。如复选框列，会自动禁用
style	String	自定义单元格样式。即传入 `CSS` 样式
align	String	单元格排列方式：left（默认）、center（居中）、right（居右）

<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>

四、异步数据

参数	类型	说明
url	String	接口地址。默认会自动传递两个参数：`?page=1&limit=30`
method	String	接口 `http` 请求类型，默认：`get`
where	Object	接口的其它参数。如：`where: {token: 'sasasas', id: 123}`
contentType	Object	发送到服务端的内容编码类型。如果你要发送 `json` 内容，可以设置：`contentType: 'application/json'`
done	Function	数据渲染完的回调
error	Function	数据请求失败的回调，返回两个参数：错误对象、内容
page	Boolean/Object	分页
limit	Number	每页显示的条数（默认 10）
limits	Array	每页条数的选择项

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>

2、接口返回数据的格式

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

    },
    {

    }
  ]
}

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>

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);
  },
});

5、翻页

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 },
      { 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;" },
    ],
  ],
  page: true,
  limit: 30,
  limits: [30, 60, 90],
});

五、数据操作

1、绑定按钮

参数	类型	说明
toolbar	String	开启表格头部工具栏区域
defaultToolbar	Array	该参数可自由配置头部工具栏右侧的图标按钮

toolbar: #toolbarDemo 指向自定义工具栏模板选择器
toolbar: <div>xxx</div> 直接传入工具栏模板字符
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>

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

table.render({
  toolbar: "#toolbar",
  defaultToolbar: ["filter", "print", "exports"],
});

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>

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>

4、`radio` 单选框事件

checked 当前是否选中状态
data 选中行的相关数据

<table id="demo" lay-filter="test"></table>;
<script>
  table.on("radio(test)", function (obj) {
    console.log(obj);
  });
</script>

5、`row` 单双击事件

tr 得到当前行元素对象
data 得到当前行数据

<table id="demo" lay-filter="test"></table>;
<script>
  table.on("row(test)", function (obj) {
    console.log(obj);
  });
</script>

选中单行数据

<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>

6、`sort` 排序切换

field 当前排序的字段名
type 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
this 当前排序的 th 对象

table.on("sort(test)", function (obj) {
  console.log(obj);
});

重新加载表格

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],
  });
});

实战

一、列表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <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>

二、添加

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <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>

添加表单

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <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>

提交数据

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"
  );
},

三、修改

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;

修改页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <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>

设置修改页面数据

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 =
      '<option value="1" selected>开启</option><option value="0">关闭</option>';
  } else {
    var select =
      '<option value="1">开启</option><option value="0" selected>关闭</option>';
  }
  body.find("#status").html(select);
  var iframeWindow = layero.find("iframe")[0].contentWindow;
  iframeWindow.layui.form.render();
},

四、修改表格数据

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 '<span style="color:green;">开启</span>';
        } else {
          return '<span style="color:red;">禁用</span>';
        }
      },
    },
  ],
],

认识 Layui

一、介绍

二、下载安装

三、模块

1、模块

2、加载模块

3、Jquery

表单按钮

一、按钮

1、写法

2、颜色

3、镂空

4、尺寸

5、圆角

6、按钮组

二、表单

1、输入框

2、下拉选择框

3、单选框

4、多选框

5、开关

6、文本框

7、区块结构

8、表单方框

表单模块

一、预设元素属性

1、title

2、lay-skin

3、lay-ignore

二、事件触发

1、select 触发下拉选择事件

2、checkbox 触发复选框勾选事件

3、switch 触发复选框开关事件

4、radio 触发单选框事件

5、submit 触发表单提交事件

三、表单验证

四、更新渲染

弹出层模块

一、弹出层

1、alert 普通弹框

2、confirm 询问框

3、msg 提示框

4、load 加载层

5、tips 吸附层

6、open 核心方法

二、基础参数

1、信息框

2、页面层

3、iframe 层

4、加载层

5、tips 层

三、其他方法

1、关闭指定层

2、最大化

四、其他层

1、输入层

2、tab 层

3、

表格

一、页面元素

1、常规用法

2、其他风格

3、尺寸

4、隔行背景

二、表格渲染

1、方法渲染

2、基础参数

三、表头参数

四、异步数据

1、url 接口

2、接口返回数据的格式

3、where 传参数

4、回调方法

5、翻页

五、数据操作

1、绑定按钮

2、工具条事件

3、checkbox 复选框事件

4、radio 单选框事件

5、row 单双击事件

3、`Jquery`

1、`title`

2、`lay-skin`

3、`lay-ignore`

1、`select` 触发下拉选择事件

2、`checkbox` 触发复选框勾选事件

3、`switch` 触发复选框开关事件

4、`radio` 触发单选框事件

5、`submit` 触发表单提交事件

1、`alert` 普通弹框

2、`confirm` 询问框

3、`msg` 提示框

4、`load` 加载层

5、`tips` 吸附层

6、`open` 核心方法

3、`iframe` 层

5、`tips` 层

2、`tab` 层

3、`where` 传参数

3、`checkbox` 复选框事件

4、`radio` 单选框事件

5、`row` 单双击事件

6、`sort` 排序切换