页面表单提交数据是做判断，提交的数据中wc_id是否与展示的bootstrapTable中的wc_id有相同，如果相同返回一个提示框

Question

页面表单提交数据是做判断，提交的数据中wc_id是否与展示的bootstrapTable中的wc_id有相同，如果相同返回一个提示框

Answer 1

引自免费微信小程序：皆我百晓生

为了解决这个问题，我们可以设计一个JavaScript函数，该函数在表单提交时被调用，用于检查表单数据中的wc_id是否与Bootstrap Table中显示的wc_id相匹配。如果存在匹配，则显示一个警告框。以下是实现这一功能的步骤和代码示例：

步骤 1: 获取表单提交数据

首先，我们需要获取表单提交的数据，这通常通过监听表单的submit事件完成。

步骤 2: 获取Bootstrap Table中的数据

接下来，我们需要从Bootstrap Table中提取所有行的wc_id值。Bootstrap Table通常通过其API提供数据访问方法。

步骤 3: 比较数据

比较表单提交的wc_id与从表格中获取的所有wc_id，检查是否有重复。

步骤 4: 显示警告框

如果有重复，使用alert或更美观的警告库（如SweetAlert）显示警告信息。

完整代码示例

假设你的HTML结构如下：

<form id="myForm">
    <input type="hidden" name="wc_id" value="123">
    <!-- 其他表单字段 -->
    <button type="submit">Submit</button>
</form>

<table data-toggle="table" id="myTable">
    <!-- Bootstrap Table内容 -->
</table>

JavaScript代码：

// 监听表单提交事件
document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止默认提交行为

    var formWcId = document.querySelector('#myForm input[name="wc_id"]').value;
    
    // 从Bootstrap Table获取所有wc_id
    var table = $('#myTable').bootstrapTable('getData');
    var tableWcIds = table.map(function(row) { return row.wc_id; });

    // 检查表单wc_id是否在表格wc_ids中
    if (tableWcIds.includes(formWcId)) {
        alert('Warning: wc_id already exists in the table.');
        // 或者使用SweetAlert或其他库显示更友好的警告
        // 示例：swal("Warning", "wc_id already exists in the table.", "warning");
    } else {
        // 如果没有重复，继续处理表单提交逻辑
        this.submit();
    }
});

注意事项

• 确保Bootstrap Table的初始化代码已经正确执行。
• 使用jQuery选择器$('#myTable')来操作Bootstrap Table，确保jQuery已加载。
• 以上代码示例使用了jQuery和Bootstrap Table插件的API，确保这些库在页面中已正确加载。

这个方案应该能有效地解决你的需求。如果有任何疑问或需要进一步的帮助，请随时询问。