在Layui中實現開關按鈕的效果實例

今天看過幾篇博客，看的有點亂，下面分享一個layui的開關按鈕，不知道你們看這個會不會亂呢，hhh；

按鈕代碼如下：

{field: 'state', title: '狀態', width: 85, templet: function (data) { if (data.state == 0) { return '<div> <input type="checkbox" checked="" name="codeSwitch" lay-skin="switch" id="open" lay-filter="switchTest" switchId=' + data.userId + '' +
                            ' lay-text="啟用|已禁用" value=' + data.state + '></div>'; } return '<div> <input type="checkbox" lay-skin="switch" name="codeSwitch" switchId=' + data.userId + ' lay-filter="switchTest"' +
                        'lay-text="啟用|已禁用" value=' + data.state + '></div>'; } }

 

實現操作js代碼如下：

 /** * 監聽開關 狀態 操作 */ form.on('switch(switchTest)', function (data) { /** * 禁用標簽 * 狀態 賦值為 1 */
        var layerIndex = layer.load(3); if ((this.checked ? 'true' : 'false') == 'false') { $.ajax({ url: '/users/delete', data: { state: 1, userId: data.elem.getAttribute("switchId") }, type: 'PUT', //HTTP請求類型
 success: function (data) { console.log(data); $.message({ message: "禁用用戶", type: 'success', showClose: true }); }, error: function () { $.message({ message: "boom..", type: 'error', showClose: true }); } }) } else { /** * 啟動標簽 * 狀態 賦值為 0 */ $.ajax({ url: '/users/delete', data: { state: 0, userId: data.elem.getAttribute("switchId") }, type: 'PUT', success: function (data) { console.log(data); $.message({ message: "啟動用戶", type: 'success', showClose: true }); }, error: function () { $.message({ message: "boom..", type: 'error', showClose: true }); } }) } layer.close(layerIndex); });

直接復制粘貼就可以用了(記得改下id與狀態哦)

 

效果圖如下：

提示框用的是bootstrap框架的

 

 

 

下面兩行代碼可以實現頁面的加載效果，第一行放在操作的開頭，第二行放在操作的結束

var layerIndex = layer.load(3);  

layer.close(layerIndex);

  

碼雲地址：https://gitee.com/ckfeng/springboot_mysql_redis.git

 

感謝來訪！