发现这个问题没有答案,然后只是将此功能添加到站点。所以我分享我所做的,希望它可以帮助别人。我认为可能有一些可用的优化,所以请随时将它们作为评论提供。
我的策略是创建一个 $colleges 数组来存储行键,更新这个数组以匹配选择,并在分页活动期间使用这个数组来选择行。selectionChanged 事件仅包括可见行。所以在这个版本中,我首先从 $colleges 数组中删除所有可见行,然后添加回任何当前可见和选定的行。
var $colleges;
...
$('#collegeSearchContainer').jtable ({
...
fields: {
uid: { key:true, list:false, edit:false, create:false }
...
},
selectionChanged: function () {
var $table = $('#collegeSearchContainer');
// Get all currently selected rows
var $selectedRows = $table.jtable('selectedRows');
// DEL - add all non-visible rows to colnew then swap
var $colnew = [];
for (var i = 0, len = $colleges.length; i < len; i++) {
$row = $table.jtable('getRowByKey', $colleges[i]);
if (!$row)
$colnew.push($colleges[i]);
}
$colleges = $colnew;
// ADD - make sure currently selected rows are selected
if ($selectedRows.length > 0) {
$selectedRows.each(function () {
var record = $(this).data('record');
if ($.inArray(record.uid, $colleges) < 0)
$colleges.push(record.uid);
});
}
// UPDATE selection indicator for colleges
$('#email_schools').html($colleges.length);
},
rowInserted: function (event, data) {
// select those colleges that have been selected in the past
if ($.inArray(data.record.uid, $colleges) >= 0) {
$('#collegeSearchContainer').jtable('selectRows', data.row);
}
},