清单对象的Thymeleaf显示栏

时间:2019-07-06 09:52:14

标签: java spring spring-boot spring-mvc thymeleaf

我有

<table style="padding-top: 15px; padding-left: 50px; width: 1366px;">
    <tr>
        <thead>
        <th>STT</th>
        <th width="24%">Số tài khoản</th>
        <th width="24%">Tên ngân hàng</th>
        <th width="24%">Chi nhánh</th>
        <th width="24%">Tỉnh/TP của ngân hàng</th>
        </thead>
        <tbody>
        <tr th:each="item, itemStat : ${accountObjectForm.accountObjectBankAccountList}">
            <td><span th:text="${itemStat.index + 1}"></span></td>
            <td><input type="text" th:value="${accountObjectForm.accountObjectBankAccountList[0].bankAccount}" th:name="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" class="k-textbox" style="width: 100%;"></td>
            <td><input type="number" th:name="|accountObjectBankAccountList[${itemStat.index}].bankId|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankId|" class="k-textbox" style="width: 100%"></td>
            <td><input type="text" th:name="|accountObjectBankAccountList[${itemStat.index}].bankBranchName|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankBranchName|" class="k-textbox" style="width: 100%;"></td>
            <td><input type="text" th:name="|accountObjectBankAccountList[${itemStat.index}].province|" th:id="|accountObjectBankAccountList[${itemStat.index}].province|" class="k-textbox" style="width: 100%;"></td>
        </tr>
        <script>
            $(document).ready(function () {
                var dataBank = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/banks_json",
                            dataType: "json"
                        }
                    },
                    pageSize: 30
                });

                $("input[name$='bankId']").each(function() {
                    $(this).kendoDropDownList({
                        optionLabel: "Chọn...",
                        dataTextField: "bankCode",
                        dataValueField: "id",
                        dataSource: dataBank,
                        index: 0,
                        change: onChangeBank
                    })
                });

                var dataProvinceBank = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/provinces",
                            dataType: "json"
                        }
                    },
                    pageSize: 300
                });

                $("input[name$='province']").each(function() {
                    $(this).kendoDropDownList({
                        optionLabel: "Chọn...",
                        dataTextField: "text",
                        dataValueField: "value",
                        filter: "contains",
                        dataSource: dataProvinceBank,
                        index: 0,
                        change: onChangeProvinceBank
                    })
                });
            });
            function onChangeBank() { }
            function onChangeProvinceBank() { }
        </script>
        </tbody>
    </tr>
</table>

结果 enter image description here

(在新标签页中打开图像可查看更大的屏幕截图)

引擎盖下 enter image description here

我尝试

<td><input type="text" th:value="${accountObjectForm.accountObjectBankAccountList[${itemStat.index}].bankAccount}" th:name="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" class="k-textbox" style="width: 100%;"></td>

但是出错,捕获这些代码行时页面无法呈现为html。

我使用0作为持有人。请帮我按列表索引更改数字0

th:value="${accountObjectForm.accountObjectBankAccountList[0].bankAccount}"

2 个答案:

答案 0 :(得分:2)

在表达式中省略内部${...}括号,直接参考itemStat.index。您已经在使用百里香表达式语法,无需重复使用它。

不确定这是否是代码的唯一问题,但一定要先解决

答案 1 :(得分:1)

另一种解决方案

<td><input type="text" th:value="${accountObjectForm.accountObjectBankAccountList[__${itemStat.index}__].bankAccount}" th:name="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" th:id="|accountObjectBankAccountList[${itemStat.index}].bankAccount|" class="k-textbox" style="width: 100%;"></td>