layui 表格点击编辑感觉很好用,实现方法如下

要实现 复制代码
1. 在 HTML 页面中引入 layui 的相关资源文件:

```html
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
  1. 创建一个包含表格的容器:
html 复制代码
<div id="table-container"></div>
  1. 初始化 layui:
javascript 复制代码
layui.use('table', function () {
    var table = layui.table;

    // 表格配置
    var tableConfig = {
        elem: '#table-container',
        height: 'full-150',
        url: '/api/data', // 表格数据接口
        page: true, // 开启分页
        cols: [[
            {field: 'id', title: 'ID', edit: 'text'},
            {field: 'name', title: '姓名', edit: 'text'},
            {field: 'age', title: '年龄', edit: 'text'},
            {field: 'gender', title: '性别', edit: 'text'},
            {field: 'address', title: '地址', edit: 'text'},
            {field: 'operation', title: '操作', toolbar: '#operation-bar'}
        ]]
    };

    // 渲染表格
    table.render(tableConfig);

    // 监听表格编辑事件
    table.on('edit(table-filter)', function (obj) {
        var data = obj.data; // 编辑后的数据
        var field = obj.field; // 编辑的字段名
        var value = obj.value; // 编辑后的值

        // 在这里可以将编辑后的数据通过 Ajax 请求发送到后台保存
    });
});
  1. 在表格配置的 cols 中指定需要编辑的列,并设置 edit 属性为 'text' 或其他合适的编辑方式。在上述代码中,我们设定了 id、name、age、gender 和 address 这几个字段可以编辑。

  2. 在监听编辑事件的回调函数中,可以获取编辑后的数据以及编辑的字段名和值。在这里可以通过 Ajax 请求将编辑后的数据发送到后台保存。

注意事项:

  • 在编辑事件的回调函数中,可以通过 obj.data 获取当前行的数据,obj.field 获取编辑的字段名,obj.value 获取编辑后的值。
  • 表格的 elem 属性需要设置为表格容器的 id 或 class。
  • 可以根据需要修改表格的其他配置项,比如接口地址、分页等。

这样,当用户点击表格中的单元格进行编辑时,会触发表格的编辑事件,你可以在回调函数中处理编辑后的数据。

//监听单元格编辑事件

table.on('edit(listRecordTo002Filter)', function(obj){

var value = obj.value; // 得到修改后的值

var data = obj.data; // 得到所在行所有键值

var field = obj.field; // 得到字段

复制代码
$.ajax({
   type: 'POST',
   url : "[[@{/technology/record/updateRecordTo002}]]",
   data: JSON.stringify({
      id: data.id,
      field: field,
      value: value
   }),
   contentType: 'application/json',
   success: function(response) {
      // 根据需要处理成功的响应
      console.log('Save success:', response);
      layer.msg('已保存修改', {icon: 1});
   },
   error: function(xhr, status, error) {
      // 根据需要处理错误的响应
      console.error('Save error:', error);
      layer.msg('保存失败', {icon: 2});
   }
});

console.log('Edited value:', value);
console.log('Edited row data:', data);
相关推荐
Nan_Shu_61420 分钟前
Web前端面试题(2)
前端
知识分享小能手26 分钟前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军2 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy2 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20502 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js