帮我写一个springboot加layui的一个动态添加下拉框组件并渲染数据
时间: 2024-05-03 21:22:15 浏览: 175
springboot+layui简单demo实例
5星 · 资源好评率100%
好的,以下是一个示例代码:
首先,在pom.xml中添加Layui和Spring Boot的依赖:
```xml
<!-- Spring Boot -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Layui -->
<dependency>
<groupId>com.github.layui</groupId>
<artifactId>layui</artifactId>
<version>2.5.7</version>
</dependency>
```
然后,在Spring Boot的Controller中添加一个接口,用于获取下拉框数据:
```java
@RestController
public class DropdownController {
@GetMapping("/dropdown")
public List<String> getDropdownData() {
List<String> data = new ArrayList<>();
data.add("选项1");
data.add("选项2");
data.add("选项3");
return data;
}
}
```
接着,在html页面中添加一个按钮和一个空的下拉框:
```html
<button id="addDropdown">添加下拉框</button>
<div id="dropdownContainer"></div>
```
最后,在js中添加代码来动态添加下拉框和渲染数据:
```javascript
// 点击按钮,动态添加下拉框组件
$("#addDropdown").click(function() {
var dropdownId = "dropdown" + new Date().getTime();
var dropdownHtml = '<div class="layui-input-inline"><select id="' + dropdownId + '"></select></div>';
$("#dropdownContainer").append(dropdownHtml);
// 渲染下拉框数据
$.get("/dropdown", function(response) {
var dropdown = layui.layui.formSelects;
dropdown.render({
name: dropdownId,
data: response
});
});
});
```
这样,当用户点击“添加下拉框”按钮时,就会动态添加一个下拉框组件,并从后端获取数据并渲染到该下拉框中。
阅读全文