我正在使用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>;
})
如您所见,有许多基于用户权限的条件块。因为用户可能具有不同的权限,并且我没有显示某些基于他/他的权限的操作链接。
当我注释此列的代码时,一切正常,仅当返回此代码时,渲染时间太长。