layui编辑table数据

在Layui框架中，要编辑表格（table）的数据，可以使用Layui的内置组件table.edit。以下是一个简单的示例，展示如何使用Layui的table组件进行数据编辑。

首先，确保你已经引入了Layui的CSS和JavaScript文件。

<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/layui/layui.js"></script>

然后，在HTML中创建一个用于展示表格的容器。

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

使用JavaScript初始化Layui的table组件，并开启编辑功能。

layui.use(['table', 'form'], function(){
  var table = layui.table;
  var form = layui.form;
  
  table.render({
    elem: '#demo'
    ,url:'/path/to/your/data' // 数据接口
    ,toolbar: '#toolbarDemo' // 开启工具栏，工具栏位置 '#toolbarDemo'
    ,title: '用户数据表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title:'ID', width:80, sort: true, fixed: 'left'}
      ,{field:'username', title:'用户名', edit: 'text', width:150}
      ,{field:'sex', title:'性别', edit: 'text', width:80}
      ,{field:'city', title:'城市', edit: 'text', width:100}
      ,{field:'sign', title:'签名', edit: 'text', minWidth: 150}
      ,{field:'score', title:'得分', edit: 'text', sort: true, width: 80}
      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
    ,done: function(res, page, count){
      // 在这里执行表格数据渲染后的相关操作，比如为数据行绑定事件等
    }
  });
  
  // 监听工具栏
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 设定的 lay-filter="*"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'del'){
      // 执行删除操作
    }
  });
  
  // 监听单元格编辑
  table.on('edit(test)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有数据
    ,field = obj.field; //得到字段名
    // 执行更新操作
  });
});

在你的HTML中定义工具栏和操作按钮的模板。

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中长度</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

实际应用：

<table id="table" lay-filter="table" class="layui-table"></table>
<script>
  //初始化
  $(function () {
      PageList();
  });
  //查询
  function PageList() {
      var OptionGroup = $("#txtOptionGroup").val();
      var OptionName = $("#txtOptionName").val();
 
      layui.use(['table'], function () {
          var table = layui.table;
 
          table.render({
              elem: '#table'//对应着Table的ID
              , method: 'POST'
              , url: '/PM/GetOptionListPage'//URL为数据接口的地址
              , where: { //where就是ajax的data，但不包括分页条件
                  "OptionGroup": OptionGroup,
                  "OptionName": OptionName,
              }
              , request: {  //分页条件： page  limit
                  pageName: 'page',    //页码的参数名称，默认：page 或者 index、pageIndex
                  limitName: 'size'  //每页数据量的参数名，默认：limit 或者 size、pageSize
              }
              , parseData: function (res) {
                  return {
                      "code": 0,//数据类型,必须的
                      "count": res.total,//总记录数,用于分页
                      "data": res.data,//必须的
                  }
              }
              , cols: [[
                  { field: 'OptionID', title: '配置项目ID', sort: true }
                  , { field: 'OptionGroup', title: '选项分组', sort: true, edit: 'text' }
                  , { field: 'OptionName', title: '选项名称', edit: 'text' }
                  , { field: 'OptionValue', title: '选项的值', edit: 'text' }
                  , { field: 'Remark', title: '备注', edit: 'text' }
                  , { title: '操作', toolbar: '#barDemo' }
              ]],
              page: true,//开启分页功能
              limit: 25,//当前每页条数
              limits: [25, 50, 100],//每页条数集合
              editMode: "single",//可编辑模式，支持：single单行、row整行、cell单元格
          });
      });
  }
 
//编辑表格
layui.use('table', function () {
    var table = layui.table;
    table.on('edit(table)', function (obj) {
        var data = obj.data //得到所在行所有数据
        console.log("data", data);
        // 执行更新操作
        var obj = {
            "OptionID": data.OptionID,//主键
            "OptionGroup": data.OptionGroup,
            "OptionName": data.OptionName,
            "OptionValue": data.OptionValue,
            "Sort": data.Sort,
            "Remark": data.Remark,
        };
        console.log('edit(table)', obj);
 
        if (data.OptionID) {
            if ($.trim(data.OptionGroup) == "") {
                layer.alert("请填写[选项分组]!"); PageList();
                return;
            }
            if ($.trim(data.OptionName) == "") {
                layer.alert("请填写[选项名称]!"); PageList();
                return;
            }
            if ($.trim(data.OptionValue) == "") {
                layer.alert("请填写[选项的值]!"); PageList();
                return;
            }
            if ($.trim(data.Sort) == "") {
                layer.alert("请填写[选项排序]!"); PageList();
                return;
            }
 
            layer.confirm("确定保存：" + $("#OptionName").val() + "?", function () {
                $.ajax({
                    type: "POST",
                    url: "/PM/EditOption",
                    data: {
                        "model": obj,
                    },
                    success: function (result) {
                        if (result.success) {
                            layer.msg('保存成功!', {
                                icon: 1,
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                PageList();
                                layer.closeAll();
                            });
                        }
                        else {
                            layer.msg('保存失败!');
                        }
                    }
                });// $.ajax({
          });//layer.confirm(
        }//if (data.OptionID) {
 
    });
});
</script>