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

撸码网

2023-10-18 20:52:40

0次

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 文件中添加一个编辑按钮的模板：


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

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


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: 弹出添加用户的表单
  } else if (obj.event === 'delete') {
    var checkStatus = table.checkStatus('userTable');
    var ids = checkStatus.data.map(function(item) {
      return item.id;
    });

    if (ids.length === 0) {
      layer.msg('请选择要删除的用户');
      return;
    }

    layer.confirm('确认删除选中的用户吗？', function(index) {
      axios.post('path/to/user/delete', {ids: ids})
        .then(function(response) {
          layer.close(index);
          table.reload('userTable');
          layer.msg('删除用户成功');
        })
        .catch(function(error) {
          layer.msg('删除用户失败：' + error.message);
        });
    });
  }
});

上面的代码中，我们使用 toolbar 参数来指定工具栏的模板。当用户点击删除按钮时，我们会弹出一个确认框来让用户确认是否要删除选中的用户。

6.2 提交表单数据

当用户确认删除选中的用户后，我们需要将用户 ID 提交给服务器。我们在 JavaScript 代码中添加如下代码：


layer.confirm('确认删除选中的用户吗？', function(index) {
  var checkStatus = table.checkStatus('userTable');
  var ids = checkStatus.data.map(function(item) {
    return item.id;
  });

  axios.post('path/to/user/delete', {ids: ids})
    .then(function(response) {
      layer.close(index);
      table.reload('userTable');
      layer.msg('删除用户成功');
    })
    .catch(function(error) {
      layer.msg('删除用户失败：' + error.message);
    });
});

上面的代码中，我们使用 axios 发送一个 POST 请求，将用户 ID 提交给服务器。如果服务器返回成功结果，我们会关闭确认框、重新加载表格数据，并弹出删除用户成功的提示框。如果服务器返回失败结果，我们会弹出删除用户失败的提示框。

7. 总结

到这里，我们已经完成了使用 Layui 实现增删查改操作的全部内容。通过本文的介绍，相信大家已经掌握了如何使用 Layui 来构建美观、易用的网页界面。希望本文对大家有所帮

上一篇：对于layui框架源码兼容性微调介绍

下一篇：怎么利用layui美化table数据表格

相关阅读

前端开发标签

Layui热门

Layui更新

免责声明：本文来自互联网，本站所有信息（包括但不限于文字、视频、音频、数据及图表），不保证该信息的准确性、真实性、完整性、有效性、及时性、原创性等，版权归属于原作者，如无意侵犯媒体或个人知识产权，请来电或致函告之，本站将在第一时间处理。猿码集站发布此文目的在于促进信息交流，此文观点与本站立场无关，不承担任何责任。侵权及不实信息举报邮箱至：amarlboro@yeah.net；购买联系：QQ 398402245 渝ICP备2023009929号-1