Блог

Главная - Вопросы по программированию - Как вставить данные в скрипт handsontable в Spring

Как вставить данные в скрипт handsontable в Spring

#html #spring #thymeleaf #handsontable

#HTML #spring #thymeleaf #handsontable

Вопрос:

Я использую Handsontable в своем проекте. Мне нужно было вставить данные в таблицу из моей базы данных весной. Я знаю, как это сделать с помощью Thymeleaf :

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

Но как я могу вставить или получить данные из скрипта js?

Это мой код с таблицей, я думаю, мы можем добавить данные в const data с помощью cycle help

 
<!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>

И как мы можем получить данные, если я вставляю строки в веб-интерфейс?

Ответ №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);
    }