заполнить таблицу на основе опции, выбранной из выпадающего - PullRequest
0 голосов
/ 03 марта 2019

Как получить значение параметра Selected и использовать его в том же html для извлечения данных из базы данных, используя тимилиф и подпружинную загрузку.

Вот мой код ..

<form class="form-horizontal" action="#" method="post" data-th-action="@{/raw-stock-entry.html}" th:object="${itemReturn}">
<div class="box-body">
    <div class="form-group col-md-6">
        <label for="itemId" class="col-sm-5 control-label">Item Name <span style="color:red">*</span> </label>
        <div class="col-sm-6">
            <select class="form-control" th:field="*{itemId}" onchange="fetchData()">
                <option th:value="0">Select One</option>
                <option th:each="readyItem : ${readyItemsOnly}" 
                        th:text="${readyItem.itemName}" th:value="${readyItem.itemId}">
                </option>
            </select>
        </div>
    </div>
    <table id="Table" width="100%" >
        <thead>
           <tr>
               <th>SL#</th>
               <th>Item Name</th>
           </tr>
        </thead>
        <tbody>
           <tr th:each="itemList, itrItem : ${itemDetails}" th:if="${itemList.itemId} == 2">
                <td th:text="${itrItem.index+1}">Index </td>
                <td th:id="item" th:text="${itemList.itemName}" th:value="${itemList.itemName}"> </td>
                <td th:id="remainingQuantity" th:text="${itemList.remainingQuantity}" th:value="${itemList.remainingQuantity}"></td> 
           </tr>
        </tbody>
    </table>
</div>

здесь, в моей Таблице, я получаю информацию об элементах из своей базы данных, и если я назначил значение itemId, то будут отображаться только данные об элементе.Это очень хорошо.

Но на самом деле я хочу показать детали товара, которые выбраны в раскрывающемся списке сверху.Я могу получить значение выбранной опции, используя js, но как я буду использовать это значение в поле «th: if», чтобы я мог показать только детали этого элемента.Есть ли лучшее решение этого вопроса без использования js или js + тимелист микс.

1 Ответ

0 голосов
/ 03 марта 2019

Вы можете добиться этого, используя фрагмент тимелина и ajax.

в своем HTML добавьте следующие коды.

$('.drop-down').on('change', function() {
		var name = $('.drop-down option:selected').val();
		
            $.ajax({
	        	type: 'get',
	        	 url: /*[[ @{'/url'} ]]*/,
				  data:  {name:name},
				  success: function(returnedData){
					  console.log(returnedData); 					
					    $('.details').html(returnedData);
					 		  
					},    
					
					error: function(xhr, exception) {
						console.log(xhr);
		                  alert("error");
		                }
	        });
    
	});
<select class="form-control drop-down" th:field="*{itemId}" >
      .....
            </select>
<div class="details">
<div th:fragment="details">
<table>
......
......
<table>
<div>
<div>

и в вашем контроллере напишите код, подобный приведенному ниже.

@GetMapping("/url")
public ModelAndView getDetails(@RequestParam("name")String name){
   ModelAndView mv = new ModelAndView("htmlpagename::details");
   List<Item> itemDetails= repository.findByName(name);// your query result 
    mv.addObject("itemDetails",itemDetails);
     return mv;

}

Надеюсь, это работает для вас.

...