LayUI中table组件中如何使用switch开关。
自己的想法是在table组件中,加载后台数据的时候,就在页面上显示一个开关值,直接在页面上选中开关可以进行数据更改。参考各位大神的方法后,得出具体的思路如下。
1.首先在table组件中,利用它模板的去显示这个开关
table.render({ elem: '#demo' //指定原始表格元素选择器(推荐id选择器) ,height: 315 //容器高度 ,cols: [{ filed:'status',title:'状态',templet:'#statusTemp' // 这个就是用来在表格上显示开关的。 }] //设置表头 //,…… //更多参数参考右侧目录:基本参数选项 });
2.编写模板代码:
<script type="text/html" id="statusTemp"> {{# if(d.media.status==1){ }} <input type="checkbox" name="status" lay-skin="switch" checked lay-text="开启|关闭" value= {{ d.media.id}} lay-filter="status" > {{# } else { }} <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭" value= {{ d.media.id} lay-filter="status" > {{# } }}
3.在js中监听switch的事件:
form.on('switch(status)', function(data){ // 得到开关的value值,实际是需要修改的ID值。 var id = data.value; var status = this.checked ? '1' : '0'; $ajax({ var index; type: 'POST', url: '/hetong/setAlert/', data: {"id" :id,"status":status }, beforeSend:function(){ index = layer.msg('正在切换中,请稍候',{icon: 16,time:false,shade:0.8}); }, error: function(data){ console.log(data); layer.msg('数据异常,操作失败!'); }, success: function(data){ if(data.result=="SUCCESS"){ setTimeout(function(){ layer.close(index); layer.msg('操作成功!');},2000); }else{ console.log(data); layer.msg('数据异常,操作失败!'); }}, dataType:'JSON' }); });