如何在 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 中将数据插入到可操作的脚本中的主要内容,如果未能解决你的问题,请参考以下文章

如何在php中将一个巨大的进程分成多个步骤?

使sym链接到可执行文件

如何在 nuxt 中将 <script> 插入 div

如何在谷歌脚本中将文本作为日期插入单元格? (符合时区转换)

如何在 ipad 中将数据从 xml 插入到 sqlite

如何在php中将动态数组插入数据库?