Question

我试过但没有成功。

当我点击右侧的保存按钮时（请参阅下面的屏幕截图）。我想只选择该行中的所有复选框状态（true / false）并将它们转储到数组中。如果我按下按钮，请点击organizationsTable.row($(this).parents('tr')).data().viewAccess; 我得到的旧值不是复选框的当前状态。

DATATABLE

var organizationsTable = $("#organizations").DataTable({
        "processing": true,
        "filter": true,
        "paging": false,
        "info": true,
        "searching": true,
        "orderMulti": false,
        "aaData": myjson,
        "columnDefs":
        [
            {
                "targets": [0],
                "visible": true,
                "searchable": false,
            },
            {
                "targets": [1],
                "visible": true,
                "searchable": false,
            },
            {
                'targets': 2,
                "orderable": false,
                'className': 'centert-align',
                render: function (data, type, row) {
                    return data;
                }
            },
            {
                'targets': 3,
                "orderable": false,
                'className': 'centert-align',
                render: function (data, type, row) {
                    if (type === 'display') {
                        return '<input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' id="input' + row.id + '" class="filter-ck" />';
                    }
                    return data;
                }
            },
            {
                'targets': 4,
                "orderable": false,
                'className': 'centert-align',
                render: function (data, type, row) {
                    if (type === 'display') {
                        return '<input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' id="input' + row.id + '" class="filter-ck" />';
                    }
                    return data;
                }
            },
            {
                'targets': 5,
                "orderable": false,
                'className': 'centert-align',
                render: function (data, type, row) {
                    if (type === 'display') {
                        return '<input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' id="input' + row.id + '" class="filter-ck" />';
                    }
                    return data;
                }
            },
            {
                'targets': 6,
                "orderable": false,
                'className': 'centert-align',
                render: function (data, type, row) {
                    if (type === 'display') {
                        return '<input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' id="input' + row.id + '" class="filter-ck" />';
                    }
                    return data;
                }
            },
            {
                'targets': 7,
                "orderable": false,
                'className': 'centert-align',
                render: function (data, type, row) {
                    if (type === 'display') {
                        return '<input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' id="input' + row.id + '" class="filter-ck" />';
                    }
                    return data;
                }
            },
            {
                'targets': 8,
                "orderable": false,
                'className': 'centert-align',
                render: function (data, type, row) {
                    if (type === 'display') {
                        return '<input type="checkbox" ' + ((data == 1) ? 'checked' : '') + ' id="input' + row.id + '" class="filter-ck" />';
                    }
                    return data;
                }
            }
        ],
        "columns": [
            { "data": "roleId" },
            { "data": "orgId" },
            { "data": "name" },
            { "data": "viewAccess" },
            { "data": "createAccess" },
            { "data": "editAccess" },
            { "data": "deleteAccess" },
            { "data": "authAccess" },
            { "data": "publishAccess" },
            {
                "orderable": false,
                data: null, render: function (data, type, row) {
                    return '<button type="submit" class="btn green linkorg_save cancel">SAVE</button>'
                }
            }
        ],
        'order': [1, 'asc']
    });

按钮点击

$('#organizations').on('click', 'button.linkorg_save', function (e) {
        e.preventDefault();


        });

这是屏幕拍摄 Grid ScreenShot

更新：在更改事件后输出样式 ERROR after on change

Answer 1

单击复选框可以更新单元格数据。这样你就可以保持表数据的一致性。

$('#organizations').on('change', 'input[type=checkbox]', function (e) {
    var td = $(this).closest('td');
    var value = $(this).is(':checked') ? 1 : 0;
    organizationsTable.cell(td).data(value).draw();
});

Answer 2

要检查复选框的状态，请为每个复选框指定不同的类（例如access-view），并实时检查复选框的状态，如下所示。

$('#organizations').on('click', '.btn', function(){
    // ... skipped ...

    var hasAccessView = $('.access-view', $(this).parents('tr')).is(':checked');
});

有关处理由jQuery DataTables提供支持的表中复选框的替代方法，请使用jQuery DataTables Checkboxes插件。请参阅Multiple columns示例，演示如何使用带有复选框的多个列。

JQuery DataTable在按钮单击时选择单行中的所有checkboes

2 个答案: