首先搭建layui 数据表格实例,由于篇幅有限,以下只展示局部关键的代码信息
tableCols = [[
{field: 'id', title: 'ID', width:80,align:'center', sort: true}
,{field: 'linkName', title: '站点名称',align:'center',edit: 'text'}
,{field: 'linkUrl', title: '站点链接', align:'center',edit: 'text'}
,{field: 'descript', title: '站点描述',align:'center',edit: 'text'}
,{field: 'imgUrl', title: '站点图标', align:'center',edit: 'text'}
,{field: 'createTime', title: '创建日期 ', align:'center',sort: true}
,{field: 'status', title: '链接状态 ', align:'center',templet:
'#typeConvert',sort: true}
,{fixed: 'right',title:'操作', align:'center', toolbar: '#barDemo'}
]];
在下面这里需要注意的是:如果要控制开关,必须要把监听行的ID值赋值给它,否则在后面修改开关状态的时候,会显得非常的困难。在这里是是给它加了一个属性 mid
<script type="text/html" id="typeConvert">
<input type="checkbox" name = "status" value = {{d.status}} lay-skin="switch" lay-text="显示中|待审核" mid={{d.id}} lay-filter="status" {{ d.status == '01' ? 'checked' : '' }}>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
大致效果图如下:
如何和使用ajax来修改开关的状态呢?
//开关事件(status是lay-filter中的status,注意区别)
form.on('switch(status)', function(obj){
// 通过属性获取绑定的id值
var id = $(this).attr('mid');
// 判断开关的状态
var status=obj.elem.checked?"01":"00";
// 构造请求参数对象
var data=new Object();
data.status=status;
data.id=id;
//ajax请求方法
$.ajax({
url :"/link/update",
type : "post",
dataType : "json",
data : JSON.stringify(data),
async : false,
contentType : "application/json;charset=UTF-8",
success : function(data) {
if(data.code=="100"){
layer.msg("修改成功", {icon: 6});
}else{
layer.msg("修改失败", {icon: 6});
}
}
});
});