layui 表格 table 示例

<table class="all-users" id="all-users" lay-filter="all-users"></table>
<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>

<script type="text/javascript">
layui.use('table', function(){
	var colsSetData=[
	{type:'numbers', title: '序号'}
	,{field:'name', width:180, title: '姓名'}
      ,{field:'user', width:230, title: '账号'}
      ,{field:'zhiwei', width:150, title: '职位'}
      ,{field:'group', width:80,title: '所在组',event:'setSign',templet: function (d) {
                if (d.group =='0'){
                    return '--'
                }else {
                    return d.group
                }
            }
          } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:'address_company', width:80,title: '归属地'}
      ,{field:'addHouTai_time', width:110,title: '开通日期'}
      ,{title: '操作',toolbar: '.all-users-caozuo'}]
      //colsSetData[7]={title: '操作222',toolbar: '.all-users-caozuo'}
     // console.log(colsSetData[6])
  var table = layui.table;
  table.render({
    elem: '#all-users'
    ,method:'post'
    //,toolbar: 'default'
    //,totalRow:false
    //,id:'all-users'
    //,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){
	    //如果是异步请求数据方式，res即为你接口返回的信息。
	    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
	    console.log(res);
	    //console.log( res.data[0]['name'] )
	    
	    //得到当前页码
	    console.log(curr); 
	    
	    //得到数据总量
	    console.log(count);
	    $('th').css({ 'color': 'black' })//用于设置表头的样式，th即代表表头
       $('td').css({ 'color': 'black' })//
        $("[data-field='Id']").css('display', 'none');//table加载完后的回调方法，此处是将id列隐藏掉
	  }
	  ,skin: 'line' //行边框风格 row line nob
      ,even: true //开启隔行背景
  });
  
  //监听行单击事件（双击事件为：rowDouble）
  //table.on('row(all-users)', function(obj){
  //  var data = obj.data;
  //  layer.alert(JSON.stringify(data), {
  //    title: '当前行数据：'
  //  });
  //  //标注选中样式
  //  obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
  //});
  
  //监听工具条
  table.on('tool(all-users)', 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>