时间戳

首页 > 解决方案 > AngularJS angular-datatables 按钮中的自定义属性

javascript - AngularJS angular-datatables 按钮中的自定义属性

问题描述

我在 npm 中使用以下内容： 

"dependencies": {
    "angular": "1.6.4",
    "datatables.net": "1.10.19",
    "datatables.net-buttons": "1.5.3",
    "datatables.net-buttons-dt": "1.5.3",
    "angular-datatables": "0.6.2",
    // and more that is not question related
}

当我现在创建一个像示例中的 angular-datatables 一样的 DataTable 时，一切都运行良好。
例如： 

vm.dtOptions = DTOptionsBuilder
    .newOptions()
    // data fetch and processing animation and ...
    .withButtons([
        'colvis',
        'copy',
        'print',
        'excel',
        'pdf',
        {
            text: 'Some button',
            key: '1',
            action: function (e, dt, node, config) {
                alert('Button activated');
            },
            className: 'someCustomCssClass',
        },
    ])
    .withBootstrap();
vm.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID').withClass('text-danger'),
    DTColumnBuilder.newColumn('firstName').withTitle('First name'),
    DTColumnBuilder.newColumn('lastName').withTitle('Last name')
];

现在我想修改自定义按钮“一些按钮”。
我希望按钮具有自定义 HTML 属性。

当前的 Button 呈现如下： 

<button class="dt-button someCustomCssClass ng-scope" tabindex="0" aria-controls="DataTables_Table_0" type="button">
    <span>Some button</span>
</button>

但是按钮应该有一个“访问”属性，以便根据用户角色隐藏/显示按钮。
所以它应该是例如： 

<button access="ROLE_ADMIN" class="dt-button someCustomCssClass ng-scope" tabindex="0" aria-controls="DataTables_Table_0" type="button">
    <span>Some button</span>
</button>

但是如何向按钮添加新属性？
使用“className”添加自定义 CSS 类很容易，但是一个全新的属性？

感谢您的帮助和
问候

更新

目前我正在附加一个完全自定义的按钮，如下所示： 

var myEl = angular.element( document.querySelector( '.dataTables_wrapper > .dt-buttons' ) );
myEl.append('<button with all my needs></button>');
$compile(myEl.contents())(scope);

这是可行的，但现在我无法使用 DataTable 信息并且集成本身很差。
这也是一种解决方法，根本没有好的解决方案！
我真的希望init提到的@davidkonrad 可以解决这个问题。

标签： javascriptangularjsangular-datatables

解决方案

使用init您想要使用自定义属性丰富的按钮的回调：

.withButtons([
    'colvis',
    'copy',
    'print',
    'excel',
    'pdf',
    {
        text: 'Some button',
        key: '1',
        action: function (e, dt, node, config) {
            alert('Button activated');
        },
        className: 'someCustomCssClass',
        //-----------------------------------
        init: function(dt, node, config) {
            node.attr('access', "ROLE_ADMIN")
        }
    },
])

推荐阅读