layui如何实现开关按钮，基于springboot的ssm框架

layui基于springboot的ssm框架

1.前端
一、在渲染表格table.render里面的cols里面添加

{
	field: 'isLockout',
	title: '是否锁定',
	toolbar:'#switchBar1'
}

二、添加开关

<!-- 开关1（既能开也能关） -->
		<script type="text/html" id="switchBar1">
    		<input type="checkbox" data-id="{{d.id}}" name="id" lay-filter="isLockSwitch" lay-skin="switch" lay-text="是|否" {{d.isLockout=="是" ? "checked":"否"}}>
		</script>

三、添加按钮控制代码（js）

// 处理开关点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
		      form.on('switch(isLockSwitch)', function (data) {
		          var id = $(this).attr('data-id');	
		          var valid = this.checked ? 'on' : 'off';	//获取到点击后的开关状态（on/off）
		          var x=data.elem.checked;					//获取到点击后的开关状态（true/false）
		          layer.open({
		              content: '确定要修改状态吗？'				//给用户的友好提示
		              ,btn: ['确定', '取消']
		              ,yes: function(index, layero){
		                  data.elem.checked=x;
		                  layer.close(index);
		                  if (valid=="on") {
		                  	$.ajax({
		                      type : "POST",
		                      url :"" + globalDate.server + "user/LockUser",
		                      data : {"id" : id,"valid":valid,"token":globalDate.token},
		                      success : function(res) {
		                          if(res){
		                              layer.msg("锁定用户成功！！！");
		                          }else{
		                              layer.msg("锁定用户失败！！！");
		                          }
		                          form.render();
		                      },
		                      error : function() {
		                      }
		                  });
		                  } else{
		                  	$.ajax({
		                      type : "POST",
		                      url :"" + globalDate.server + "user/UnLockUser",
		                      data : {"id" : id,"valid":valid,"token":globalDate.token},
		                      success : function(res) {
		                          if(res){
		                              layer.msg("启动用户成功！！！");
		                          }else{
		                              layer.msg("启动用户失败！！！");
		                          }
		                          form.render();
		                      },
		                      error : function() {
		                      }
		                  });
		                  }
		              }
		              ,btn2: function(index, layero){
		                  //按钮【按钮二】的回调
		                  data.elem.checked=!x;
		                  form.render();
		                  layer.close(index);
		                  //return false 开启该代码可禁止点击该按钮关闭
		              }
		              ,cancel: function(){
		                  //右上角关闭回调
		                  data.elem.checked=!x;
		                  form.render();
		                  //return false 开启该代码可禁止点击该按钮关闭
		              }
		          });
		          form.render();
		          return false;
		      });

2.后端
一、mapper接口

/**
     * 是否锁定
     * @param id
     * @param isLockout
     * @return
     */
    int updateByIsLockout(String id,String isLockout);

二、service层

/**
     * 是否锁定
     * @param id
     * @param valid
     * @return
     */
    int updateByIsLockout(String id,String valid);

三、serviceImpl层

@Override
	public int updateByIsLockout(String id, String valid) {
		// TODO Auto-generated method stub
		return userMapper.updateByIsLockout(id, valid);
	}

四、controller层

@RequestMapping("/LockUser")
	public boolean LockUser(String id,String valid) {
		String isLockout = "";
		if (valid != null && valid != "" && valid.equals("on")) {
			isLockout = "是";
		} else {
			isLockout = "否";
		}
		return userService.updateByIsLockout(id,isLockout)>0?true:false;
	}
	
	@RequestMapping("/UnLockUser")
	public boolean UnLockUser(String id,String valid) {
		String isLockout = "";
		if (valid != null && valid != "" && valid.equals("on")) {
			isLockout = "是";
		} else {
			isLockout = "否";
		}
		return userService.updateByIsLockout(id,isLockout)>0?true:false;
	}

五、mapper.xml里面的sql

<update id="updateByIsLockout">
    update user set IsLockout = #{isLockout,jdbcType=VARCHAR} where Id = #{id,jdbcType=VARCHAR}
  </update>

这样就可以实现啦！！！！
注：为了访问安全，我加了"token":globalDate.token，小伙伴们可以去掉。我的token是在全局配置里面写的。这里看不到，不好意思啊！！