好的，以下是使用Spring Boot和
Layui编写的代码示例：
在HTML模板中，使用
Layui的动态
Table组件和
进度条：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic
Table with Progress Bar</title>
<!-- 导入
Layui和自定义样式 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/
layui/2.5.6/css/
layui.css">
<style>
.progress-bar {
width: 100%;
height: 20px;
background-color: #f2f2f2;
border-radius: 4px;
}
.progress-inner {
height: 100%;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="
layui-container">
<
table class="
layui-
table">
<thead>
<tr>
<th>数据</th>
<th>
进度</th>
</tr>
</thead>
<tbody id="
table-body">
<!-- 动态生成
表格数据 -->
</tbody>
</
table>
</div>
<!-- 导入
Layui和自定义脚本 -->
<script src="https://cdn.staticfile.org/
layui/2.5.6/
layui.js"></script>
<script>
layui.use('
table', function(){
var
table =
layui.
table;
//
表格渲染
table.render({
elem: '.
layui-
table',
url: '/getData', // 获取
表格数据的接口
cols: [[
{field: 'name', title: '数据'},
{field: 'progress', title: '
进度', templet: '#progressBar'}
]]
});
// 自定义
进度条模板
table.set({
templet: {
progressBar: function (d) {
var color = getProgressColor(d.progress);
return '<div class="progress-bar"><div class="progress-inner" style="width:' + d.progress + '%; background-color:' + color + ';"></div></div>';
}
}
});
// 获取
进度条背景颜色
function getProgressColor(progress) {
if (progress >= 80) {
return '#5FB878'; // 绿色
} else if (progress >= 50) {
return '#FFB800'; // 橙色
} else {
return '#FF5722'; // 红色
}
}
});
// 定时请求更新数据
setInterval(function() {
layui.use('
table', function () {
var
table =
layui.
table;
table.reload('
table-body', {
url: '/getData' // 获取
表格数据的接口
});
});
}, 5000); // 每5秒钟刷新一次数据
</script>
</body>
</html>
```
在Spring Boot的Controller中，处理获取
表格数据的请求：
```java
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
@Controller
@RequestMapping("/")
public class
TableController {
@GetMapping("/getData")
@ResponseBody
public List<Data> getData() {
// 模拟从数据库或其他数据源获取
表格数据
List<Data> datas = getDataFromDataSource();
// 模拟更新
进度
updateProgress(datas);
return datas;
}
private List<Data> getDataFromDataSource() {
// 模拟从数据库或其他数据源获取数据
List<Data> datas = new ArrayList<>();
datas.add(new Data("数据1", 0));
datas.add(new Data("数据2", 0));
datas.add(new Data("数据3", 0));
// ...
return datas;
}
private void updateProgress(List<Data> datas) {
Random random = new Random();
for (Data data : datas) {
int progress = random.nextInt(100); // 随机生成
进度值
data.setProgress(progress);
}
}
// 数据模型类
public static class Data {
private String name;
private int progress;
public Data(String name, int progress) {
this.name = name;
this.progress = progress;
}
public String getName() {
return name;
}
public int getProgress() {
return progress;
}
public void setProgress(int progress) {
this.progress = progress;
}
}
}
```
以上代码通过Spring Boot和
Layui实现了一个动态的
Table组件，在HTML模板中使用
Layui的动态
Table组件渲染
表格数据，并使用自定义的模板渲染
进度条单元格。在Spring Boot的Controller中，处理获取
表格数据的请求，并模拟更新
进度。
进度条的背景颜色根据
进度值在
前端动态设置。为了实现实时更新
进度，代码中使用了定时请求的方式，每隔5秒钟刷新一次数据。请根据实际情况修改代码，并确保正确导入相关的依赖库。希望对你有所帮助！如有疑问，请随时追问。
超级会员免费看
订阅专栏 解锁全文
扫一扫
2420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
