layui-from switch開關使用小結
switch開關單獨使用
先準備一個測試頁面，頁面含有一個表單，表單中包含一個開關和一個提交按鈕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試頁面</title>
<!--layui.css引用，修改成自己項目的路徑-->
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!--layui.js和jQuery的引用，修改成自己的路徑-->
<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../js/libs/jquery-2.1.1.min.js"></script>
<form class="layui-form" lay-filter="update_submit">
<div class="layui-form-item">
<label class="layui-form-label">開關</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" id="switch" lay-skin="switch" lay-text="ON|OFF">
</div>
<div style="margin: 10px 0 0 50px">
<button class="layui-btn" lay-submit="" lay-filter="submit">提 交</button>
</div>
</div>
</form>
<script>
layui.use(['table', 'layer', 'form', 'element', 'laypage', 'laydate'], function () {
var form = layui.form,
element = layui.element;
//監聽提交
form.on('submit(submit)', function (data) {
if ($("#switch").is(':checked')) {
data.field.switch = '1';
} else {
data.field.switch = '0';
}
console.log(data.field);
return false;
});
});
</script>
</body>
</html>
switch初始化問題
如果後端數據庫存儲這樣一個字段，status：0或1，它決定switch開關的狀態，1代表開啓，0代表關閉，那麼如何前後聯動，實現前端switch開關的動態加載呢？
// 根據數據庫狀態渲染beanshell斷言的狀態
// 後端返回數據示例：{"data":{"status":1}}
var status= result.data.status;
if (status== '1') {
$("#switch ").attr('checked', 'checked');
} else {
$("#switch ").removeAttr('checked');
}
layui.form.render();
swtich自定義提交數據
目前，layui表單提交時，如果switch是開啓狀態，其值爲on，關閉狀態則不含有switch的數據，這種設計模式對於編輯前端表單對應的後端數據非常不便，需要在form提交事件中自定義提交值。
//監聽提交
form.on('submit(submit)', function (data) {
// 直接獲取switch狀態的方法
if ($("#switch").is(':checked')) {
data.field.switch = '1';
} else {
data.field.switch = '0';
}
console.log(data.field);
return false;
});
