[英]Check pre-selected rows in a jQuery Datatable
我在下面有一個jQuery DataTable:
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>
我想做的事:
我需要從“用戶”表中加載所有注冊用戶,並檢查數據表中ID在“檢查表”中的每個用戶。
我正在更新應試者列表,因此用戶可以刪除(取消選中)現有應試者並添加更多應試者。 我可以在提交表單之前獲取已檢查的行,但是我無法確定未檢查哪些現有應試者,因此我可以在“應試者”表中刪除ID。
什么是最好的方法呢? 我不認為我在HTML中所做的事情是最好的解決方案。
有兩種方法:
NOT IN (id1, id2, ...)
數組NOT IN (id1, id2, ...)
然后添加新的考生。 PS。 為了避免重復的代碼,將應試者==用戶條件移動到已檢查的attr。
<?= Form::checkbox('is_examinee-'.$user->id, null, ($examinee->examinee_id == $user->id), array('id' => $user->id)); ?>
PPS。 應試者的foreach似乎很奇怪,也許您應該進行子選擇。
我找到了一種獲取所需輸出的方法,在我的數據表中,我使用了fnCreatedRow函數來檢查每個創建的行是否在EXISTING EXAMINEES數組中:
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偵聽器,以添加未選中的現有應試者,當提交表單時,這些應試者將被提交到服務器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.