如何利用layui实现增删查改操作-猿码集

1. 前言

随着前端技术的不断发展，越来越多的前端框架和库涌现出来，为我们的开发工作提供了很大的便利。Layui 是一款轻量级的前端 UI 框架，封装了丰富的组件和工具，可以帮助我们快速构建美观、易用的网页界面。本文将介绍如何使用 Layui 实现增删查改操作，希望对大家有所帮助。

2. 准备工作

2.1 安装 Layui

首先，我们需要在项目中安装 Layui。可以通过 npm 或者直接下载源码的方式进行安装。这里我们选择使用 npm 安装：

npm install layui

2.2 引入样式和脚本文件

安装完成后，在 HTML 文件中引入相关的样式和脚本文件：

<!-- 引入样式文件 --><link rel="stylesheet" href="path/to/layui/css/layui.css"><!-- 引入脚本文件 --><script src="path/to/layui/layui.js"></script>

3. 显示用户列表

3.1 使用表格组件

接下来，我们使用 Layui 提供的表格组件来显示用户列表。首先，在 HTML 文件中添加一个空的 table 元素：

<table id="userTable" lay-filter="userTable"></table>

然后，在 JavaScript 代码中使用 table 模块来渲染表格：

layui.use('table', function() {var table = layui.table;table.render({elem: '#userTable',url: 'path/to/user/list',cols: [[{field: 'id', title: 'ID'},{field: 'name', title: '姓名'},{field: 'age', title: '年龄'},{field: 'email', title: '邮箱'},{fixed: 'right', title: '操作', toolbar: '#userTableToolbar'}]]});});

上面的代码中，我们使用 table.render() 方法来渲染表格。其中，elem 参数指定表格元素的选择器，url 参数指定获取数据的接口地址，cols 参数指定表格的列信息。在 cols 参数中，我们定义了表格的五列，分别是 ID、姓名、年龄、邮箱和操作。其中，操作列使用了固定列和工具栏，后面会详细介绍。

3.2 使用工具栏

为了实现增删查改操作，我们需要在表格中添加一些操作按钮。Layui 提供了工具栏组件，可以方便地实现这个功能。我们在 HTML 文件中添加一个工具栏元素：

<script type="text/html" id="userTableToolbar"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="add">添加用户</button></div></script>

然后，在 JavaScript 代码中使用 toolbar 参数来指定工具栏的模板：

