> 前端部分 //定義表格 <table class="layui-hide" id="table-car" lay-filter="table-car"></table> //表格行事件 <script type="text/html" id="barCar"> <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">編輯</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a> </script> //表格渲染 layui.use(["table", "util", "form" ,"jquery"], function(){ var table = layui.table ,util = layui.util ,form = layui.form ,$ = layui.jquery; table.render({ elem: '#table-car' ,url:"{:url('Car/carList')}" ,title: '車型管理表' ,toolbar: true ,cellMinWidth: 80 //全局定義常規單元格的最小寬度，layui 2.2.1 新增 ,cols: [[ {type: 'checkbox'} ,{field:'car_id', title:'ID', width:80, unresize: true, sort: true} ,{field:'car_name', title:'車型名稱',width:200,sort: true} ,{field:'cname', title:'車型類別',width:100,sort: true} ,{field:'car_picurl', title:'車型圖片', width: 120,templet: function(res){ return '<div><img class="headimgsize" src="/uploads/'+ res.car_picurl +'"/></div>' }} ,{field:'car_sf_money', title:'首付',} ,{field:'car_yg_money', title:'月供',} ,{field:'car_zdj_money', title:'指導價',} ,{field:'car_tj_zhishu', title:'推薦指數',width:100,templet:function (res) { return res.car_tj_zhishu + '星'; }} ,{field:'car_tj_liyou', title:'推薦理由',hide:true} ,{field:'car_add_time', title:'添加時間',templet:function (res) { return util.toDateString(res.car_add_time = (res.car_add_time * 1000)); }} ,{title:'操作', toolbar: '#barCar'} ]] ,page: true ,done:function (res,page,count) { } }); }); > 事件監聽部分 //監聽行工具事件 table.on('tool(table-car)', function(obj){ var data = obj.data //獲得當前行數據 ,layEvent = obj.event; //獲得 lay-event 對應的值 if(layEvent === 'edit'){ layer_detail('編輯車型','{:url(\'Car/edit\')}?id='+data.car_id); } }); > Layer彈窗 function layer_edit(title,url){ var index = layer.open({ type: 2, title: title, closeBtn: 1, //是否顯示關閉按鈕 area: ['800px', '700px'], anim: 2, //動畫 shadeClose: false, //點擊空白處是否關閉 maxmin: true, //開啟最大化最小化按鈕 content: [url] }); }