layui动态修改表格内容

最新推荐文章于 2024-04-04 02:14:58 发布

追丰少年

最新推荐文章于 2024-04-04 02:14:58 发布

阅读量10w+

点赞数

分类专栏： Layui前端框架文章标签： layui 动态表格单元格编辑 AJAX 数据更新

本文链接：https://blog.csdn.net/Ghjkku/article/details/123604819

版权

Layui前端框架专栏收录该内容

5 篇文章 1 订阅

订阅专栏

layui动态表格，动态修改表格内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../../res/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
<table class="layui-table" lay-data="{url: '../../demo/table/demo1/-page=1&amp;limit=10.js', id:'test3', escape: true}" lay-filter="test3">
  <thead>
    <tr>
      <th lay-data="{type:'checkbox'}">ID</th>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th>
      <th lay-data="{field:'email', edit: 'text', minWidth: 150}">邮箱</th>
      <th lay-data="{field:'sex', width:80, edit: 'text'}">性别</th>
      <th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th>
      <th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th>
    </tr>
  </thead>
</table>
              
          
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use(['table', 'util'], function(){
  var table = layui.table
  ,util = layui.util;
  
  //监听单元格编辑
  table.on('edit(test3)', function(obj){
    console.log(obj.data.id);
    alert(obj.value);
    alert(obj.field);
    console.log(obj.value);   //得到修改后的值
    console.log(obj.field);  //当前编辑的字段名
    console.log(obj.data); //所在行的所有相关数据
    console.log(obj.data.Name); //某个字段的值
    var data = obj.data;
    
    var CommodityDetailID =
    data.CommodityDetailID;
    var value = obj.value;
    //ajax请求修改
    var data = obj.data;
    $.ajax({
      url: "{:url('Customer/doedit')}",
      type: 'POST',
      dataType: 'JSON',
      data: {'id':data.id,'NewName':obj.value},
      success: function (result) {
          if(result.code == 0){
              layer.msg(result.msg);
          }else{
              layer.msg(result.msg);
          }
      },
    });
   
  
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
  });
});
</script>

</body>
</html>

追丰少年

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
layui动态修改表格内容

layui动态表格，动态修改表格内容<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> .
复制链接

扫一扫