Soy nuevo en angularjs. Estoy implementando una tabla de datos angularjs con algunos datos json. Me enfrento a un problema que cada vez que un usuario tiene permiso (que está almacenado en json) puede exportar csv, pero cuando el usuario no tiene permiso, el botón de exportación de la tabla de datos está oculto o no se muestra. Busqué en Google algunos artículos pero no puedo encontrar la respuesta.

Usé el siguiente código para implementar botones de tabla de datos:

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

Aquí está mi contenido html: -

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

Gracias por tu precioso tiempo.

1
Pushplata Yadav 30 oct. 2017 a las 20:45

3 respuestas

La mejor respuesta

Debe administrar dos conjuntos de botones, uno para usuarios con permisos y otro para usuarios sin ellos. Podría verse así:

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

Simplemente transfiera los parámetros de su .withButtons a variables. Luego puede crear los botones relevantes para el usuario por un ternario en la inicialización misma:

.withButtons( permissions.asset_EDIT ? buttonsWithPermission : buttonsNoPermission)

Aquí hay una pequeña demostración, intente cambiar permissions.asset_EDIT:

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

Nota : no estoy utilizando el enfoque vm en la demostración, así que no se confunda, consulte vm.permissions.asset_EDIT en su propio código. Nunca he entendido realmente el concepto detrás de vm, además es una forma para que los programadores perezosos agreguen accidentalmente una nueva capa de complejidad a su código :)

1
davidkonrad 2 nov. 2017 a las 12:33

Intentaría agregar una etiqueta de elemento de etiqueta ng-show, en su caso el botón de exportación, con una variable Boolean de respaldo que puede establecer en su código:

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

Luego, en su modelo de vista, configure este valor con la lógica adecuada:

 vm.dtIsHidden = whatever;

Y esto debería resolver tu problema.

-2
nocarrier 30 oct. 2017 a las 19:49

Según el valor de say vm.showExportOption, puede agregar una clase al elemento padre table. Luego, con un poco de CSS Logic, puede ocultar el botón exacto apuntando a su clase en función de si cierta clase está presente o no en su padre.

Aquí está la idea aproximada:

En el elemento de tabla:

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

Luego en CSS algo como:

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

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

Recuerde que esto no es para copiar y pegar, sino para darle una idea de cómo hacerlo. Si puede crear un JSFiddle para mostrar su problema, con mucho gusto lo portaré, pero esto debería ayudarlo.

-1
Shaunak 30 oct. 2017 a las 18:55