springboot多选全选单选,修改数据库字段接口全部代码
时间: 2024-03-14 08:43:54 浏览: 18
以下是一个示例代码,实现了springboot的多选、全选、单选功能,并且可以将修改后的数据保存到数据库中。
首先是前端部分,使用了jQuery和Bootstrap来实现多选、全选、单选的功能以及发送ajax请求到后端。
```html
<!-- 多选框 -->
<div class="form-check">
<input class="form-check-input" type="checkbox" name="checkbox" value="1" id="checkbox1">
<label class="form-check-label" for="checkbox1">
选项1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="checkbox" value="2" id="checkbox2">
<label class="form-check-label" for="checkbox2">
选项2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="checkbox" value="3" id="checkbox3">
<label class="form-check-label" for="checkbox3">
选项3
</label>
</div>
<!-- 全选/取消全选按钮 -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkall">
<label class="form-check-label" for="checkall">
全选/取消全选
</label>
</div>
<!-- 单选框 -->
<div class="form-check">
<input class="form-check-input" type="radio" name="radio" value="1" id="radio1">
<label class="form-check-label" for="radio1">
选项1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio" value="2" id="radio2">
<label class="form-check-label" for="radio2">
选项2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio" value="3" id="radio3">
<label class="form-check-label" for="radio3">
选项3
</label>
</div>
<!-- 保存按钮 -->
<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
<script>
$(function() {
// 全选/取消全选
$("#checkall").click(function() {
$("input[name='checkbox']").prop("checked", this.checked);
});
// 保存
$("#saveBtn").click(function() {
var checkedValues = [];
$("input[name='checkbox']:checked").each(function() {
checkedValues.push($(this).val());
});
var radioValue = $("input[name='radio']:checked").val();
$.ajax({
type: "POST",
url: "/saveData",
data: {
"checkboxValues": checkedValues,
"radioValue": radioValue
},
success: function(data) {
alert("保存成功");
},
error: function() {
alert("保存失败");
}
});
});
});
</script>
```
然后是后端部分,首先需要定义一个实体类来存储数据,包括多选框和单选框的值。
```java
public class FormData {
private List<String> checkboxValues;
private String radioValue;
public List<String> getCheckboxValues() {
return checkboxValues;
}
public void setCheckboxValues(List<String> checkboxValues) {
this.checkboxValues = checkboxValues;
}
public String getRadioValue() {
return radioValue;
}
public void setRadioValue(String radioValue) {
this.radioValue = radioValue;
}
}
```
然后是Controller部分,定义了一个/saveData接口,接收前端发送的数据,并且将数据保存到数据库中。
```java
@RestController
public class FormDataController {
@Autowired
private FormDataRepository formDataRepository;
@PostMapping("/saveData")
public String saveData(@RequestBody FormData formData) {
// 将多选框和单选框的值保存到数据库中
FormDataEntity formDataEntity = new FormDataEntity();
formDataEntity.setCheckboxValues(String.join(",", formData.getCheckboxValues()));
formDataEntity.setRadioValue(formData.getRadioValue());
formDataRepository.save(formDataEntity);
return "success";
}
}
```
最后是数据库部分,定义了一个FormDataEntity实体类,用来存储多选框和单选框的值。
```java
@Entity
@Table(name = "form_data")
public class FormDataEntity {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(name = "checkbox_values")
private String checkboxValues;
@Column(name = "radio_value")
private String radioValue;
// getter/setter省略
}
```
这样就完成了springboot的多选、全选、单选的功能,同时将修改后的数据保存到了数据库中。