javascript - 如何使用 DataTables 将选中的复选框连续添加或附加到 $(form).serialize() 中？

Question

我正在使用 jQuery DataTables 我在一个表中实现了多个用户选择。我的问题是如何在提交之前将选中的复选框连续添加或附加到 $(form).serialize() 中？以及如何在行中执行 console.log 选中的数据复选框？

我使用以下库：

https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.7/js/dataTables.checkboxes.js https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.7/css/dataTables .checkboxes.css

数据表 jQuery 配置：

$(document).ready(function() {
                    var usersTable = $("#users-table").DataTable({
                        ajax: {
                            url: GetBaseUrl() + URL_USER_LIST,
                            type: "GET",
                            dataSrc: function(data) {
                                return data;
                            }
                        },
                        responsive: true,
                        lengthMenu: [10, 25, 50, 75, 100],
                        bPaginate: true,
                        bFilter: false,
                        bInfo: false,
                        bLengthChange: false,
                        bAutoWidth: false,
                        columnDefs: [
                            {
                                targets: 0,
                                data: null,
                                defaultContent: "",
                                orderable: false,
                                className: "select-checkbox",
                                checkboxes: {
                                    seletRow: true
                                }
                            },
                            {
                                targets: 1,
                                data: "FullName",
                                orderable: false,
                                render: function(data) {
                                    return data;
                                }
                            },
                            {
                                targets: 2,
                                data: "EmailAddress",
                                orderable: false,
                                render: function(data) {
                                    return data;
                                }
                            }
                        ],
                        select: {
                            style: "multi"
                        },
                        order: [[1, "asc"]]
                    });

                    $(document).on("click",
                        "button",
                        function(e) {
                            e.preventDefault();

                            const result = $('input[type="checkbox"]:checked', usersTable.rows().nodes()).map(
                                function() {
                                    return this.value;
                                }).get();

                            console.log(result);
                        });

                });

HTML：

<div class="form-group">


 <table id="users-table" class="table-hover table-bordered table-striped table-responsive display select" width="100%">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>Name</th>
                                    <th>Email</th>
                                </tr>
                                </thead>
                                <tfoot>
                                </tfoot>
                            </table>
                        </div>

提交：

                $(container).on(eventClick,
                    btnClassSave,
                    function(e) {
                        e.preventDefault();
                        window.common._save(container,
                            GetBaseUrl() + URL_SAVE,
                            $(".users-form").serialize(),
                            "listview",
                            widget._saveSuccess);
                    });

 <button class="btn btn-success save-button">
                        <span class="glyphicon glyphicon-floppy-disk"></span> Save
                    </button>
                    <button class="btn btn-default cancel-button" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span> Cancel
                    </button>

标签： javascriptjqueryhtml

Answer 1

由于 .serialize() 的输出只是一个 url 编码的字符串，您可以像这样附加到序列化；

var data = $(".users-form").serialize()+"&checkbox1=VALUE"+"&checkbox2=VALUE";

试试下面的片段。

$("form").submit(function(e) {
  e.preventDefault();
  
  // store form values to variable data
  var data = $("form").serialize();

  // loop through checked checkboxes
  $(".input-checkbox:checked").each(function() {
  
    // append its value to variable data
    data += "&" + $(this).attr("name") + "=" + $(this).val();
  });

  // show serialized string
  console.log(data);
});

table {
  margin-top: 20px;
  border: 1px solid grey;
  border-collapse: collapse;
}

table tr th {
  border-bottom: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input name="name" />
  <input name="email" />
  <button type="submit">Submit</button>
</form>

<table>
  <thead>
    <tr>
      <th>Checkbox 1</th>
      <th>Checkbox 2</th>
      <th>Checkbox 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input name="checkbox1" type="checkbox" class="input-checkbox" value="test1" /></td>
      <td><input name="checkbox2" type="checkbox" class="input-checkbox" value="test2" /></td>
      <td><input name="checkbox3" type="checkbox" class="input-checkbox" value="test3" /></td>
    </tr>
  </tbody>
</table>

要控制台记录行数据，我认为您可以使用 .parent() 或 .parents("tr");

$("input[type="checkbox"]:checked").each(function(){
    // the first .parent() is to navigate to the TD
    // the second .parent() is to navigate to the TR
    console.log($("this").parent().parent());

    // show the html content of the second column;
    console.log($("this").parent().parent().find("td").eq(1).html());
});

好的！但是如果您单击一行中的复选框，如何控制行数据？谢谢