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

Posted 2023-05-09

【中文标题】Angular Js Datatable：在响应式插件中，ng-click 在缩放（折叠）模式下不起作用

【英文标题】：Angular Js Datatable : In Responsive Plugin ng-click not working during scalling (collapse) mode

【发布时间】：2018-03-09 23:54:16

【问题描述】：

我的 Angular js 数据表有问题。此代码正常工作，但在折叠期间添加响应式插件后，我的按钮不起作用，这意味着 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"  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');
                
            );
        

这是输出：

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

【问题讨论】：

restore 函数的代码在哪里？

这个恢复按钮工作得很好，但是在响应式 ng-click 期间我在输出图像中突出显示不工作

好的！你的意思是在小屏幕上点击不起作用？

是的，当时按钮不起作用

你可以尝试设置一个 jsfiddle 吗？帮助提供工作代码示例会更容易

【参考方案1】：

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

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

swal("点击按钮或模态框外。") .then((值) => swal(The returned value is: $value); );

【讨论】：

如果我当时没有使用甜蜜警报并进行简单的按钮单击事件，那么按钮也不起作用！

【参考方案2】：

.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
            
        )

【参考方案3】：

我使用.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 插件提供的默认类。