layui的table可编辑

在layui中，可以使用table模块中的editEvent方法实现table的编辑功能。具体步骤如下：

1. 引入layui和jquery库

<!-- 引入layui样式 -->
<link rel="stylesheet" href="/layui/css/layui.css">
<!-- 引入jquery库 -->
<script src="/jquery/jquery-3.6.0.min.js"></script>
<!-- 引入layui库 -->
<script src="/layui/layui.all.js"></script>

2. 编写HTML代码

<table id="demo" lay-filter="test"></table>

3. 编写JavaScript代码

// 定义表格列
var tableCols = [[
  {type: 'checkbox', fixed: 'left'},
  {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', edit: 'text'},
  {field: 'username', title: '用户名', width: 120, edit: 'text'},
  {field: 'email', title: '邮箱', width: 200, edit: 'text'},
  {field: 'sex', title: '性别', width: 80, edit: 'text'},
  {field: 'city', title: '城市', width: 120, edit: 'text'},
  {field: 'sign', title: '签名', width: 200, edit: 'text'},
  {field: 'experience', title: '经验值', width: 100, sort: true, edit: 'text'},
  {field: 'score', title: '积分', width: 100, sort: true, edit: 'text'},
  {field: 'classify', title: '职业', width: 100, edit: 'text'},
  {field: 'wealth', title: '财富', width: 150, sort: true, edit: 'text'},
  {fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo'}
]];

// 定义表格数据
var tableData = [
  {id: '10001', username: '张三', email: 'zhangsan@123.com', sex: '男', city: '北京', sign: '我是张三', experience: 100, score: 80, classify: '程序员', wealth: 10000},
  {id: '10002', username: '李四', email: 'lisi@123.com', sex: '男', city: '上海', sign: '我是李四', experience: 80, score: 90, classify: '设计师', wealth: 20000},
  {id: '10003', username: '王五', email: 'wangwu@123.com', sex: '女', city: '广州', sign: '我是王五', experience: 120, score: 100, classify: '作家', wealth: 30000},
  {id: '10004', username: '赵六', email: 'zhaoliu@123.com', sex: '女', city: '深圳', sign: '我是赵六', experience: 80, score: 60, classify: '程序员', wealth: 5000},
  {id: '10005', username: '钱七', email: 'qianqi@123.com', sex: '男', city: '杭州', sign: '我是钱七', experience: 200, score: 80, classify: '程序员', wealth: 40000}
];

// 渲染表格
layui.use(['table', 'form'], function() {
  var table = layui.table;
  var form = layui.form;
  
  // 监听表格编辑事件
  table.on('edit(test)', function(obj){
    var value = obj.value; // 得到修改后的值
    var field = obj.field; // 得到修改的字段名
    var data = obj.data; // 得到修改的数据对象
    // TODO: 将修改的数据提交到后台保存
  });
  
  // 渲染表格
  table.render({
    elem: '#demo',
    cols: tableCols,
    data: tableData,
    toolbar: '#toolbarDemo',
    page: true,
    limit: 10,
    limits: [10, 20, 30, 40, 50]
  });
});

在上面的代码中，tableCols定义了表格的列，其中使用了edit属性指定可编辑的字段。tableData定义了表格的数据。在表格渲染之后，通过table.on('edit', ...)方法监听表格的编辑事件，可以在事件处理函数中实现将修改的数据提交到后台保存的逻辑。