> 前端部分
//定义表格
//表格行事件
//表格渲染
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 '
}}
,{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 === 'del'){
layer.confirm('您确定要删除吗?',{
icon: 3,
}, function(index){
$.ajax({
url:"{:url('Car/del')}",
data:{
'id':data.car_id
},
type:"POST",
dataType:"JSON",
success:function (res) {
if(res.code == 0){
layer.msg(res.msg);
obj.del(); //删除对应行(tr)的DOM结构
layer.close(index);
//向服务端发送删除指令
}else {
layer.msg(res.msg);
}
}
})
},function (index) {
layer.msg('取消操作', {
time: 2000, //1s后自动关闭
});
});
}
});