1、不要忘记引用layui线上css和script
2、后台代码注意返回状态码和总页数等等的规范
3、前台代码如下
<!doctype html>
<html lang="en">
<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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
<link rel="shortcut icon" href="__STATIC__/images/study.ico">
</head>
<body>
<!--搜索-->
<div class="demoTable">
关键字：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<!--table表格渲染-->
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 模板：批量删除-->
<script type="text/html" id="delAll">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">批量删除</button>
</div>
</script>
<!-- 模板：基本操作-->
<script type="text/html" id="actionBar">
<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/html" id="img">
<div><img src="http://www.m7.com/static/uploads/{{d.brand_logo}}" width="30" height="30" alt="加载失败.."></div>
</script>
</body>
</html>
<script src="__STATIC__/layui/layui.js"></script>
<script>
layui.use(['table','jquery'], function(){
var table = layui.table;//类似于实例化
var $ = layui.jquery;
var token = localStorage.getItem('token');
//开始渲染报表格
table.render({
elem: '#test',//将table实例与页面中的元素绑定到一起（通过id进行绑定的）
url:'http://www.m7.com/admin/brand/brandListDo?token='+token,//接口地址
cols:[[
{type:'checkbox'},
{field:'id', title: '主键id', sort: true},
{field:'brand_name', title: '品牌名称',edit:'text'},
{field:'brand_logo', title: '品牌LOGO',templet:'#img'},
{field:'brand_desc', title: '品牌描述',edit:'text'},
{field:'brand_order', title: '品牌排序',sort:true,edit:'text'},
{field:'cate_name', title: '分类名称'},
{title: '操作',fixed: 'right',toolbar: '#actionBar', width:150},
]],//渲染每一列
page: true,//开启分页
limit:3,//控制每页显示多少条（默认）
limits:[3,5,10,15,20],//控制每页显示多少条
toolbar:'#delAll',//开启工具栏
id:'testReload',//给出id标识
});
//头工具栏事件(批量删除)
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
var arr = checkStatus.data;
var ids = [];
$(arr).each(function (k,v) {
ids.push(v.id)
})
$.ajax({
url:'http://www.m7.com/admin/brand/brandDel?token='+token+'&ids='+ids.toString(),
success:function (e) {
if(e.code==0){
table.reload('testReload')
}
}
})
});
//监听单元格编辑
table.on('edit(test)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('确定要删除吗？', function(index){
console.log(data);
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
console.log(data.id)
}
});
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
word:demoReload.val()
}
});
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
})
</script>效果图如下：