layui.use('table', function() {var table = layui.table;table.render({elem: '#userTable',url: 'path/to/user/list',cols: [[{field: 'id', title: 'ID'},{field: 'name', title: '姓名'},{field: 'age', title: '年龄'},{field: 'email', title: '邮箱'},{fixed: 'right', title: '操作', toolbar: '#userTableToolbar'}]]});table.on('toolbar(userTable)', function(obj) {if (obj.event === 'add') {// TODO: 弹出添加用户的表单}});});

上面的代码中，我们使用 table.on() 方法来监听工具栏按钮的点击事件。当用户点击添加用户按钮时，我们会弹出一个表单来让用户填写新用户的信息。

4. 实现添加用户功能

4.1 使用表单组件

为了实现添加用户功能，我们需要使用 Layui 提供的表单组件。我们在 HTML 文件中添加一个空的 form 元素：

<form class="layui-form" id="addUserForm"></form>

然后，在 JavaScript 代码中使用 form 模块来渲染表单：

layui.use('form', function() {var form = layui.form;form.render(null, 'addUserForm');});

上面的代码中，我们使用 form.render() 方法来渲染表单。其中，第一个参数为 null，表示渲染整个表单，第二个参数为表单元素的选择器。

4.2 弹出表单

接下来，我们需要在工具栏按钮的点击事件中弹出表单。我们在 JavaScript 代码中添加如下代码：

table.on('toolbar(userTable)', function(obj) {if (obj.event === 'add') {layer.open({type: 1,title: '添加用户',content: $('#addUserForm'),area: ['500px', '300px'],btn: ['保存', '取消'],yes: function(index, layero) {// TODO: 提交表单数据},end: function() {$('#addUserForm')[0].reset();}});}});

上面的代码中，我们使用 layer.open() 方法来弹出表单。其中，type 参数指定弹出层的类型，title 参数指定弹出层的标题，content 参数指定弹出层的内容，area 参数指定弹出层的大小，btn 参数指定弹出层的按钮，yes 参数指定点击保存按钮的回调函数，end 参数指定弹出层关闭时的回调函数。

4.3 提交表单数据

当用户填写完表单后，我们需要将表单数据提交给服务器。我们在 JavaScript 代码中添加如下代码：

form.on('submit(addUser)', function(data) {axios.post('path/to/user/add', data.field).then(function(response) {layer.closeAll();table.reload('userTable');layer.msg('添加用户成功');}).catch(function(error) {layer.msg('添加用户失败：' + error.message);});return false;});

上面的代码中，我们使用 form.on() 方法来监听表单的提交事件。当用户点击保存按钮时，我们会使用 axios 发送一个 POST 请求，将表单数据提交给服务器。如果服务器返回成功结果，我们会关闭弹出层、重新加载表格数据，并弹出添加用户成功的提示框。如果服务器返回失败结果，我们会弹出添加用户失败的提示框。

5. 实现编辑用户功能

5.1 使用表单组件

为了实现编辑用户功能，我们需要使用 Layui 提供的表单组件。我们在 HTML 文件中添加一个空的 form 元素：

<form class="layui-form" id="editUserForm"></form>

然后，在 JavaScript 代码中使用 form 模块来渲染表单：

layui.use('form', function() {var form = layui.form;form.render(null, 'editUserForm');});

5.2 弹出表单

接下来，我们需要在表格的操作列中添加一个编辑按钮，并在按钮的点击事件中弹出表单。我们在 HTML 文件中添加一个编辑按钮的模板：

如何利用layui实现增删查改操作

<script type="text/html" id="userTableEditButton"><button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button></script>

然后，在 JavaScript 代码中使用 templet 参数来指定操作列的模板：

table.render({elem: '#userTable',url: 'path/to/user/list',cols: [[{field: 'id', title: 'ID'},{field: 'name', title: '姓名'},{field: 'age', title: '年龄'},{field: 'email', title: '邮箱'},{fixed: 'right', title: '操作', toolbar: '#userTableToolbar'}]],done: function(res, curr, count) {$('.layui-table-cell').each(function() {var text = $(this).text();$(this).attr('title', text);});}});table.on('tool(userTable)', function(obj) {if (obj.event === 'edit') {var data = obj.data;$('#editUserForm').html($('#addUserForm').html());form.val('editUserForm', data);layer.open({type: 1,title: '编辑用户',content: $('#editUserForm'),area: ['500px', '300px'],btn: ['保存', '取消'],yes: function(index, layero) {// TODO: 提交表单数据},end: function() {$('#editUserForm')[0].reset();}});}});

上面的代码中，我们使用 templet 参数来指定操作列的模板。当用户点击编辑按钮时，我们会弹出一个表单，并将当前行的数据填充到表单中。

5.3 提交表单数据

当用户修改完表单后，我们需要将表单数据提交给服务器。我们在 JavaScript 代码中添加如下代码：

form.on('submit(editUser)', function(data) {axios.post('path/to/user/edit', data.field).then(function(response) {layer.closeAll();table.reload('userTable');layer.msg('编辑用户成功');}).catch(function(error) {layer.msg('编辑用户失败：' + error.message);});return false;});

上面的代码中，我们使用 form.on() 方法来监听表单的提交事件。当用户点击保存按钮时，我们会使用 axios 发送一个 POST 请求，将表单数据提交给服务器。如果服务器返回成功结果，我们会关闭弹出层、重新加载表格数据，并弹出编辑用户成功的提示框。如果服务器返回失败结果，我们会弹出编辑用户失败的提示框。

6. 实现删除用户功能

6.1 使用工具栏

为了实现删除用户功能，我们需要在表格中添加一个删除按钮。使用工具栏组件可以方便地实现这个功能。我们在 HTML 文件中添加一个删除按钮的模板：

<script type="text/html" id="userTableDeleteButton"><button class="layui-btn layui-btn-xs" lay-event="delete">删除</button></script>