项目小结--前台循环复选框-CSDN博客

本文链接：https://blog.csdn.net/qq_41328653/article/details/108665150

本文总结了一个项目中关于前台复选框的实现，涵盖了从实体类定义、SQL设计到前后端交互的全过程。重点介绍了在permissionInfo.html和permissionInfo.js中的功能实现，包括如何显示已选中的复选框值以及如何将这些值添加到后台。

摘要由CSDN通过智能技术生成

实体类：

@Data
public class KeyStringValue {
	private String key;
	private String value;
	private Object note;
}

sql：

CREATE TABLE `xsq_permission` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '权限id',
  `name` varchar(20) DEFAULT NULL COMMENT '权限名称',
  `status` int(10) DEFAULT '1' COMMENT '状态 0不可用 1可用 默认1',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8 COMMENT='权限表';

Dao层、Service层：

List<KeyStringValue> getPermissionList();

Mapper层：

获取被选中的权限集合

<select id="getPermissionList" resultType="com.community.util.common.KeyStringValue">
	select id `key`, name `value` from xsq_permission where status=1 order by convert(name using gbk) and id desc
</select>

Service实现层：

@Override
public List<KeyStringValue> getPermissionList() {
    return this.roleDao.getPermissionList();
}

Controller层：

将数据存入model

@GetMapping(params = "permissionInfo")
@ResponseStatus(HttpStatus.OK)
public String RoleInfo(Model model){
    model.addAttribute("permissionList",this.roleService.getPermissionList());
    return "manager/permissionInfo";
}

permissionInfo.html：

<form class="layui-form-item">
	<label class="layui-form-label">权限名称</label>
	<div class="layui-input-block">
		<input th:each="p : ${permissionList}" type="checkbox" name="permissionName" lay-filter="like" th:title="${p.value}" th:value="${p.key}">
	</div>
</form>

permissionInfo.js：

显示被选中的复选框：

 if(info.permission != null) {
     $.each(info.permission, function(key, value) {
         $("input[name='permissionName'][value='"+value.id+"']").attr("checked", true);
     });
 }

添加被选中的复选框值：

 function openPageCommit() {
	var dataForm = {};
    var permissionId=[];
	$('input[type=checkbox]:checked').each(function() {
        permissionId.push($(this).val());
	});
    dataForm.permissionId=permissionId.toString();
	$.ajax({
		url : "../manager/permission?savePermission",
		type : "POST",
		data : dataForm,
		dataType : "text",
		success : function(text) {
			if (text == 1) {
				layuiMsg("操作成功");
				setTimeout(function() {
					layer.closeAll();
					nextPage(1);
				}, 1000);
			} else if (text == 0) {
				layuiMsg("不能重复添加");
			} else {
				layuiMsg("系统繁忙请稍后再试");
			}
		}
	});
}