我正在尝试使用数据表中的复选框实现多行选择,但似乎无法显示该复选框。
我逐字逐句地关注了这篇文章 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:
$(文档).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>
最佳答案
这里正在工作 fiddle
我只更改了 var userData。应该是这样的。需要身份证。
var userData = [
[
"1",
"Tiger Nixon",
"System Architect",
"Edinburgh"
],
[
"2",
"Garrett Winters",
"Accountant",
"Tokyo"
],
[
"3",
"Ashton Cox",
"Junior Technical Author",
"San Francisco"
]
]
关于javascript - 使用Json数据源实现数据表中的复选框选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35721679/