Thymeleaf + Spring Boot + HTML + перебрать список в списке

Question

Я очень новичок в этом Spring Boot + Thymeleaf.Извиняюсь, если вопрос повторяется, но я нигде не смог найти ответ.

Вот несколько примеров кода:

public class PersonPOJO {
        private String uniqID;
        private List<AddressPOJO> addresses;
        // And Some other fields and setters and getters 
        private List<String> someList;
}

public class AddressPOJO {
        private String uniqAddId;
        private List<String> someList;
       // And Some other fields and setters and getters 
}

Я опускаю сопоставление URL-адресов и аннотацию конфигурации.Пожалуйста, потерпите меня.

public class ControllerClass {
         public String htmlLoadMethod(Model model) {
              // personsList is List<PersonPOJO>. I'm having them from global.
              model.addAttribute("persons", personsList);
              return "viewName";
         }
}

Теперь перейдем на мою HTML-страницу: скажем, 'viewName'

<form action="#">
    <select required="required">
       <option th:each="person : ${persons}" th:value="${person.uniqID}" th:text="${person.uniqID}"></option>
    </select>
    <select>
        <!-- Load addresses (uniqAddIds) of the specific person I've selected in first select BOX -->
     </select>
   <select required="required">
        <!-- Load list of Strings of the specific addresses I've selected in addresses select BOX -->
   </select>
</form>

Вот еще один улов: иногда я получаю нулевой список адресов в некоторых PersonPOJO.В этом случае выбор адреса BOX должен быть отключен.И некоторый список PersonPOJO должен быть загружен в третий выбор BOX.

Я надеюсь, вы понимаете проблемуПростой код без JS будет оценен больше, но мы можем иметь функции JS, если это вообще необходимо.Заранее спасибо.

Answer 1

Хорошо, есть два способа, о которых я могу думать, но оба потребовали бы немного JS.Самый простой способ - отправить запрос Ajax и получить список адресов.Во-первых, некоторые модификации вашего html, нам нужно добавить несколько идентификаторов, чтобы упростить его.

<form action="#">
    <select id="persons" required="required">
       <option th:each="person : ${persons}" th:value="${person.uniqID}" th:text="${person.uniqID}"></option>
    </select>
    <select id="addresses">
        <!-- Load addresses (uniqAddIds) of the specific person I've selected in first select BOX -->
     </select>
   <select required="required">
        <!-- Load list of Strings of the specific addresses I've selected in addresses select BOX -->
   </select>
</form>

Теперь давайте добавим функцию изменения при выборе лиц .

$('#persons').on('change', function() {
    var value = $(this).val();
    $.ajax({
        url: '/get-address',
        data: {personId: value},
        type: 'GET',
        success: function(address) {
            var addressList = $('$addresses');
            // Clear old data.
            addressList.empty();
            // Iterate through all the fetched addresses and append them.
            $.each(address, function() {
               addressList.append('<option value="'+address.uniqAddId +'"></option>');
            });
        }, error: function() {
            alert("Error loading the addresses.");
        }
    }) 
});

Теперь вам нужно добавить новый метод в вашем контроллере, который будет выглядеть следующим образом.

@RequestMapping(value = "/get-addresses", method = RequestMethod.GET)
@ResponseBody
public List<Addresses> fetchAddresses(@RequestParam("personId") String personId) {
    // Fetch the addresses using the person's id.
    return addresses;    
}

Другим способом было бы добиться использования фрагментов Thymeleaf, но для вашего случая яПоверьте, так будет проще.В любом случае, оба нуждаются в JS.Надеюсь, это поможет.