使用 Json 数据源在数据表中实现复选框选择

Question

我正在尝试使用我的数据表中的复选框来实现多行选择，但似乎无法让复选框出现。

我逐字阅读这篇文章 http://www.gyrocode.com/articles/jquery-datatables-how-to-add-a-checkbox-column/，这很有帮助，但我不知道从这里开始做什么。

之前我使用一列的 innerHTML 来为每一行保存一个复选框，但现在我需要能够选择多行，我认为最好使用经过验证的东西，就像文章中的示例一样。

反正我之前是这样的：

    $(document).ready(function () {
        var userData = @Html.Raw(Model.EditUserGroupListJson);
        var table = $('#viewUsers').DataTable({
            "data": userData,
            "columns": [
                { "title": "Email" },
                { "title": "Full Name" },
                { "title": "Member" }
            ],

            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                var tblTds = $('>td', nRow);
                $(nRow).attr("id", 'tblRow_' + aData[2]);

                if (aData[3] == '0')
                {
                    tblTds[2].innerHTML = '<td><input type="checkbox" name="enrolstatus" value="' + aData[2] + '" id="' + aData[2] + '" onclick="Member(' + aData[2] + ')" /><label for="' + aData[2] + '"></label></td>';
                }
                else
                {
                    tblTds[2].innerHTML = '<td><input type="checkbox" name="enrolstatus" value="' + aData[2] + '" id="' + aData[2] + '" checked="checked" onclick="Member(' + aData[2] + ')" /><label for="' + aData[2] + '"></label>></td>';
                }
            }
        })
    });

现在：

    $(document).ready(function () {
        var userData = @Html.Raw(Model.EditUserGroupListJson);
        var table = $('#viewUsers').DataTable({
            'data': userData,
            'columnDefs': [{
                'targets': 0,
                'searchable': false,
                'orderable': false,
                'className': 'dt-body-center',
                'render': function (data, type, full, meta){
                    return '<input type="checkbox" name="id[]" value="'+ $('<div/>').text(data).html() + '">';
                }
            }],
            'order': [[1, 'asc']],

            'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
                var tblTds = $('>td', nRow);
                $(nRow).attr("id", 'tblRow_' + aData[3]);
            }
        });

        //handle click on 'select all' control
        $('#example-select-all').on('click', function(){
            //get all rows with search applied
            var rows = table.rows({ 'search': 'applied' }).nodes();
            //check or uncheck boxes for all rows in the table
            $('input[type="checkbox"]', rows).prop('checked', this.checked);
        });

        //handle click on checkbox to set state of 'select all' control
        $('#example tbody').on('change', 'input[type="checkbox"]', function(){
            //if checkbox is not checked
            if(!this.checked){
                var el = $('#example-select-all').get(0);
                // if 'select all' control is checked and has indeterminate property
                if (el && el.checked && ('indeterminate' in el)){
                    //set visual state of 'select all' control as indeterminate
                    el.indeterminate = true;
                }
            }
        });

        //handle form submission event
        $('#frm-example').on('submit', function(e){
            var form = this;

            //iterate over all checkboxes in the table
            table.$('input[type="checkbox"]').each(function(){
                //if checkbox doesnt exist in DOM
                if(!$.contains(document, this)){
                    //if checkbox is checked
                    if(this.checked){
                        //create hidden element
                        $(form).append(
                            $('<input>')
                                .attr('type', 'hidden')
                                .attr('name', this.name)
                                .val(this.value)
                            );
                    }
                }
            });
        });
    });

我的html：

    <table id="viewUsers" class="display table table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th><input name="select_all" value="1" id="example-select-all" type="checkbox"></th>                  
                <th>Email</th>
                <th>Full Name</th>
                <th>Member</th>
            </tr>
        </thead>
    </table>

json：

select new string[] {"", user.Email, user.Forename + ' ' + user.Surname, user.UserID.ToString(), user.CategoryMaps.Where(c => c.CategoryID == id).Count().ToString() };

