如何在 Spring 中将数据插入到可操作的脚本中
Posted
技术标签:
【中文标题】如何在 Spring 中将数据插入到可操作的脚本中【英文标题】:How to insert data into a handsontable script in Spring 【发布时间】:2021-03-07 00:07:07 【问题描述】:我在我的项目中使用Handsontable。我需要在 Spring 中从我的数据库中的表中插入数据。我知道如何用 Thymeleaf 做到这一点:
<tr th:each="row : $tariffs">
<td th:text="$row.warehouse"></td>
</tr>
但是如何从 js 脚本中插入或获取数据呢?
这是我的表格代码,我想我们可以通过循环帮助在 const data 中添加数据
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Spring Security Example </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
</head>
<body>
<div id="tariffTable" th:each="row : $tariffs"></div>
<script>
const data = [
['1234', Als, Town1],
['1235', Bas,Town2],
['1236', Oxa, Town3]
];
const container = document.getElementById('tariffTable');
const hot = new Handsontable(container,
data: data,
rowHeaders: true,
colHeaders: true,
colHeaders: [
'Tariff',
'Warehouse',
'Town'
],
manualRowMove: true,
manualColumnMove: true,
contextMenu: true,
filters: true,
dropdownMenu: true,
);
</script>
</body>
</html>
如果我在 Web 界面上插入行,我们如何获取数据?
【问题讨论】:
【参考方案1】:我使用了这个逻辑及其工作。这里我们从spring中获取数据并在js中解析这些数据,然后我们可以将这些数据插入到表中
let dataFromSpring = [[$tariffs]];
let dataObj = [];
for(let obj of dataFromSpring)
let object =
warehouse: obj["tariff"],
fmWarehouse: obj["warehouse"],
town: obj["town"],
;
dataObj.push(object);
【讨论】:
以上是关于如何在 Spring 中将数据插入到可操作的脚本中的主要内容,如果未能解决你的问题,请参考以下文章