Question

我的angular js data table出了问题。此代码正常工作但在崩溃期间添加响应式插件后我的按钮不起作用意味着ng-click不起作用这是我的代码

这是HTML表格代码：

<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');
                }
            });
        }

这是输出：

click here

在此图片中，我的恢复按钮无效。（我无法在合并模式下在此按钮中执行我的点击事件）并感谢先进的

Answer 1

一些如何创建一个解决方案，我使用.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插件提供的默认类。

希望这会对某人有所帮助!!

Answer 2

Swal更新了他们的库。不再支持function（isConfirm）。阅读文档

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

swal（＆＃34;点击按钮或模态外部。＆＃34;） .then（（value）=＆gt; { SwaI位（The returned value is: ${value}）; }）;

Angular Js Datatable：在响应插件中 - 在scalling（折叠）模式下单击不起作用

2 个答案: