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' }); });