使用LayUI操作数据表格

<table class="layui-hide" id="LAY_table_user" lay-filter="useruv"></table>

<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a> <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a> </script> //方法级渲染 table.render({ elem: '#LAY_table_user' ,url: 'UVServlet' ,cols: [[ {checkbox: true, fixed: true} ,{field:'id', title: 'ID', 80, sort: true, fixed: true} ,{field:'aid', title: '商户', 80, sort: true} ,{field:'uv', title: '访问量', 80, sort: true,edit:true} ,{field:'date', title: '日期', 180} ,{field:'datatype', title: '日期类型', 100} ,{field:'right', title: '操作', 177,toolbar:"#barDemo"} ]] ,id: 'testReload' ,page: true ,height: 600 });

//监听表格复选框选择
        table.on('checkbox(useruv)', function(obj){
            console.log(obj)
        });
//监听工具条
  table.on('tool(demo)', 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'){
      layer.alert('编辑行:<br>'+ JSON.stringify(data))
    }
  });

来源:https://www.cnblogs.com/jingch/p/7620075.html

原文地址:https://www.cnblogs.com/shy1766IT/p/11392309.html