代码之家  ›  专栏  ›  技术社区  ›  christopher2007

AngularJS角度数据表按钮中的自定义属性

  •  3
  • christopher2007  · 技术社区  · 7 年前

    我将以下内容用于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数据表一样,一切都很好地工作。
    例如:

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

    这是可行的,但现在我不能使用数据表信息,集成本身非常差。
    而且这是一个解决方案,根本没有好的解决方案!
    我真的希望 init 提到@davidkonrad可以解决这个问题。

    1 回复  |  直到 7 年前
        1
  •  1
  •   davidkonrad    7 年前

    使用 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")
            }
        },
    ])
    
    推荐文章