如何在批量插入时校验DataGrid每行指定列数据并生成对应记录

一、前端交互校验规则 #

• 点击「插入」按钮时，必须满足至少有一个颜色文本框已填写值，否则拦截操作
• 只要当前行任意颜色列存在数据，就自动插入一条新的空行到DataGrid中

二、数据库表映射关系 #

数据库表中的status字段，对应前端DataGrid里的颜色输入框的值

三、批量插入核心逻辑 #

点击插入按钮执行批量操作时，需按以下步骤处理：

1. 遍历DataGrid的每一行数据
2. 对每一行，判断颜色列是否有有效数据（非空/非空白）
3. 若该行颜色列有数据，为该行生成至少3条数据库记录（可根据业务需求补充其他字段的默认值或关联数据）
4. 将所有生成的记录收集后，执行批量插入操作，减少数据库交互次数

四、代码示例 #

前端校验与数据收集（JavaScript） #

// 插入按钮点击事件处理
function handleInsertBtnClick() {
    const gridRows = document.querySelectorAll('.datagrid-row');
    let hasValidColor = false;

    // 校验是否有至少一个颜色框填写了值
    gridRows.forEach(row => {
        const colorInputs = row.querySelectorAll('.color-input');
        colorInputs.forEach(input => {
            if (input.value.trim()) hasValidColor = true;
        });
    });

    if (!hasValidColor) {
        alert('至少需要填写一个颜色值！');
        return;
    }

    // 检查最后一行是否有颜色值，有则插入新空行
    const lastRow = gridRows[gridRows.length - 1];
    const lastRowHasColor = Array.from(lastRow.querySelectorAll('.color-input')).some(input => input.value.trim());
    if (lastRowHasColor) {
        addEmptyGridRow(); // 自定义插入新空行的方法
    }

    // 收集批量插入数据
    const batchData = [];
    gridRows.forEach(row => {
        const colorVal = row.querySelector('.color-input').value.trim();
        if (!colorVal) return;

        // 每行生成3条记录，可根据需求调整数量
        for (let i = 0; i < 3; i++) {
            batchData.push({
                status: colorVal,
                create_time: new Date().toISOString()
                // 其他业务字段按需补充
            });
        }
    });

    // 调用后端批量插入接口
    fetch('/api/batch-save', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(batchData)
    });
}

// 插入新空行的示例方法
function addEmptyGridRow() {
    const gridContainer = document.querySelector('.datagrid-container');
    const newRow = document.createElement('div');
    newRow.className = 'datagrid-row';
    newRow.innerHTML = `
        <input type="text" class="color-input" placeholder="输入颜色">
        <!-- 其他列输入框 -->
    `;
    gridContainer.appendChild(newRow);
}

后端批量插入（Java MyBatis示例） #

// Service层批量插入方法
@Service
public class YourDataService {
    @Autowired
    private YourDataMapper dataMapper;

    public void batchInsertData(List<YourDataEntity> dataList) {
        if (CollectionUtils.isEmpty(dataList)) return;
        dataMapper.batchInsert(dataList);
    }
}

// Mapper接口
@Mapper
public interface YourDataMapper {
    @Insert({
        "<script>",
        "INSERT INTO your_table (status, create_time)",
        "VALUES ",
        "<foreach collection='list' item='item' separator=','>",
        "(#{item.status}, #{item.createTime})",
        "</foreach>",
        "</script>"
    })
    void batchInsert(List<YourDataEntity> dataList);
}

// 实体类
@Data
public class YourDataEntity {
    private String status;
    private LocalDateTime createTime;
    // 其他字段
}

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