宜搭子表单新增或删除数据时动态计算数据条数

本文详细描述了在宜搭平台上通过单选组件的onChange事件,如何动态获取和更新子表单中数据条数的方法,包括添加和删除操作对数据长度的影响。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果如下:

宜搭子表单数据条数动态获取

实现步骤:

1、单选组件绑定onChange动作

2、onChange代码如下

// 获取缺勤人数
export function onChange({value}){
  if(value == '是'){
    this.onAddClick()
    this.onDelClick()
  } else if (value == '否'){
    this.$('缺勤人数的唯一标识').setValue(0)
    this.$('子表单唯一标识').setValue([])
  }
}

3、子表单绑定添加和删除动作

4、添加动作代码

// 子表单新增数据--获取长度
export function onAddClick() {
  this.$('缺勤人数的唯一标识').setValue(this.$('子表单唯一标识').getValue().length);
}

5、删除动作代码

// 子表单删除数据--获取长度
export function onDelClick() {
  this.$('缺勤人数的唯一标识').setValue(this.$('子表单唯一标识').getValue().length);
}

<think>嗯,用户问的是动态表格的数据回显、新增删除,还有使用Thymeleaf的th:object。首先,我得先确定他们可能用的技术栈,应该是Spring Boot和Thymeleaf结合的场景。动态表格通常用在Web应用中,比如后台管理系统,用户需要动态增删表格行,同数据要能回显到前端。 用户可能不太清楚怎么在Thymeleaf里绑定表单对象,特别是动态的部分。需要解释th:object的用法,以及如何结合表单对象来处理动态数据数据回显的话,可能需要用到一个List者集合,然后在前端循环展示,每个字段用th:field绑定。 新增删除功能涉及前端和后端的交互。前端可能用JavaScript动态添加删除行,同要保持字段的name属性正确,比如使用索引,比如items[0].name。删除的话,可能需要提交一个标识,比如行的索引者ID,后端处理后再返回更新后的数据。 用户可能遇到的问题包括表单绑定错误,动态添加的行没有正确绑定后端对象,删除后的数据没有正确刷新页面。需要强调Thymeleaf的索引绑定方式,以及后端处理POST请求如何更新模型属性,确保回显正确。 另外,th:object通常用在表单标签上,指定绑定的对象,然后内部的输入字段使用th:field来绑定具体属性。动态表格中,每个循环的条目可能需要一个单独的th:object,绑定到items[${index}],这样每个输入字段就能正确对应到后端对象的属性。 示例代码可能会有帮助,比如展示一个表单的结构,如何循环遍历items,用Thymeleaf的语法生成动态行。同JavaScript函数怎么添加新行,复制HTML结构,并更新索引,确保name属性正确。 可能还需要提到后端Controller的处理,如何接收提交的数据,处理新增删除的逻辑,然后重新渲染页面,者重定向,确保数据回显正确。 需要分步骤解释,先数据回显,再新增,再删除,每个步骤的关键点和注意事项。可能用户对Thymeleaf的表单绑定不太熟悉,特别是动态部分,所以需要详细说明th:object和th:field的配合使用,以及如何避免常见的索引错误。</think>以下是用Thymeleaf实现动态表格功能的详细说明(基于Spring Boot框架): 1. **数据回显(双向绑定)** ```html <form th:object="${form}" th:action="@{/save}" method="post"> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <!-- 使用th:each循环绑定集合 --> <tr th:each="item,status : *{items}"> <td> <!-- 通过索引绑定对象属性 --> <input type="text" th:field="*{items[__${status.index}__].name}"> </td> <td> <input type="number" th:field="*{items[__${status.index}__].age}"> </td> </tr> </tbody> </table> </form> ``` 2. **新增行实现** ```javascript function addRow() { const tbody = document.querySelector('tbody'); const index = tbody.children.length; // 克隆模板(建议预先定义隐藏模板行) const newRow = ` <tr> <td> <input type="text" name="items[${index}].name"> </td> <td> <input type="number" name="items[${index}].age"> </td> </tr>`; tbody.insertAdjacentHTML('beforeend', newRow); } ``` 3. **删除行实现** ```html <tr th:each="item,status : *{items}"> ... <td> <button type="button" @click="deleteRow(${status.index})">删除</button> </td> </tr> <script> function deleteRow(index) { // 提交删除请求 fetch('/delete?index=' + index, { method: 'POST' }) .then(() => location.reload()); } </script> ``` 4. **th:object核心用法** ```java // 后端表单对象 public class FormData { private List<Item> items = new ArrayList<>(); // getters/setters } // Controller示例 @PostMapping("/save") public String save(@ModelAttribute FormData form) { // 处理表单数据 return "redirect:/form"; } ``` **关键点说明:** 1. 索引绑定:必须使用`__${status.index}__`表达式确保正确的索引计算 2. 命名规范:表单字段名称需保持`items[index].property`格式 3. 删除实现:推荐采用先提交删除请求再刷新的方式保证数据一致性 4. 初始化数据:在Controller中需预先初始化表单对象,避免空指针异常 **常见问题处理:** - 新增索引不连续:建议使用JavaScript动态计算当前行数作为新索引 - 验证失败数据回显:保持表单对象结构一致,Thymeleaf会自动处理回填 - 动态模板处理:可隐藏一个`<template>`行作为新增行的克隆模板 完整实现建议结合AJAX进行局部刷新,可提升用户体验。后端需注意对索引进行有效性校验,防止越界异常。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值