layui 表格 table 示例 2021-7-4版本

<script type="text/html" class="all-users-caozuo" id='caozuofff'>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<table class="all-users" id="baidu-wx-zaitui-tab" lay-filter="baidu-wx-zaitui-tab"></table>
<script type="text/javascript">
layui.use('table', function(){
	var colsSetData=[
	{type:'numbers', title: '序号'}
	,{field:'name', width:180, title: '姓名'}
      ,{field:'111', width:230, title: 'zzz1'}
      ,{field:'222', width:150, title: 'zzz2'}      
      ,{field:'3333', width:80,title: '3333'}
    //   ,{field:'addHouTai_time', width:110,title: '开通日期'}
    //   ,{title: '操作',toolbar: '.all-users-caozuo'}
    ]
      
  var table = layui.table;
  var tableId ='table-id'
  table.render({
    elem: '#'+tableId
    ,method:'post'
    //,toolbar: 'default'
    //,totalRow:false
    ,id:tableId
    //,where: {token: 'sasasas', name: 123}//接口的其它参数
    ,url:url
    ,cellMinWidth: 50 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,width:1000
    ,cols: [colsSetData]
    ,page: false
    , limit: 100 //默认分页条数
    ,done: function(res, curr, count){
	   
	  }
	  ,skin: 'line' //行边框风格 row line nob
      ,even: true //开启隔行背景
  });
  
  
  //监听工具条
  table.on('tool('+tableId+')', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.msg('ID：'+ data.id + ' 的查看操作');
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
    	//var fffff=JSON.stringify(data)
    	//var fffff = eval ("(" + fffff + ")");
    	console.log(data)
    	console.log(data.name)
    	console.log(data['name'])
    	//layer.alert('编辑行：<br>'+ fffff)
      //layer.alert('编辑行：<br>'+ JSON.stringify(data))
     // layer.alert('编辑行：<br>'+  data )
    }
    
    
    if(obj.event === 'setSign'){
      layer.prompt({
        formType: 2
        ,title: '修改 姓名 为 ['+ data.name +'] 的所在组'
        ,value: data.group
      }, function(value, index){
        layer.close(index);
        
        //这里一般是发送修改的Ajax请求
        
        //同步更新表格和缓存对应的值
        obj.update({
          group: value
        });
        
      });
    }
  });
  
  
  
  
});
</script>