如何将onclick捕获的索引值代入Thymeleaf对象列表属性取值

核心逻辑说明 #

Thymeleaf 的th:*属性属于服务端渲染逻辑，仅在后端返回页面前执行，页面加载到浏览器后Thymeleaf逻辑已失效，而openModel是客户端运行的JS函数，因此无法直接将JS获取的索引值代入th:value表达式。

最优实现方案（小数据量场景，无需额外接口） #

步骤1：将服务端列表序列化为前端可用的JS对象 #

利用你已开启的Thymeleaf JS内联能力，把全量itdetails列表转成JS可直接读取的数组：

<script th:inline="javascript">
    // Thymeleaf会自动将后端的itdetails列表转为JS对象数组
    const itdetailsList = /*[[${itdetails}]]*/ [];

    function openModel(i) {
        // 若i是业务主键而非数组索引，改用find匹配：const current = itdetailsList.find(item => item.itdetailsId == i);
        const currentData = itdetailsList[i];
        // 给模态框表单字段赋值
        document.getElementById('formControlLg1').value = currentData.name;
        // 其他字段按相同逻辑赋值即可
        $('#modal-1').show();
    }
</script>

步骤2：修改模态框表单代码 #

移除硬编码的th:value，修正label的for属性和input id匹配：

<div class="form-outline">
    <input type="text" id="formControlLg1" class="form-control form-control-lg" />
    <label class="form-label" for="formControlLg1">Name</label>
</div>

可选方案（大数据/敏感数据场景） #

如果数据量较大或者数据属于敏感信息，可新增后端查询接口，入参为记录ID（你按钮上存储的itdetailsId），点击按钮时通过AJAX请求获取当前记录的详情后再给表单赋值，避免全量数据暴露在前端。

内容的提问来源于stack exchange，提问作者anand