LayUi基础讲解

最新推荐文章于 2024-01-06 16:52:39 发布
最新推荐文章于 2024-01-06 16:52:39 发布
阅读量1.3k 收藏 8
点赞数
文章标签： javascript jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40681529/article/details/122202047
版权

认识 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: "我是欧阳克",
});

二、基础参数

参数名数据类型默认作用
typeNumber0layer 提供了 5 种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe 层）3（加载层）4（tips 层）
titleString/Array/Boolean信息title 支持三种类型的值：title :'我是标题'、title: ['文本', 'font-size:18px;']、false
contentString/DOM/Arraycontent 可传入的值是灵活多变的，不仅可以传入普通的 html 内容，还可以指定 DOM，更可以随着 type 的不同而不同
skinString样式类名，layer 皮肤制作说明
areaString/Arrayauto宽高，在默认状态下，layer 是宽高都自适应的
offsetString/Array垂直水平居中坐标
iconNumber-1（信息框）/0（加载层）图标，信息框和加载层的私有参数
btnString/Array确认按钮，信息框模式时，btn 默认是一个确认按钮，其它层类型则默认不显示
btnAlignStringr按钮的排列位置
closeBtnString/Boolean1关闭按钮，两种风格的关闭按钮，配置 1 和 2 来展示
shadeString/Array/Boolean0.3弹层外区域。默认是 0.3，定义别的颜色，可以 shade: [0.8, '#393D49']
shadeCloseBooleanfalse是否点击遮罩关闭弹层
timeNumber0自动关闭所需毫秒
idString空字符用于控制弹层唯一标识
animNumber0弹出动画
isOutAnimBooleantrue关闭动画
maxminBooleanfalse该参数值对 type:1 和 type:2 有效。默认不显示最大小化按钮。需要显示配置 true 即可
fixedBooleantrue即鼠标滚动时，层是否固定在可视区域。如果不想，设置 false 即可
resizeBooleantrue默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false 即可。该参数对 loading、tips 层无效
resizingFunctionnull当你拖拽弹层右下角对窗体进行尺寸调整时，如果你设定了该回调，则会执行。回调返回一个参数：当前层的 DOM 对象
scrollbarBooleantrue默认允许浏览器滚动，如果设定 scrollbar: false，则屏蔽
maxWidthNumber360只有当 area: 'auto' 时，maxWidth 的设定才有效。
maxHeightNumber无只有当高度自适应时，maxHeight 的设定才有效。
zIndexNumber19891014一般用于解决和其它组件的层叠冲突。
moveString/DOM/Boolean.layui-layer-title默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者 DOM 即可。如 move: '.mine-move'。你还配置设定 false 来禁止拖拽
moveOutBooleanfalse默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定 true 即可
moveEndFunctionnull默认不会触发 moveEnd，如果你需要，设定 moveEnd: function(layero){} 即可
tipsNumber/Array2tips 层的私有参数。支持上右下左四个方向，通过 1-4 进行方向设定。如 tips: 3 则表示在元素的下面出现。定义颜色 tips: [1, '#c00']
tipsMoreBooleanfalse允许多个意味着不会销毁之前的 tips 层
successFunctionnull当你需要在层创建完毕时即执行一些语句，可以通过该回调。success 会携带两个参数，分别是当前层 DOM 当前层索引。
yesFunctionnull该回调携带两个参数，分别为当前层索引、当前层 DOM 对象。
cancelFunctionnull该回调携带两个参数，分别为当前层索引、当前层 DOM 对象。 默认会自动触发关闭。如果不想关闭，return false 即可
endFunctionnull无论是确认还是取消，只要层被销毁了，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、基础参数

参数类型说明
elemString/DOM指定原始 table 容器的选择器或 DOM，方法渲染方式必填
widthNumber设定容器宽度
heightNumber/String设定容器高度：1、不填写 2、固定值 3、full-差值
cellMinWidthNumber常规单元格的最小宽度（默认：60）
skinBoolean/String表格风格：line （行边框风格）、row （列边框风格）、nob （无边框风格）
evenBoolean隔行背景
sizeString尺寸：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 设置表头。值是一个二维数组。方法渲染方式必填
参数类型说明
fieldString设定字段名。非常重要，且是表格数据列的唯一标识
titleString设定标题名称
widthNumber/String设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比
minWidthNumber局部定义当前常规单元格的最小宽度
typeString设定列类型：normal（常规列）、checkbox（复选框）、radio（单选框）、numbers（序号列）、space（空列）
LAY_CHECKEDBoolean是否全选状态（默认：false）。必须复选框列开启后才有效
fixedString固定列。可选值有：left（固定在左）、right（固定在右）
hideBoolean是否初始隐藏列，默认：false
sortBoolean是否允许排序，默认：false
unresizeBoolean是否禁用拖拽列宽，默认：false。如复选框列，会自动禁用
styleString自定义单元格样式。即传入 CSS 样式
alignString单元格排列方式：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>

四、异步数据

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

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、绑定按钮

