Javascript 检查jQuery数据表中的预选行
我在下面有一个jQuery数据表:Javascript 检查jQuery数据表中的预选行,javascript,jquery,html,datatables,kohana-3,Javascript,Jquery,Html,Datatables,Kohana 3,我在下面有一个jQuery数据表: examinees_table = $('#examinees_table').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers", "aoColumns": [ /*select*/ null, /*id*/ {"bVisible": false},
examinees_table = $('#examinees_table').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
/*select*/ null,
/*id*/ {"bVisible": false},
/*name*/ null,
/*course*/ null
]
});
这是我的HTML:
<table id="examinees_table">
<thead>
<tr>
<th>Select</th>
<th>ID</th>
<th>Full Name</th>
<th>Degree</th>
</tr>
</thead>
<tbody>
<?php foreach($users as $user) {?>
<tr>
<?php foreach ($examinees as $examinee) {?>
<?php if($examinee->examinee_id == $user->id) {?>
<td class="center"><?= Form::checkbox('is_examinee-'.$user->id, null, (bool) true, array('id' => $user->id)); ?></td>
<?php } else {?>
<td class="center"><?= Form::checkbox('is_examinee-'.$user->id, null, (bool) false, array('id' => $user->id)); ?></td>
<?php } ?>
<td class="center"><?= $user->id; ?></td>
<td class="center"><?= $user->first_name.' '.$user->last_name; ?></td>
<td class="center"><?= $user->courses->description; ?></td>
<?php }?>
</tr>
<?php }?>
</tbody>
</table>
我想做的是:
我需要从users表中加载所有注册用户,并检查datatable中ID位于考生表中的每个用户
我正在更新考生列表,因此用户可以取消选中现有考生并添加更多考生。在提交表单之前,我可以获得选中的行,但我无法确定哪些现有的考生未选中,因此我可以删除考生表中的ID
这方面的最佳方法是什么?我不认为我在HTML中所做的是最好的解决方案 有两种方法: 在添加POST数据附带的考生id之前,请清除数据库中的每个考生id。 内爆POST id数组,删除不在id1、id2中的数组。。。并添加新的考生。 注:为避免重复代码,将考生==用户条件移动到选中属性
<?= Form::checkbox('is_examinee-'.$user->id, null, ($examinee->examinee_id == $user->id), array('id' => $user->id)); ?>
PPS。受试者foreach看起来很奇怪,也许你应该做一个子选择。我找到了一种获得所需输出的方法,在我的数据表中,我使用fnCreatedRow函数检查每个创建的行是否在现有受试者数组中:
examinees_table = $('#examinees_table').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
/*select*/ null,
/*id*/ {"bVisible": false},
/*name*/ null,
/*course*/ null
],
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
var eID = $('#existing_examinees').val();
if(eID === undefined) {
return;
}
var eIDArray = eID.split('/');
var deletedID = $('#removed_examinees').val();
var deletedIDArray = deletedID.split('/');
if(eIDArray.length > 0) {
$.each(eIDArray, function(index, value) {
var id = $("input:checkbox", nRow).attr('id');
// alert('index: ' + index + ' ' + 'value: ' + value + ' ' + 'id: ' + id);
if(id == value) {
$("input:checkbox", nRow).prop('checked', true);
}
});
}
$("input:checkbox", nRow).click(function() {
var selected_id = $("input:checkbox", nRow).attr('id');
var checked = $("input:checkbox", nRow).prop('checked');
if(checked == false) {
var deleted_index = $.inArray(selected_id, eIDArray);
var inDeletedArr = $.inArray(eIDArray[deleted_index], deletedIDArray);
if(inDeletedArr < 0) {
if(deleted_index > -1) {
var removed = $('#removed_examinees').val();
if(removed == '') {
removed = eIDArray[deleted_index];
} else {
removed = removed + '/' + eIDArray[deleted_index];
}
$('#removed_examinees').val(removed);
}
}
}
});
}
});
我还添加了一个onClick侦听器来添加未选中的现有考生,这些考生将在提交表单时提交到服务器。非常感谢@Michal的编辑!