渲染大约300个包含angularjs中某些条件的行时,数据表花费的时间太长

时间:2019-06-26 06:05:21

标签: angularjs datatable angular-datatables

我正在使用angular-datatables组件在AngularJs项目中将数据显示为网格。

但是我遇到的一个问题是,当我添加一个包含要删除,更新等链接的 operation 列时,它降低了渲染行的速度,因此仅显示300行,大约8秒。

这是我要显示的该列:

DTColumnBuilder.newColumn('id').withTitle($filter('translate')('GLOBAL.ACTIONS')).notSortable().withOption('width', '5%')
    .renderWith((data, type, full, meta) => {
        let editBtn     = <button ng-click="edit(${full.id})" permission permission-only="'EDIT_PLAN'" ng-if="${full.is_owner && !full.confirmed}" class='btn btn-outline-info'><span class='icon mdi mdi-pencil'></span></button>,
            delBtn      = <button class='btn btn-outline-danger' ng-click='delete(${full.id})' permission permission-only="'DEL_PLAN'" ng-if="${full.is_owner && !full.confirmed}"><span class='icon mdi mdi-delete'></span></button>,
            activeBtn   = <button ng-click="changeStatus(${full.id}, 1)" permission permission-only="'ACTIVE_PRODUCTION_PLAN'" ng-if="${full.is_owner && !full.confirmed && !full.is_active}" class='btn btn-outline-success' uib-tooltip="{{'GLOBAL.DO_ACTIVE' | translate}}"><span class='icon mdi mdi-check'></span></button>,
            deActiveBtn = <button class='btn btn-outline-secondary' ng-click='changeStatus(${full.id}, 0)' permission permission-only="'ACTIVE_PRODUCTION_PLAN'" ng-if="${full.is_owner && !full.confirmed && full.is_active}" uib-tooltip="{{'GLOBAL.DO_INACTIVE' | translate}}"><span class='icon mdi mdi-close'></span></button>;

        return <div class='btn-group'>${delBtn + editBtn + activeBtn + deActiveBtn} </div>;
    })

如您所见,有许多基于用户权限的条件块。因为用户可能具有不同的权限,并且我没有显示某些基于他/他的权限的操作链接。

当我注释此列的代码时,一切正常,仅当返回此代码时,渲染时间太长。

0 个答案:

没有答案