javascript - 带有按钮隐藏和显示的数据表在 angularjs 代码中

Question

我是 AngularJS 的新手。我正在使用一些 json 数据实现 angularjs 数据表。我面临一个问题，每次如果用户有权限(存储在json中)可以导出csv，但当用户没有权限时，数据表导出按钮会隐藏或不显示。我用谷歌搜索了一些文章，但无法找到答案。

我使用下面的代码来实现数据表按钮:

vm.dtOptions = DTOptionsBuilder.fromSource('')
  .withFnServerData(serverData)
  .withOption('createdRow', createdRow)
  .withDataProp('data')
  .withOption('order', [0, 'desc'])
  .withOption('processing', true)
  .withOption('serverSide', true)
  .withOption('headerCallback', function(header) {
    if (!vm.headerCompiled) {
      // Use this headerCompiled field to only compile header once
      vm.headerCompiled = true;
      $compile(angular.element(header).contents())($scope);
    }
  })
  .withPaginationType('full_numbers')

  .withOption('lengthMenu', [
    [10, 50, 100, 200, 500, -1],
    [10, 50, 100, 200, 500, "All"]
  ])
  .withButtons([
    {
      className:'fa fa-upload',
      key: '1',
      action: function (e, dt, node, config) {
        vm.openImportFileDialog();
      }
    },
    {
      action:function () {
        if (!vm.permissions.assets_EDIT) {
          alert('You have no permission to download file.')
        }
      },
      extend: "csv",
      text:' Export(CSV)',
      className:'fa fa-download',
      exportOptions: {
        columns:[0,1,2,3,4,5,6]
      },
      exportData: {decodeEntities:true}
    },
    {
      className:'fa fa-exchange p-left-5',
      text:' Export(HTML)',
      // enabled: false,
      action:function () {
          vm.openNewTab();
      }
    }

  ])
  .withBootstrap();

这是我的 html 内容:-

 <table  datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" dt-instance="vm.dtInstance"
                   class="row-border hover">
            </table>

感谢您宝贵的时间。

Answer 1

您应该管理两组按钮，一组用于具有权限的用户，另一组用于没有权限的用户。它可能看起来像这样:

var buttonsNoPermission = [{ extend: 'colvis' }];
var buttonsWithPermission = [{ extend: 'colvis' }, { extend: 'csvHtml5' }];

只需将参数从 .withButtons 移植到变量即可。然后您可以在初始化本身中通过三元组为用户创建相关按钮:

.withButtons( permissions.asset_EDIT ? buttonsWithPermission : buttonsNoPermission)

这是一个小演示，尝试更改permissions.asset_EDIT:

<强> http://plnkr.co/edit/s6lainDw4eQC9zaoZGdG?p=preview

注意:我在演示中没有使用vm方法，所以不要混淆，请参阅vm.permissions.asset_EDIT你自己的代码。从来没有真正理解 vm 背后的概念，此外它是懒惰的程序员不小心为他们的代码添加新的复杂层的一种方式:)