DataTables 编辑器 - 向 SmartAdmin Angular 5 应用程序添加软删除答案

【问题标题】：DataTables Editor - Adding Soft Delete to SmartAdmin Angular 5 AppDataTables 编辑器 - 向 SmartAdmin Angular 5 应用程序添加软删除
【发布时间】：2018-11-30 00:00:00
【问题描述】：

我正在使用 SmartAdmin 1.9.1，它是一个 Angular 5 框架。 SA 提供了一个 DataTables 插件，我想用 DataTables 的编辑器对其进行扩展，这样我就可以对行进行软删除。 DataTables 是 v1.10.18，Editor 是 v1.8.1。

没有软删除的数据表在我的应用程序中运行良好。我什至可以使用行选择复选框来扩展它。查看编辑器Soft Delete example，我抓取了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>

Soft Delete 示例基于使用 jQuery，我希望避免使用 jQuery，因为我希望将所有代码保留为 Angular 5。

如果不使用 jQuery，我无法弄清楚如何修改 sa-datatable。您对如何使其发挥作用有任何想法吗？

谢谢，鲍勃

【问题讨论】：

您是否仍然面临问题或者您有任何解决方案？
我刚刚发布了我的解决方案。

标签： angular5 datatables-1.10 smartadmin

【解决方案1】：

我决定不使用 DataTables Editor，而是通过调用原始 DataTables 代码中的函数来处理软删除。这是我现在使用的：

          <sa-datatable
            [options]="{
              data: collMsgs,
              columns: [
                 {data: 'checked'},
                 {data: 'senderID'},
                 {data: 'message'},
                 {data: 'messageStatus'},
                 {data: 'dateCreated'},
                 {data: 'dateExpires'}
              ],
              buttons: [
                'copy', 'csv', 'pdf', 'print',
                {
                    extend: 'selected',
                    text: 'Delete',
                    action: handleButtons()
                },
                {
                    extend: 'selected',
                    text: 'Archive',
                    action: handleButtons()
                },
                {
                    extend: 'selected',
                    text: 'Read',
                    action: handleButtons()
                }
              ],
              columnDefs: [
                {
                  targets: 0,
                  orderable: false,
                  className: 'select-checkbox'
                },
                {
                  targets: [2],
                  visible: true
                }
              ],
              select: {
                  style: 'multiple',
                  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">Sender</th>
              <th data-hide="mobile-p">Message</th>
              <th data-hide="mobile-p">Status</th>
              <th data-hide="mobile-p">Date Sent</th>
              <th data-hide="mobile-p">Date Expires</th>
            </tr>
            </thead>
          </sa-datatable>

鲍勃

【讨论】：