<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="/static/layui-v2.5.6/layui/css/layui.css">
</head>
<body>
<div class="layui-hide layui-btn-group" id="tool">
<a class="layui-btn layui-btn-normal" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger" lay-event="delid">删除</a>
</div>
<!-- 你的HTML代码 -->
<a class="layui-btn" href="/index/index/add_view">添加</a>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script src="//libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="/static/layui-v2.5.6/layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use('table',function(){
var table =layui.table;
table.render({
elem:'#test'
,url:'/index/index/all'
,cellMinWidth:80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,cols: [[
{field:'id',width:200,title:'ID',sort:true}
,{field:'username',width:200,title:'用户名'}
,{field:'phone',width:200,title:'性别'}
,{field:'created_at',width:200,title:'创建时间'}
,{field:'updated_at',width:200,title:'更新时间'}
,{fixed:'right',title:'操作',toolbar:'#tool',width:300}
]]
,response:{
statusCode:200 //重新规定成功的状态码为 200，table 组件默认为0
}
,parseData:function(res){//将原始数据解析成 table 组件所规定的数据
return {
"code": res.code,//解析接口状态
"msg": res.msg,//解析提示文本
"data": res.data //解析数据列表
}
},
});
table.on('tool(test)',function (obj) {
var id= obj.data.id;
switch (obj.event) {
case 'delid':
var url ='/index/index/del';
layer.confirm("您确定要删除吗？",function (index) {
$.ajax({
url:url
,type:'POST',
data:{
'id':obj.data.id
}
,success:function (d) {
layer.msg("删除成功");
window.location.reload();
}
})
});
break;//这是我的一个ajax删除方法了，记得删除后要有obj.del()哦，否则数据是不会更新的！
case 'edit':
//嘿嘿，修改和删除差不多啦
window.location.href='/index/index/update_view?id='+id;
break;
}
});
});
layui.use('layer',function() {//独立版的layer无需执行这一句
var $ =layui.jquery,layer =layui.layer;//独立版的layer无需执行这一句
});
</script>
</body>
</html>
css文件和js文件修改路径后可以正常使用 本人作为笔记使用 如有需要运行一遍代码即可
