Layui开关使用

在Jsp列表页面使用layui开关

1. 功能介绍：
   使用layui开关控制一条数据的状态。0：表示启用 1：表示禁用。

2. 后台框架：
   SpringMVC+Mybatis

3. 后台页面：
   Jsp页面

4. 功能展示：
   

5. 代码实现：
   前台：

<tbody>
		<c:forEach items="${resultMap.result.records }" var="r">
				<tr>
					<td>
						<input type="checkbox" name="ids" lay-skin="primary">
					</td>
					<td>${r.code }</td>
					<td>${r.payments }</td>
					<td>${r.raised }</td>
					<td>${r.createTime }</td>
					<td>
						<input type="checkbox" value="0" name="state" lay-skin="switch" lay-text="启用|禁用" ${r.state eq '0' ? 'checked': '' }>
						<input type="hidden" id="kaigID" value="${r.id }" />
					</td>
				</tr>
			</c:forEach>
		</tbody>

前台JS：

<script>
		layui.use('form', function() {
			var form = layui.form; //表单
			form.on('switch', function(data) {
				console.log(data.elem.checked); //开关是否开启，true或者false
				console.log(data.value); //开关value值，也可以通过data.elem.value得到
				var id = $(data.othis).next("input").val();
				if(data.elem.checked == true) {
					$.ajax({
						type: "post",
						async: false,
						data: "id=" + id + "&state=" + 0,
						url: "changeState",
						success: function(data) {
							flag = data
						},
					});
					if(flag == "Ny") {
						layer.msg("启用状态数不超过三个!");
					} else {
						layer.msg("已启用!");
					}
				} else {
					$.ajax({
						type: "post",
						async: false,
						data: "id=" + id + "&state=" + 1,
						url: "changeState",
						success: function(data) {
							flag = data
						},
					});
					if(flag == "yes") {
						layer.msg("已禁用!");
					}  
				}

			});
		})
	</script>

（layui官方文档）开关被点击时触发，回调函数返回一个object参数，携带两个成员：

form.on('switch(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //开关是否开启，true或者false
  console.log(data.value); //开关value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});  

需要引入的js

<script src="layui/layui.js></script>

功能逻辑：
当点击开关时，js获取当前数据的ID，layui开关监听事件，会返回true/false,我的功能实现是当返回true时，状态设置为0，携带ID和状态码使用Ajax传给后台处理，反之为false时，状态设置为1