javascript - Thymeleaf 表达式不起作用动态添加了来自 javascript 的 html
问题描述
我正在将 InvoiceDTO 对象用于 thymeleaf html 以进行表单发布。我正在通过 js 函数动态添加新行。当我使用静态 tr 时，我的百里香列表工作正常。但是，当我在该行中按 js 函数 thymeleaf 表达式添加行时根本不起作用。当我发布它时，我的控制器在medicineDTOList. 我不明白为什么。请帮我。提前致谢。
模型
public class MedicineDTO {
private Long brandId;
private Long stockId;
private double quantity;
private double discount;
private double total;
}
public class InvoiceDTO {
private String customerName;
private String mobileNumber;
private List<MedicineDTO> medicineDTOList;
private double averageDiscount;
private double totalDiscount;
private double grandTotal;
}
.html 文件
<form id="posForm" th:action="@{/pos/payment}" th:object="${invoicedto}" method="post">
<div class="card-body">
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="name">Customer Name</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="name" th:field="*{customerName}" placeholder="Enter Customer Name" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="mobile">Mobile No</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="mobile" th:field="*{mobileNumber}" placeholder="Enter Mobile Number" />
</div>
</div>
<div class="col-sm-4 col-md-2">
<button type="button" class="btn btn-success btn-sm add-row">
Add
</button>
<button type="reset" class="btn btn-primary btn-sm">
Reset
</button>
</div>
<table class="table" id="brand_tbl">
<thead>
<tr>
<th>Brand Name</th>
<th>Expired Date</th>
<th>Stock</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="selectBrand1" class="form-control select2" th:field="*{medicineDTOList[0].brandId}" onchange="changeBrand(this);" style="width: 100%;">
<option value=""> --</option>
<option th:each="brand : ${brands}" th:value="${brand.id}" th:utext="${brand.name}"> </option>
</select>
</td>
<td style="width: 15%;">
<select id="selectDate1" class="form-control select2" onchange="changeDate(this);" style="width: 100%;">
<option value=""> --</option>
</select>
</td>
<td style="width: 10%;">
<input type="number" class="form-control" id="stock1" placeholder="" disabled />
<input type="hidden" id="stockId1" th:field="*{medicineDTOList[0].stockId}" />
</td>
<td style="width: 10%;">
<input type="number" class="form-control" id="quantity1" th:field="*{medicineDTOList[0].quantity}" onchange="changeQuantity(this);" placeholder="" />
</td>
<td style="width: 12%;">
<input type="number" class="form-control" id="price1" placeholder="" disabled />
</td>
<td style="width: 12%;">
<input type="number" class="form-control" id="discount1" onchange="changeDiscount(this);" placeholder="0" />
<input type="hidden" id="discountAmount1" th:field="*{medicineDTOList[0].discount}" />
</td>
<td style="width: 12%;">
<input type="number" class="form-control" id="total1" th:field="*{medicineDTOList[0].total}" placeholder="" readonly />
</td>
<td>
<button type="button" class="btn btn-block btn-danger btn-sm delete-row">
Delete
</button>
</td>
</tr>
<tr>
<td>
<select id="selectBrand2" class="form-control select2" th:field="*{medicineDTOList[1].brandId}" onchange="changeBrand(this);" style="width: 100%;">
<option value=""> --</option>
<option th:each="brand : ${brands}" th:value="${brand.id}" th:utext="${brand.name}"> </option>
</select>
</td>
<td style="width: 15%;">
<select id="selectDate2" class="form-control select2" onchange="changeDate(this);" style="width: 100%;">
<option value=""> --</option>
</select>
</td>
<td style="width: 10%;">
<input type="number" class="form-control" id="stock2" placeholder="" disabled />
<input type="hidden" id="stockId2" th:field="*{medicineDTOList[1].stockId}" />
</td>
<td style="width: 10%;">
<input type="number" class="form-control" id="quantity2" th:field="*{medicineDTOList[1].quantity}" onchange="changeQuantity(this);" placeholder="" />
</td>
<td style="width: 12%;">
<input type="number" class="form-control" id="price2" placeholder="" disabled />
</td>
<td style="width: 12%;">
<input type="number" class="form-control" id="discount2" onchange="changeDiscount(this);" placeholder="0" />
<input type="hidden" id="discountAmount2" th:field="*{medicineDTOList[1].discount}" />
</td>
<td style="width: 12%;">
<input type="number" class="form-control" id="total2" th:field="*{medicineDTOList[1].total}" placeholder="" readonly />
</td>
<td>
<button type="button" class="btn btn-block btn-danger btn-sm delete-row">
Delete
</button>
</td>
</tr>
</tbody>
</table>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="average_discount">
Average Discount
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="average_discount" th:field="*{averageDiscount}" onchange="changeAverageDiscount();" />
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label justify-content-end" for="total_discount">
Total Discount
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="total_discount" th:field="*{totalDiscount}" readonly />
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="vat">
Vat
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="vat" disabled />
</div>
<div class="col-sm-1">
<input type="checkbox" id="vat_checkbox" name="vat_checkbox" />
</div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="tax">
Tax
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="tax" disabled />
</div>
<div class="col-sm-1">
<input type="checkbox" id="tax_checkbox" name="tax_checkbox" />
</div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="total_tax">
Total Tax
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="total_tax" disabled />
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="grand_total">
Grand Total
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="grand_total" th:field="*{grandTotal}" readonly />
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="paid_amount">
Paid Amount
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="paid_amount" onchange="changePaidAmount();" />
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="change">
Change
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="change" disabled />
</div>
<div class="col-sm-1"></div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
javascript代码
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function () {
$(".add-row").click(function () {
var row = $("tbody tr").length + 1;
var index = $("tbody tr").length;
var tr = "<tr id='tr" + row + "'> <td> <select id='selectBrand" + row + "' class='form-control select2' th:field='*{medicineDTOList[" + index + "].brandId}' onchange='changeBrand(this);' style='width: 100%;'> </select> </td> <td style='width:15%'> <select id='selectDate" + row + "' class='form-control select2' onchange='changeDate(this);' style='width: 100%;'> <option value=''> --</option> </select> </td> <td style='width:10%'> <input type='number' class='form-control' id='stock" + row + "' placeholder='' disabled> <input type='hidden' id='stockId1' th:field='*{medicineDTOList[" + index + "].stockId}'> </td> <td style='width:10%'> <input type='number' class='form-control' id='quantity" + row + "' th:field='*{medicineDTOList[" + index + "].quantity}' onchange='changeQuantity(this);' placeholder=''> </td> <td style='width:12%'> <input type='number' class='form-control' id='price" + row + "' placeholder='' disabled> </td> <td style='width:12%'> <input type='number' class='form-control' id='discount" + row + "' onchange='changeDiscount(this);' placeholder='0'> <input type='hidden' id='discountAmount" + row + "' th:field='*{medicineDTOList[" + index + "].discount}'> </td> <td style='width:12%'> <input type='number' class='form-control' id='total" + row + "' th:field='*{medicineDTOList[" + index + "].total}' placeholder='' readonly> </td> <td> <button type='button' class='btn btn-block btn-danger btn-sm delete-row'> Delete </button> </td> </tr>";
$("#brand_tbl").append(tr);
$('.select2').select2();
var brandList = [[${brands}]];
$('#selectBrand' + row).append('<option value=' + 0 + '> --</option>');
for (i = 0; i < brandList.length; i++) {
$('#selectBrand' + row).append('<option value=' + brandList[i].id + '>' + brandList[i].name + '</option>');
// console.log(brandList[i]);
}
});
});
</script>
解决方案
推荐阅读
- json.net - CamelCaseNamingStrategy vs CamelCasePropertyNamesContractResolver
- algorithm - 具有优先图和不同执行时间的 M 机器上的 N 个作业
- python - 在其他列为 NaN 的情况下填写相同数量的字符
- mysql - 为什么我不能对此形成外键？
- regex - 从多行语句中删除数字和特殊字符
- react-native - 如何在 React 本机应用程序中集成 unity3d AR 应用程序
- read-the-docs - Readthedocs 不提供我的文档
- symfony - 一个域nginx的多个项目
- typescript - TypeScript 接口 [键：字符串]
- vis.js - 没有显示带有 vis.js 的字体 Awesome version5 图标。只显示一个方框