点击查看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>layui 调试预览</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.7/css/layui.css" media="all">
</head>
<body>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<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 id="baseTable" class="layui-hide" lay-filter="test">
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.7/layui.js"></script>
<script>
var data = [{"id":"1","day":"12.30","time":"12:30"},{"id":"2","day":"12.31","time":"11:30"}];
//加载模块
layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
//得到各种内置组件
var layer = layui.layer //弹层
,laypage = layui.laypage //分页
,laydate = layui.laydate //日期
,table = layui.table //表格
,carousel = layui.carousel //轮播
,upload = layui.upload //上传
,element = layui.element //元素操作
,slider = layui.slider //滑块
,dropdown = layui.dropdown //下拉菜单
//监听Tab切换
element.on('tab(baseTable)', function(data){
layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
tips: 1
});
});
//执行一个 table 实例
table.render({
elem: '#baseTable'
,height: 600
,data: data
,title: 'test'
,page: true //开启分页
,toolbar: '#toolbarDemo'//'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
,totalRow: true //开启合计行
,cols: [[ //表头
{type: 'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID', width:80, type:'numbers', sort: true,align: "center"}
,{field: 'username', title: '用户名', width:80,align: "center"}
,{field: 'experience', title: '积分', width: 90, sort: true,align: "center"}
,{field: 'sex', title: '性别', width:80, sort: true,align: "center"}
,{field: 'score', title: '评分', width: 80, sort: true,align: "center"}
,{field: 'city', title: '城市', width:150,align: "center"}
,{field: 'sign', title: '签名', width: 200,align: "center"}
,{field: 'day', title: '职业', width: 100,align: "center"}
,{field: 'time', title: '财富', width: 135, sort: true,align: "center"}
,{fixed: 'right', id:'id', width: 200, align:'center', title:"操作", toolbar: '#barDemo',align: "center"}
]]
});
//监听工具条
table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'detail'){ //查看
//do somehing
alert('do!');
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
layer.close(index);
//向服务端发送删除指令
check(document.getElementById('id'));
});
} else if(layEvent === 'edit'){ //编辑
alert('edit');}
});
});
function check(id){
if(id = 1){
alert('删除成功！');
}else{
alert('删除失败！')
}
}
</script>
</body>
</html>