效果图：
代码：
<!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>