> 前端部分 //定义表格 <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] }); }