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

DataTables 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>

Answer 1

您提供的SUBMIT代码段

$(".users-form").serialize()

因此您要序列化所有表单数据并执行提交。

var data = $(".users-form").serialize() + "&checkBoxId=" + checkBoxValue;

这会将复选框值附加到表单数据，使用数据发布您的表单值，如下所示。

var data = $(".users-form").serialize() + "&checkBoxId=" + checkBoxValue;

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

尝试这种实现序列化数据表表单数据的实现。

$（document）.ready（function（）{ var table = $（'＃example1'）。DataTable（{ pageLength：4 }）;

//处理表单提交事件 $（'＃frm-example1'）。on（'submit'，function（e）{ var form = this;

  // Encode a set of form elements from all pages as an array of names and values
  var params = table.$('input,select,textarea').serializeArray();

  // Iterate over all form elements
  $.each(params, 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)
        );
     }
  });

}）； }）;

有关更多信息，请参阅此。

https://www.gyrocode.com/articles/jquery-datatables-how-to-submit-all-pages-form-data/

Answer 2

由于.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());
});

好！但是如果单击行中的复选框，如何管理行数据？谢谢

Answer 3

如果您使用的是.NET，请确保已将复选框的name属性设置为要绑定到的属性。

如何使用DataTables将所选的复选框连续添加或附加到$（form）.serialize（）中？

3 个答案: