使用 Json 数据源在数据表中实现复选框选择
Implementing checkbox selection in datatables with Json data source
我正在尝试使用数据表中的复选框实现多行选择，但似乎无法显示复选框。
我逐字逐句地关注了这篇文章 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)
);
}
}
});
});
});
我的网页：
<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>
杰森：
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>
这是工作小提琴
我只更改了变量用户数据。应该是这样的。身份证是必需的。
var userData = [
[
"1",
"Tiger Nixon",
"System Architect",
"Edinburgh"
],
[
"2",
"Garrett Winters",
"Accountant",
"Tokyo"
],
[
"3",
"Ashton Cox",
"Junior Technical Author",
"San Francisco"
]
]
Mos 可能是您的 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]);
}
请参阅此 jsFiddle 以获取代码和演示。
相关文章：
- 如何在angularJS中编辑时，如果DB中的值为true，则设置复选框，如果值为false，则取消选中复选框
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 如何在单击复选框后调用控制器方法
- 如何实现复选框或面向类别的照片库
- 如何在 emberjs 中使用复选框实现多个过滤器
- 使用 Json 数据源在数据表中实现复选框选择
- 如何为未知数量的复选框实现全选按钮
- 如何在免费的jqGrid 4.13.0中实现单击复选框
- 如何在 jQuery 中的互斥复选框上实现单击事件
- React-如何实现复选框
- javascript实现“;“全选”;复选框在IE中不起作用
- JqGrid复选框字段实现失败
- 如何在php中实现多个复选框
- 如何在knockoutjs中实现复选框依赖关系
- 用javascript在JSP中实现一个全选复选框
- 如何实现渐变效果的CSS复选框
- 3个动态复选框可实现通信
- 在Rails中实现AJAX调用复选框来更新数据库
- 如何实现只有一个复选框被选中的功能到复选框列表
