30分钟上手Layui交互组件：从表单到表格的实战指南-优快云博客

30分钟上手Layui交互组件：从表单到表格的实战指南

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui

你是否还在为网页交互组件开发繁琐而头疼？是否想快速掌握一套简单高效的UI框架？本文将带你30分钟上手Layui交互组件开发，从表单到表格，让你轻松构建专业网页界面。读完本文，你将能够：使用Layui快速搭建表单并实现验证，创建功能丰富的数据表格，掌握组件间的交互逻辑，以及了解Layui模块化开发的核心思想。

认识Layui

Layui是一套遵循原生态开发模式的Web UI组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。它不同于主流的前端框架，而是信奉返璞归真之道，面向追求简单的务实主义者，无需涉足各类构建工具，只需面向浏览器本身即可。

官方文档：docs/index.md

Layui的核心优势在于其轻量级模块化设计。通过layui.define()定义模块，layui.use()使用模块，使得代码组织清晰，易于维护。这种模块化系统让开发者可以像使用普通API一样来管理模块，组件承载轻松自如。

模块系统文档：docs/modules.md

快速开始

要使用Layui，首先需要引入相关资源。推荐使用国内CDN以确保访问速度和稳定性：

<!-- 引入 layui.css -->
<link href="https://cdn.staticfile.org/layui/2.9.10/css/layui.css" rel="stylesheet">

<!-- 引入 layui.js -->
<script src="https://cdn.staticfile.org/layui/2.9.10/layui.js"></script>

以下是一个简单的Layui应用示例，展示如何初始化并使用模块：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Layui快速上手</title>
  <link href="https://cdn.staticfile.org/layui/2.9.10/css/layui.css" rel="stylesheet">
</head>
<body>
  <div id="app"></div>
  
  <script src="https://cdn.staticfile.org/layui/2.9.10/layui.js"></script>
  <script>
  // 使用模块
  layui.use(['layer', 'form'], function(){
    var layer = layui.layer;
    var form = layui.form;
    
    // 弹出提示
    layer.msg('Hello Layui!');
    
    // 这里可以继续添加其他交互逻辑
  });
  </script>
</body>
</html>

表单组件实战

表单是Web应用中不可或缺的部分，Layui的form组件提供了丰富的功能，包括输入框、选择框、复选框、开关、单选框等表单项，以及表单验证、赋值取值等功能。

表单组件文档：docs/form/index.md

基本表单结构

Layui表单需要遵循特定的HTML结构，使用指定的class来定义表单元素：

<form class="layui-form" lay-filter="example-form">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked>
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">爱好</label>
    <div class="layui-input-block">
      <input type="checkbox" name="hobby" value="reading" title="阅读">
      <input type="checkbox" name="hobby" value="music" title="音乐">
      <input type="checkbox" name="hobby" value="sports" title="运动">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="form-submit">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

表单验证

Layui提供了强大的表单验证功能，只需在表单元素上设置lay-verify属性即可指定验证规则。除了内置的验证规则外，还可以自定义验证规则：

layui.use('form', function(){
  var form = layui.form;
  
  // 自定义验证规则
  form.verify({
    pass: [
      /^[\S]{6,12}$/
      ,'密码必须6到12位，且不能出现空格'
    ]
    ,username: function(value){
      if(value.length < 3){
        return '用户名至少得3个字符啊';
      }
    }
  });
  
  // 监听提交事件
  form.on('submit(form-submit)', function(data){
    console.log(data.field); // 获取表单全部字段值
    // 这里可以发送Ajax请求提交表单数据
    layer.msg('表单提交成功！');
    return false; // 阻止表单默认提交行为
  });
});

表单赋值与取值

Layui提供了便捷的方法来操作表单数据：

// 表单赋值
form.val('example-form', {
  "username": "张三"
  ,"password": "123456"
  ,"sex": "男"
  ,"hobby": ["reading", "music"]
});

// 表单取值
var data = form.val('example-form');
console.log(data);

表格组件实战

表格是展示和管理数据的重要组件，Layui的table组件功能丰富，支持数据渲染、分页、排序、筛选、编辑等多种交互操作。

表格组件文档：docs/table/index.md

基本表格渲染

以下是一个基本的表格渲染示例：

<table id="demo"></table>

<script>
layui.use('table', function(){
  var table = layui.table;
  
  // 渲染表格
  table.render({
    elem: '#demo'
    ,url: 'json/table/demo1.json' // 数据接口
    ,page: true // 开启分页
    ,cols: [[ // 表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:120}
      ,{field: 'email', title: '邮箱', width:150}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:100}
      ,{field: 'sign', title: '签名', width:200}
      ,{field: 'experience', title: '积分', width:80, sort: true}
      ,{title: '操作', width:150, align:'center', toolbar: '#barDemo'}
    ]]
  });
});
</script>

<!-- 操作工具栏模板 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

表格事件监听

表格支持多种事件，可以根据需要监听并处理：

