效果圖：
代碼：
<!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>