参数类型说明
toolbarString开启表格头部工具栏区域
defaultToolbarArray该参数可自由配置头部工具栏右侧的图标按钮
  • 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>';
        }
      },
    },
  ],
],
qq_40681529
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何基于layui的laytpl实现数据绑定的示例代码
10-15
主要介绍了如何基于layui的laytpl实现数据绑定的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
layui.js中table的cols属性详细介绍
一切从零开始
06-26 3679
layui.js 中table的cols属性介绍 ，templet的用法
layui中实现动态的cols表头字段
MiSiTeLin的博客
09-03 7817
layui中实现动态的cols表头字段需求确定修改前修改后parseData方法done函数解决方案先创建工具类处理逻辑 需求确定 最近再搞一个需求时，需要在layui中实现表头字段的动态更新，无奈转战前端阵营 来一波官方文档先，个人感觉还是挺简单易懂的 https://www.layui.com/doc/ 再来个在线演示网站 https://www.layui.com/demo/table/height.html 修改前 layui.render中默认调用的接口的返回值是集合类型，所以根据一一匹配的原则可
Layui实现数据双向绑定的详细步骤与实例
奇妙的Bug之旅
01-06 693
在前端开发中，数据双向绑定是一种常见的需求，它可以使得我们在修改数据时，界面上的显示也会自动更新。Layui是一个基于jQuery的前端UI框架，它提供了丰富的组件和功能，包括数据双向绑定。本文将详细介绍如何使用Layui实现数据的双向绑定，并通过实例进行演示。
js实现双向绑定,好用的原生双向绑定
deriva的专栏
12-21 522
s双向绑定采用自主编运用proxy代理的形式实现的，vue3也是通过proxy代理的。 我们知道vue主要的是双向绑定，vue2.0和3.0使用的形式还有所区别： vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.definePropert()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。 vue3 中使⽤了 es6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽ 实现对数据的监控。
.net core api+layui基础框架系统
03-24
基于Layui 设计的 后台管理系统，前后端分离 。 带数据库哦。
asp.net core webapi+layui基础实例程序源码.zip
08-17
asp.net core webapi+layui基础实例程序源码.zip
layui问题之模拟select点击事件的实例讲解
10-18
今天小编就为大家分享一篇layui问题之模拟select点击事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui-steps
11-15
layui-steps 是一个 LayUI 实现的步骤条模板，可以切换步骤，跳转到指定步骤
Layui 2.3.0
10-12
Layui是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用，其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码
对layui数据表格动态cols(字段)动态变化详解
10-16
今天小编就为大家分享一篇对layui数据表格动态cols(字段)动态变化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Layui+Vue】Layui+vue双向绑定失效原因及解决方案
JerryYvonne_wrc的博客
08-15 2544
Layui+Vue一起用时会因框架冲突导致部分情况下的v-model双向绑定失效问题，本文提供了一种原因分析思路及解决方案
cols - 表头参数一览表
ren202009的博客
07-28 4016
一．如果采用的是方法渲染，那么cols 是一个二维数组，表头参数设定在数组内 参数1：field 类型：String 说明：设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识。 示例值：username 参数2：title 类型：String 说明：设定标题名称 示例值：用户名 参数3：width 类型：Number/String 说明：设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比请结合实际情况，对不同列做不同设定。 示例值：200、30%
【Layui+Vue】动态获取表格cols数据并加载
JerryYvonne_wrc的博客
08-25 2905
根据数据动态获取layui表格列名，实现表格的动态加载
Layui数据表格动态cols（字段）动态变化（2）
夏已微凉、
02-10 5218
Layui数据表格动态cols（字段）动态变化（2） 一、说明：（2）和（1）的不同： 动态列的计算方式不同 （1）用的是 [自动化渲染的重载 ] ；（2）用的是 [方法级渲染的重载 ]。（这篇博客主要是想体现这一点，因为有的时候（有 操作列 toolbar 的时候）自动化渲染表...
layui使用详解
HOMEXS的博客
03-10 2412
layui使用详解 layui是一种很好用的前端模块化ui框架，里面有各种已经封装好的ui插件，开发者只要下载layui的代码引入到自己的项目中就可以直接在自己的里使用layui的前端ui插件，下面我用日期和时间组件的例子来教大家使用layui 1.1:下载layui的js和css的引入代码，大家可以去layui的官网下载，官网地址为https://www.layui.com/，进入官网是这个页面 1.2进入官网后直接点立即下载就好了，下载的是zip格式的压缩包，我下载后是放在桌面的，然后直接在桌面解压一
自定义Checkbox让复选框居中对于RadioButton同样适用
weixin_34244102的博客
01-11 444
2019独角兽企业重金招聘Python工程师标准>>> ...
Layui数据表格
weixin_44541076的博客
05-28 379
Layui的数据表格是非常实用的，用法方便易上手，代码量少且简单易懂。接下来我简单的介绍一下Layui数据表格的必要参数。 1、 elem：指定table容器的选择器或者DOM 2、 cols: 表头列的设置， 3、 url：异步数据的接口，具体路径、 除此之外，还有很多其它的参数，比如Page（分页操作），width（宽），height（高），data（直接赋值），limit（每页条数）等等。 ...
《Layui的数据表格详解》
weixin_44540689的博客
07-17 898
开发工具与关键技术：VS MVC 作者：黄姗姗 年级：18级 撰写日期：2019年7月12日 表格初始化的时候 参数详解： table.render({}) ：用于表格方法级的渲染，核心方法 1、 elem : “#demo” ，//指定原始表格table元素选择器（推荐ID选择器） 2、 url : “/onedemo” ， //接口的地址 3、 id : “dataID” ， //...
layui style
最新发布
03-13
1. 基础样式：layui提供了一套基础的样式，包括按钮、表单、表格、面包屑、分页等常用元素的样式定义。 2. 组件样式：layui提供了丰富的组件，如弹出层、下拉菜单、选项卡、进度条等，每个组件都有对应的样式文件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值