// 监听行工具事件
table.on('tool(demo)', function(obj){
  var data = obj.data; // 获得当前行数据
  var layEvent = obj.event; // 获得 lay-event 对应的值
  
  if(layEvent === 'edit'){ // 编辑
    // 打开编辑弹窗，这里可以填充表单数据
    layer.open({
      type: 1,
      title: '编辑用户',
      area: ['500px', '400px'],
      content: $('#edit-form').html()
    });
    // 表单赋值
    form.val('edit-form', data);
  } else if(layEvent === 'del'){ // 删除
    layer.confirm('确定删除该记录吗？', function(index){
      // 发送Ajax请求删除数据
      // ...
      obj.del(); // 删除对应行（DOM）
      layer.close(index);
      layer.msg('删除成功！');
    });
  }
});

// 监听排序事件
table.on('sort(demo)', function(obj){
  console.log(obj.field); // 当前排序的字段名
  console.log(obj.type); // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  
  // 重新渲染表格数据，实现后端排序
  table.reload('demo', {
    initSort: obj // 记录初始排序，如果不设的话，将无法标记表头的排序状态。
    ,where: { // 请求参数
      field: obj.field // 排序字段
      ,order: obj.type // 排序方式
    }
  });
});

表格数据重载

当需要更新表格数据时，可以使用重载方法：

// 完整重载
table.reload('demo', {
  url: 'new_data.json'
  ,page: {
    curr: 1 // 重新从第 1 页开始
  }
  ,where: {
    key: 'value' // 新的搜索条件
  }
});

// 仅数据重载
table.reloadData('demo', {
  where: {
    key: 'value' // 新的搜索条件
  }
});

表格选中行操作

获取和设置表格选中行：

// 获取选中行数据
var checkStatus = table.checkStatus('demo');
console.log(checkStatus.data); // 获取选中行数据
console.log(checkStatus.isAll); // 是否全选

// 设置行选中状态
table.setRowChecked('demo', {
  index: 0 // 行索引
  ,checked: true // 选中状态
});

组件交互实战

在实际项目中，表单和表格经常需要配合使用，例如通过表单筛选表格数据，或者点击表格行填充表单进行编辑。

以下是一个综合示例，展示如何实现表单筛选表格数据：

<!-- 筛选表单 -->
<form class="layui-form" lay-filter="search-form" style="margin-bottom: 15px;">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input type="text" name="username" placeholder="请输入用户名" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">城市</label>
      <div class="layui-input-inline">
        <select name="city" lay-search>
          <option value="">全部</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="广州">广州</option>
          <option value="深圳">深圳</option>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<!-- 数据表格 -->
<table id="data-table"></table>

<script>
layui.use(['form', 'table'], function(){
  var form = layui.form;
  var table = layui.table;
  
  // 渲染表格
  table.render({
    elem: '#data-table'
    ,url: 'json/table/demo1.json'
    ,page: true
    ,cols: [[
      {field: 'id', title: 'ID', width:80, sort: true}
      ,{field: 'username', title: '用户名', width:120}
      ,{field: 'email', title: '邮箱', width:150}
      ,{field: 'city', title: '城市', width:100}
      ,{field: 'experience', title: '积分', width:80, sort: true}
      ,{title: '操作', width:150, align:'center', toolbar: '#barDemo'}
    ]]
    ,id: 'data-table'
  });
  
  // 监听搜索表单提交
  form.on('submit(search)', function(data){
    // 执行表格重载
    table.reload('data-table', {
      where: data.field // 传入搜索条件
      ,page: {
        curr: 1 // 重新从第 1 页开始
      }
    });
    return false;
  });
  
  // 监听表格工具事件
  table.on('tool(data-table)', function(obj){
    var data = obj.data;
    if(obj.event === 'edit'){
      // 这里可以打开编辑弹窗，并用form.val()为表单赋值
      layer.open({
        type: 1,
        title: '编辑用户',
        area: ['500px', '400px'],
        content: $('#edit-form').html()
      });
      form.val('edit-form', data);
    }
  });
});
</script>

<!-- 编辑表单模板 -->
<script type="text/html" id="edit-form">
  <form class="layui-form" lay-filter="edit-form">
    <!-- 表单内容 -->
  </form>
</script>

<!-- 表格操作工具栏模板 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

总结与进阶

通过本文的介绍，你已经掌握了Layui表单和表格组件的基本使用方法。Layui还有很多其他实用组件，如弹窗(layer)、日期选择器(laydate)、分页(laypage)等，可以根据项目需求进一步学习和使用。

Layui的模块化设计使得代码组织清晰，易于维护。在实际项目中，可以将业务逻辑封装成自定义模块，提高代码复用性和开发效率。

官方示例：examples/table.html

最后，建议查阅Layui官方文档和示例，深入了解各组件的详细用法和高级特性，以便更好地应对各种复杂的开发需求。祝你在Layui的世界中开发愉快！

学习资源

官方文档：docs/index.md
模块系统：docs/modules.md
表单组件：docs/form/index.md
表格组件：docs/table/index.md
示例代码：examples/

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考