Spring Boot Checkbox阵列无法正常工作

时间:2019-06-21 06:01:27

标签: javascript arrays spring-boot checkbox

我有一系列复选框,所有复选框的名称都与提交给Spring Boot Controller的名称相同。我使用从数据库接收的数据使用Jquery / Ajax构建Bootstrap DataTable,并测试在页面加载时是否应选中此复选框。我通过使用以下代码来做到这一点:

if (data['isChecked'] == "1") {
   return "<input type='checkbox' name='fieldIdList' value='1_' checked>";
} else {
   return "<input type='checkbox' name='fieldIdList' value='1_'>";
}

此代码循环,因此下一个复选框的值将为2_,下一个3_,依此类推,等等。

页面加载后,表格显示10行,并且我的前2个复选框显示为选中状态。这是正确的。

现在,当我提交此表单而未将任何复选框的状态更改为以下我的控制器代码时:

@RequestMapping(value = "/admin/dataTable", method = RequestMethod.POST)
public String postDataTable(@RequestParam("fieldIdList") List<String> fieldIdList){
    return "";
}

我的fieldIdList中有2个条目:

“ 1 _”

“ 2 _”

这是正确的,因为仅选中了我的前2个复选框。但是,当我取消选中任何复选框并再次提交时,都会得到一个有趣的结果。在下面的示例中,我取消选中第二个复选框,然后再次提交表单,我的输入在我的fieldIdList中:

“ 1 _”

“ 1 _”

“ 1 _”

“ 2 _”

通过取消选中第二个复选框并提交,我怀疑我的fieldIdList中只有1个条目为“ 1 _”

同样,在我提交之后,页面将重定向到上一页,因此,当我再次进入该页面时,所有列表都将作为新列表加载,因此它们中将不再存储任何以前的值。

不确定这是Jquery / Ajax问题还是Java问题,还是椅子和笔记本电脑之间的对象问题:)

由于DataTable是分页的,因此我必须在下面添加这段代码,以获取DataTable的所有行。不知道这是否是导致问题的原因。

    // Handle form submission event
    $('#manageFormFields').on('submit', function (e) {
        var dataTable = $('#formFieldsDataTable').DataTable();
        var form = this;

        // Iterate over all checkboxes in the table
        var tableData = dataTable.$('input, select').serializeArray();
        $(form).append(tableData);
        $.each(tableData, function () {
            // If element doesn't exist in DOM
            if (!$.contains(document, form[this.name])) {
                // Create a hidden element
                $(form).append(
                    $('<input>')
                        .attr('type', 'hidden')
                        .attr('name', this.name)
                        .val(this.value)
                );
            }
        });
    });

生成的HTML:

enter image description here

谢谢您的时间。

1 个答案:

答案 0 :(得分:0)

真抱歉,浪费您的时间。 事实证明,我两次向Datatable添加了行列表。因此,存在两个具有相同名称和值的字段。当我取消选中其中一个时,另一个仍然存在,这就是控制器仍然将其拾取的原因。

在HTML输出中我看不到这一点,因为源仅显示了屏幕上可见的内容(前10行)。

因此,当我浏览所有行时,我注意到选中了另一个复选框,然后看到我将行添加了两次。

删除重复项可以解决我的问题。

谢谢!!