Angular Js 数据表：在响应式插件中，ng-click 在缩放（折叠）模式下不起作用

Question

我的 angular js 数据 table 有问题。此代码工作正常，但在折叠期间添加响应插件后，我的按钮不起作用，这意味着 ng-click 不起作用。

这是我的代码：

这是HTMLtable代码：

<table datatable="ng" dt-options="table.dtOpt_tresh" dt-column-defs="table.dtColDefs_tresh" class="row-border hover table-responsive display nowrap" width="100%" cellspacing="0">
<thead>
    <tr>
        <th class="thbg"></th>
        <th class="thbg">{{'crm.CRMSR'|translate}}</th>
        <th class="thbg wd-wide">{{'crm.CRMNAME'|translate}}</th>
        <th class="thbg">{{'crm.CRMTYPE'|translate}}</th>
        <th class="thbg">{{'crm.CRMCONTACT'|translate}}</th>
        <th class="thbg">{{'crm.CRMSALES'|translate}}</th>
        <th class="thbg">{{'crm.CRMPURCHASE'|translate}}</th>
        <th class="thbg">{{'crm.CRMACTION'|translate}}</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th class="thbg"></th>
        <th class="thbg">{{'crm.CRMSR'|translate}}</th>
        <th class="thbg wd-wide">{{'crm.CRMNAME'|translate}}</th>
        <th class="thbg">{{'crm.CRMTYPE'|translate}}</th>
        <th class="thbg">{{'crm.CRMCONTACT'|translate}}</th>
        <th class="thbg">{{'crm.CRMSALES'|translate}}</th>
        <th class="thbg">{{'crm.CRMPURCHASE'|translate}}</th>
        <th class="thbg">{{'crm.CRMACTION'|translate}}</th>
    </tr>
</tfoot>
<tbody>
    <tr ng-repeat="list in table.trace_data">
        <td></td>
        <td>{{$index + 1}}</td>
        <td>{{ list.prefix + ' ' + list.firstname + ' ' + list.lastname}}</td>
        <td class="min-wd-120">{{ list.type}}</td>
        <td class="min-wd-150">{{ list.contact}}</td>
        <td>{{ list.sales}}</td>
        <td>{{ list.purchase}}</td>
        <td>
            <button class="btn btn-labeled btn-info btn-xs" type="button" ng-click="table.Restore(list.id);"  uib-tooltip="{{'crm.TOOLTIPMSG.RESTOREMSG'|translate}}" uib-tooltip-trigger="focus" uib-tooltip-placement="top">
                <span class="btn-label"><i class="fa fa-exclamation"></i>
                </span>{{'product.RESTORE'|translate}}</button>
        </td>

    </tr>

</tbody>

这是我的 controller.js 代码：

vm.dtOpt_tresh = DTOptionsBuilder.newOptions()
                .withOption('responsive', true) 
        vm.dtOpt_tresh.withPaginationType('full_numbers');
        vm.dtOpt_tresh.withColumnFilter({
            aoColumns: [{
                    type: 'null'
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'select',
                    bRegex: false,
                    values: vm.dtColumnTypes
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }]
        });



        vm.dtColDefs_tresh = [
            DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5),
            DTColumnDefBuilder.newColumnDef(6).notSortable()
        ];

这是恢复按钮功能

 vm.Restore = function (id) {
            SweetAlert.swal({
                title: 'Are you sure?',
                text: 'Your Data Will be Restore in to Your Main CRM Data!',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#27c24c',
                confirmButtonText: 'Yes, Restore it!',
                cancelButtonColor: '#f05050',
                cancelButtonText: 'No, cancel pls!',
                closeOnConfirm: false,
                closeOnCancel: false
            }, function (isConfirm) {
                if (isConfirm) {
                    SweetAlert.swal('Restored!', 'Your Data has been Restored.', 'success');
                    $scope.table.tracebacktoCrmEntry(id);
                } else {
                    SweetAlert.swal('Cancelled', 'Your Data is Not Restored Now :)', 'error');
                }
            });
        }

这是输出：

在此图中，我的恢复按钮不起作用：我无法在折叠模式下在此按钮中执行我的点击事件。

Answer 1

Swal 更新了他们的图书馆。不再支持函数 (isConfirm)。阅读文档

https://sweetalert.js.org/guides/

swal("Click on either the button or outside the modal.") .then((值) => { swal(The returned value is: ${value}); });

Answer 2

我使用 .withClass('all') 为那个 Restore 按钮列创建了一个解决方案，这样该列就不会进入折叠模式，而另一列将进入折叠模式，所以现在可以轻松点击该按钮了！

 vm.dtColDefs_tresh = [
            DTColumnDefBuilder.newColumnDef(0).withClass('all'), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5),
            DTColumnDefBuilder.newColumnDef(6), DTColumnDefBuilder.newColumnDef(7).notSortable().withClass('all')
        ];

此 .withClass('all') 是由 datatables 插件默认提供的 class。

Answer 3

.withOption('responsive', {
            details: {
                renderer: function (api, rowIdx, columns) {
                    var data = $.map(columns, function (col, i) {
                        return col.hidden ?
                            '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                            '<td>' + col.title + ':' + '</td> ' +
                            '<td>' + col.data + '</td>' +
                            '</tr>' :
                            '';
                    }).join('');

                    var res = data ? $('<table/>').append(data) : false;
                    if (res)
                        $compile(angular.element(res).contents())($scope);
                    return res;
                },
                type: 'column',
                target: 0
            }
        })

Angular Js 数据表：在响应式插件中，ng-click 在缩放（折叠）模式下不起作用

Angular Js Datatable : In Responsive Plugin ng-click not working during scalling (collapse) mode

html

jquery

datatables

angularjs

angular-datatables