// if ticked, AddUser, otherwise RemoveUser
function Member(userID) {
    var fullURL = document.URL;
    var url = fullURL.split('EditUserGroup/');
    var categoryID = url[1];
    var postData = { 'userId': userID, 'categoryID': categoryID };
    if ($("#" + userID).is(':checked')) {
        $.post('/Admin/AddCategoryUser/', postData, function (data) {});
    }
    else {
        $.post('/Admin/RemoveCategoryUser/', postData, function (data) {});
    }
};

我还在 JSON 的开头放置了一个空白“”以允许复选框（我认为），我现在很卡住。

任何帮助将不胜感激，谢谢。

最新代码

JS：

$(document).ready(function () { var userData = @Html.Raw(Model.EditUserGroupListJson);

    var table = $('#viewUsers').DataTable({
        'data': userData,
        'columnDefs': [{
            'targets': 0,
            'searchable': false,
            'orderable': false,
            //'className': 'dt-body-center',
            'render': function (data, type, full, meta) {
                return '<input type="checkbox" name="id[]" value="'
                   + $('<div/>').text(data).html() + '">';
            }
        }],
        'order': [1, 'asc'],
        "createdRow": function (row, data, dataIndex) {
            $(row).attr("id", "tblRow_" + data[0]);
        }
    });

    // handle select all click control
    $('#example-select-all').on('click', function () {
        // check/uncheck all checkboxes in the table
        var rows = table.rows({ 'search': 'applied' }).nodes();
        $('input[type="checkbox"]', rows).prop('checked', this.checked);
    });

    // handle click on checkbox to set state of select all control
    $('#example tbody').on('change', 'input[type="checkbox"]', function () {
        // if checkbox is not checked
        if (!this.checked) {
            var el = $('#example-select-all').get(0);
            // if select all control is checked and has 'indeterminate' property
            if (el && el.checked && ('indeterminate' in el)) {
                // set visual state of select all control as interminate
                el.indeterminate = true;
            }
        }
    });

    $('#frm-example').on('submit', function (e) {
        var form = this;

        // iterate over all checkboxes in the table
        table.$('input[type="checkbox"]').each(function () {
            // if checkbox doesn't exist in DOM
            if (!$.contains(document, this)) {
                // if checkbox is checked
                if (this.checked) {
                    // create a hidden element
                    $(form).append(
                        $('<input>')
                            .attr('type', 'hidden')
                            .attr('name', this.name)
                            .val(this.value)
                    );
                }
            }
        });

        //testing only

        // output form data to console
        $('#example-console').text($(form).serialize());
        console.log("Form submission", $(form).serialize());

        // prevent actual form submission
        e.preventDefault();
    });
});

HTML：

用户组成员身份

        <form id="frm-example" @*action="path/to/script"*@ method="post">
        <table id="viewUsers" class="display table table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th><input name="select_all" value="1" id="example-select-all" type="checkbox"></th>
                    <th>Email</th>
                    <th>Full Name</th>
                </tr>
            </thead>
        </table>
        <p>Press <b>Submit</b> to add selected users to user group.</p>
            <p><button>Submit</button></p>

            <pre id="example-console"></pre>
        </form>

Answer 1

您的 JSON 响应很可能不正确。使用您的表结构，它应该是：

var userData = [
   [ "UserId", "Email", "Full Name", "Member" ],
   [ "UserId", "Email", "Full Name", "Member" ]
];

第一个值UserId 将用作复选框的值。

要将 ID 分配给 tr 元素，请改用以下代码：

"createdRow": function(row, data, dataIndex){
   $(row).attr("id", "tblRow_" + data[0]);
}

有关代码和演示，请参阅this jsFiddle。

Answer 2

这里正在工作fiddle

我只更改了 var userData。应该是这样的。需要身份证。

var userData = [
      [
         "1",
         "Tiger Nixon",
         "System Architect",
         "Edinburgh"
      ],
      [
         "2",
         "Garrett Winters",
         "Accountant",
         "Tokyo"
      ],
      [
         "3",
         "Ashton Cox",
         "Junior Technical Author",
         "San Francisco"
      ]
]