我正在使用 SmartAdmin 1.9.1,它是一个 Angular 5 框架。SA 提供了一个 DataTables 插件,我想用 DataTables 的编辑器对其进行扩展,这样我就可以对行进行软删除。DataTables 是 v1.10.18,编辑器是 v1.8.1。
没有软删除的 DataTables 在我的应用程序中运行良好。我什至可以使用行选择复选框来扩展它。查看 Editor Soft Delete 示例,我抓取了 Delete 块的代码,并将其添加到我的 a5 component.html 中,如下所示:
<sa-datatable
[options]="{
data: sysMsgs,
columns: [
{data: 'checked'},
{data: 'rowid'},
{data: 'senderID'},
{data: 'message'},
{data: 'dateCreated'}
],
buttons: [
'copy', 'csv', 'pdf', 'print',
{
extend: 'selected',
text: 'Delete',
action: function ( e, dt, node, config ) {
var rows = table.rows( {selected: true} ).indexes();
editor
.hide( editor.fields() )
.one( 'close', function () {
setTimeout( function () { // Wait for animation
editor.show( editor.fields() );
}, 500 );
} )
.edit( rows, {
title: 'Delete',
message: rows.length === 1 ?
'Are you sure you wish to delete this row?' :
'Are you sure you wish to delete these '+rows.length+' rows',
buttons: 'Delete'
} )
.val( 'users.removed_date', (new Date()).toISOString().split('T')[0] );
}
}
],
columnDefs: [
{
targets: 0,
orderable: false,
className: 'select-checkbox'
},
{
targets: [2],
visible: true
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc']],
searching: true,
search: {
smart: false
}
}"
tableClass="table table-striped table-bordered table-hover"
>
<thead>
<tr>
<th data-hide="mobile-p">Select</th>
<th data-hide="mobile-p">ID</th>
<th data-hide="mobile-p">Sender</th>
<th data-hide="mobile-p">Message</th>
<th data-hide="mobile-p">Date Sent</th>
</tr>
</thead>
</sa-datatable>
软删除示例基于使用 jQuery,我想避免使用 jQuery,因为我更愿意保留我的所有代码 Angular 5。
如果不求助于 jQuery,我无法弄清楚如何修改 sa-datatable。您对如何使其工作有任何想法吗?
谢谢,鲍勃