具体看代码,没什么好说的
layui.use(['form','table','element'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table,
//是否启用模板
var statusTpl = function (d) { //名字需要和上面定义的名字对应上
var isCkecked = d.used == "1" ?"checked":"";
return '<input type="checkbox" value="'+d.id+'" lay-skin="switch" lay-filter="status" lay-text="启用|禁用" '+ isCkecked +'> ';
};
table.render({
elem: '#currentTableId',
url: 'page/list.php',
//toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50},
{field: 'id', width: 80, title: 'ID', sort: true},
{field: 'fullname', width: 120, title: '姓名'},
{field:'used', width: 80, title: '状态',align:'center',templet: statusTpl},// 这个就是用来在表格上显示开关的
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
skin: 'line',
done: function(res,page,counts){
//根据id显示中文名
$.getJSON('api/user_select.json', function(curres){
var curjson=curres.data;
//分类显示中文名称
$("[data-field='curid']").children().each(function(){
var fieldobj=$(this);
var curid=fieldobj.text();
//console.log(cloudid);
$.each(curjson, function(index, item){
//console.log(item.id);
if(item.id==curid){
fieldobj.text(item.fullname);
}
});
});
});
//处理完成
}
});
form.on('switch(status)', function(obj){
// 得到开关的value值,实际是需要修改的ID值。
console.log(obj);
var index;
var tid = obj.value;
var status = this.checked ? '1' : '0';
var onoffstr='page/table/switch_onoff.php?id='+tid;
$.ajax({
type: 'POST',
url: onoffstr,
dataType:'JSON',
data: {"id" :tid,"status":status},
beforeSend:function(){
index = layer.msg('正在切换中,请稍候',{icon: 16,time:false,shade:0.8});
},
error: function(data){
layer.msg('数据异常,操作失败!');
},
success: function(data){
if(data.Status){
setTimeout(function(){
layer.close(index);
layer.msg('操作成功!');},2000);
}else{
layer.msg('数据异常,操作失败!');
}
}
});
});
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
});