javascript - 如何在angular js ui Grid中删除pdf导出中的一些列

Question

我正在使用 Angular JS ui 网格

http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex

我的要求是我想显示例如 5 列，但是当我导出 PDF 时，我不想导出某些列，例如username.

我怎样才能做到这一点？

Answer 1

有一个 gridOption 可以做到这一点：exporterSuppressColumns

我从 UI Grid 文档中编辑了 plunker，以演示在导出的 PDF 中隐藏“性别”列： http ://plnkr.co/edit/89ZVlPZcQbHYzgX5l4yq?p=preview

现在，无论您选择导出“全部”还是导出“可见”，您都不会在输出中看到性别列。

  $scope.gridOptions = {
columnDefs: [
  { field: 'name',visible:true },
  { field: 'gender', cellFilter: 'mapGender', exporterPdfAlign: 'right', visible:true, enableHiding: true },
  { field: 'company', visible: false }
],
exporterSuppressColumns: [ 'gender' ],

文档在这里：http ://ui-grid.info/docs/#/api/ui.grid.exporter.api:GridOptions

Answer 2

出口商抑制出口：真

例子

{
 name: 'Description', enableCellEdit: true,
 cellTemplate: '<div class="ui-grid-cell-contents"><div ng-class="{\'viewr-dirty\' : row.inlineEdit.entity[col.field].isValueChanged }">{{row.entity[col.field]}}</div></div>'
},

有关更多信息，请参见此处http://ui-grid.info/docs/#/api/ui.grid.exporter.api:ColumnDef

Answer 3

现在这里是一个包含按钮的列，需要从导出中排除

{
name: null,
exporterSuppressExport: true,
field: "fake",
cellTemplate: '<div class="tac"><a class="btn btn-red btn-xs ml5" ng-if="!row.inlineEdit.isEditModeOn" ng-click="grid.appScope.vm.deleteRow(row, $event)"><i class="fa fa-trash"><md-tooltip md-direction="left">delete</md-tooltip></i></a></div>',
enableCellEdit: false,
enableFiltering: false,
enableSorting: false,
showSortMenu: false,
enableColumnMenu: false,
width: 50,
},

Answer 4

您也可以将选项添加exporterSuppressExport: true到您的 columnDefs 中的所需列，如下所示：

$scope.gridOptions = {
  columnDefs: [
    { field: 'username', exporterSuppressExport: true },
    { field: 'someOtherField' }
  ],
  // other options ...
};

现在只someOtherField被导出。