Question

我想使用复选框值提交DataTables中的所有记录。目前，我的代码如下：

表格代码

<form id="fmApprovedGradeStep" method="post" asp-controller="GradeStep" asp-action="GradeStep">
<div asp-validation-summary="All" class="text-danger"></div>
@Html.AntiForgeryToken();
<div class="card text-center">
    <div class="card-header text-muted">
        <p><b>Approved GradeStep</b></p>
    </div>
    <div class="card-body">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Search</label>
            <div class="col-sm-4 input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text fa fa-search"></span>
                </div>
                <input id="gradeStepApprovedSearch" type="text" class="form-control" placeholder="Search by Paygroup, Grade, Step" />
            </div>
        </div>
        <div class="form-group">
            <div class="table-responsive-sm">
                <table id="gradeStepApprovedTable" class="table table-striped table-bordered table-sm compact">
                    <thead>
                        <tr>
                            <th scope="col" class="text-center">
                                <div class="form-check">
                                    <input id="gradeStepApprovedCheckAll" type="checkbox" class="form-check-input" />
                                    <label class="form-check-label">
                                    </label>
                                </div>
                            </th>
                            <th scope="col" class="text-center"><label>Paygroup</label></th>
                            <th scope="col" class="text-center"><label>Grade</label></th>
                            <th scope="col" class="text-center"><label>Step</label></th>
                            <th scope="col" class="text-center"><label>Remarks</label></th>
                            <th scope="col" class="text-center"><label>Status</label></th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <div class="btn-group-sm">
            @if (true)
            {
                <a id="btnGradeStepAdd" asp-controller="GradeStep" asp-action="GradeStepAddEdit" class="btn btn-outline-success">
                    <span class="fa fa-plus"></span>
                    Add
                </a>
            }
            @if (true)
            {
                <button id="btnGradeStepApproveDelete" type="button" class="btn btn-outline-success" data-loading-text="Deleting..." onclick="Delete('#fmApprovedGradeStep', '#btnGradeStepApproveDelete');">
                    <span class="fa fa-trash"></span>
                    Delete
                </button>
            }
        </div>
    </div>
</div>

Js代码

    $(document).ready(function () {
    function Delete(formId, btnId) {
        if ($(formId).valid()) {
            ClearValidationSummary();
            if (confirm("Do you want to delete GradeStep(s)")) {
                var btn = $(btnId);
                var btnContent = $(btnId).html();
                $.ajax({
                    "method": "post",
                    "data": $(formId).serialize(),
                    "url": "@Url.Action('GradeStep', 'GradeStep', new { operation = 'Delete' })",
                    "beforeSend": function (jqXHR, settings) {
                        ButtonShowLoadingText(btn);
                    }
                }).done(function (data, textStatus, jqXHR) {
                    SuccessAlert("GradeStep(s) deleted successfully.");
                    $("#divGradeStepUnAuthorized").load('@(Url.Action("GradeStepPartialUnauthorized", "GradeStep"))');
                    $("#divGradeStepUnApproved").load('@(Url.Action("GradeStepPartialUnapproved", "GradeStep"))');
                    $("#divGradeStepApproved").load('@(Url.Action("GradeStepPartialApproved", "GradeStep"))');
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    ErrorAlert(jqXHR.responseText);
                }).always(function (jqXHR, textStatus) {
                    ButtonOffLoadingText(btn, btnContent);
                });
            }
        }
    }

var dataTableGradeStepApproved = $("#gradeStepApprovedTable").DataTable({
    "ordering": false,
        "destroy": true,
        "pagingType": "full_numbers",
        //"lengthMenu": jTableFilter,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "GradeStep/GradeStepJson",
            "type": "post",
            "dataType": "json"
        },
        "columns": [
            {
    "data": "checked", "name": "checked", "searchable": false, "render": function (data, type, row) {
                    return '<input type="checkbox" />';
                } },
            {"data": "grade", "name":"grade", "searchable": true },
            {"data": "step", "name":"step", "searchable": true },
            {"data": "remarks", "name":"remarks", "searchable": false },
            {
    "data": "status", "name": "status", "searchable": false, "render": function (data, type, row) {
                    switch (data.toUpperCase()) {
                        case "A":
                            return "Approved";
                        default:
                            return "Undefined";
                    }
                }
            },
            {
    "data": "id", "name": "id", "render": function (data, type, row) {
                    return '@if (true) {<a href="@Url.Action(" GradeStepAddEdit", "GradeStep")/'+ data +'" class="btn btn-outline-success btn-sm"><span class="fa fa-edit"></span>Edit</a> }';
            } }
        ]
    });
$("#gradeStepApprovedSearch").bind("keyup search input paste cut", function () {
    dataTableGradeStepApproved.search($(this).val()).draw();
});
});

我使用下面的代码获取所有表记录，

    var table = $('#gradeStepApprovedTable').DataTable()
    console.log(JSON.stringify(table.rows().data().toArray()));

但是，它返回给我的价值如下，

[
{
    "paygroup": "P1",
    "grade": "G1",
    "step": "S1",
    "remarks": "R1",
    "status": "OK"
},
{
    "paygroup": "P2",
    "grade": "G1",
    "step": "S1",
    "remarks": "R1",
    "status": "OK"
},
{
    "paygroup": "P3",
    "grade": "G1",
    "step": "S1",
    "remarks": "R1",
    "status": "OK"
}

] 结果没有包含复选框的值，您能否与我分享如何返回带复选框值的记录？
非常感谢。

Answer 1

最终，我通过Help获得了解决方案。它附加了一个带有复选框的列值，按行代码排列数据

    // event handler for individual rows
$("#gradeStepApprovedTable").on("click", "td input[type=checkbox]", function () {
    var isChecked = this.checked;
    var dtapi = $("#gradeStepApprovedTable").DataTable();
    // set the data item associated with the row to match the checkbox
    var dtRow = dtapi.rows($(this).closest("tr"));
    console.log(dtRow.data());
    dtRow.data()[0].Checked = isChecked;   
});

将输出如下结果

[{ “paygroup”： “P1”， “等级”： “G1”， “步骤”： “S1”， “备注”： “R1”， “状态”： “OK”}，{ “paygroup” ： “P2”， “品位”： “G1”， “步”： “S1”， “备注”： “R1”， “状态”： “OK”， “检查”：假}，{ “paygroup”：” P3" ， “等级”： “G1”， “步骤”： “S1”， “备注”： “R1”， “状态”： “OK”， “检查”：<强>真}] < / p>

jQuery DataTables获取带复选框值的记录

1 个答案: