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：

<强> documentation

注意：我没有在演示中使用vm方法，所以不要混淆，请在您自己的代码中参考vm.permissions.asset_EDIT。从来没有真正理解vm背后的概念，除了它是惰性程序员意外地为他们的代码添加新的复杂层的一种方式：）

Answer 2

根据say vm.showExportOption的值，您可以向父table元素添加一个类。然后使用一点CSS逻辑，您可以根据其父类是否存在某个类来隐藏确切的按钮。

这是一个粗略的想法：

表格元素：

ng-class="vm.showExportOption ? 'show-export' : 'hide-export'"

然后在CSS中使用：

table.show-export .fa-exchange{
  display:block;
}

table.hide-export .fa-exchange{
  display:none;
}

请记住，这不是复制粘贴，而是为了让您了解如何执行此操作。如果您可以创建一个JSFiddle来显示您的问题，我很乐意将其移植，但是这应该可以帮到您。

Answer 3

我会尝试添加一个<activity android:name=".currentLocation">标记元素标记，在您的情况下是导出按钮，可以在代码中设置支持 Boolean 变量：

ng-show

然后在您的视图模型中，使用正确的逻辑设置此值：

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

这应该可以解决你的问题。

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

3 个答案: