如何将数据插入 Spring 中的 handsontable 脚本

Question

我在我的项目中使用 Handsontable。我需要从 Spring 中的数据库中将数据插入 table 中。我知道如何用 Thymeleaf 做到这一点：

 <tr th:each="row : ${tariffs}">
        <td th:text="${row.warehouse}"></td>
 </tr>

但是如何从 js 脚本中插入或获取数据？

这是我的代码 table，我想我们可以用循环帮助在 const 数据中添加数据


<!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 界面上插入行，我们如何获取数据？

Answer 1

我使用了这个逻辑及其工作。这里我们从spring中获取数据并在js中解析这些数据，然后我们可以将这些数据插入到table

中

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 中的 handsontable 脚本

How to insert data into a handsontable script in Spring

html

spring

thymeleaf

handsontable