angular-ui-grid - 更改角度 ui-grid 的列可见性

Question

我想在渲染网格后显示/隐藏列。在我搬到新的 ui-grid 之前，我打电话给toggleVisible()但现在它似乎不起作用。我试图改变列定义可见性（或任何其他属性），如下所示

columnDefs[9].visible = false;

当我在列定义上设置可见性时（渲染之前）它确实有效，但在病房之后我无法更改它。

Answer 1

老问题，但这在 3.0.0-rc.20 中对我有用。我猜 columnDefs 需要在范围内。

$scope.columnDefs = [ 
    { name: 'one' },
    { name: 'two', visible: false }
];

$scope.grid = {
    data: 'data',
    columnDefs: $scope.columnDefs
};

$scope.grid.onRegisterApi = function(gridApi){
    $scope.gridApi = gridApi;
};    

$scope.showColumnTwo = function() {
    $scope.columnDefs[1].visible = true;
    $scope.gridApi.grid.refresh();
};

Answer 2

刚开始工作，angular-ui-grid所以这可能不是最好的解决方案。

尝试包含 uiGrid api 对象，然后在对象上调用该refersh方法grid

...
$scope.gridOptions.onRegisterApi = function(gridApi){
  $scope.gridApi = gridApi;
};
....
columnDefs[9].visible = false;
$scope.gridApi.grid.refresh();

Answer 3

如果有人正在寻找不需要您创建 columndDef 的解决方案。

 s.gridOptions = {
    data: 'myData',
    onRegisterApi: function(gridApi) {
      gridApi.core.registerColumnsProcessor(hideIdColumn);
      s.gridApi = gridApi;

      function hideIdColumn(columns){
          columns.forEach(function(column){
            if(column.field==='_id'){
              column.visible=false;
            }
          });
          return columns;
      }

    }

只需将 column.field==='_id' 部分替换为您自己的条件即可。也不要忘记返回列，否则您根本不会得到任何列。

Answer 4

当我看到user3310980的答案时，它是首选，但是关于registerColumnsProcessor方法的文档很少。我发现参考了他关于在没有列定义的情况下使用它的评论，所以我想明确表示您当然可以将此方法与列定义一起使用。这提供了一些有趣的灵活性。

在此示例中，有四列与由切换按钮确定的其他四列交换。$ctrl.showDetails是true何时应显示销售列以及false何时应显示付款项。

在列定义中，该onRefresh属性被定义为在网格刷新时调用列的方法，并且该setVisibleColumns方法提供给registerColumnsProcessor(). 当网格刷新时，对于每一列，它将检查colDef属性中的列定义，并为定义它的每一列调用onRefresh方法，并将其this设置为列对象。

/*--------------------------------------------*/
/* showPayments - Make payment items visible. */
/* showDetails  - Make sales items visible.   */
/*--------------------------------------------*/
var showPayments = function() { this.visible = !$ctrl.showDetails; };
var showDetails  = function() { this.visible =  $ctrl.showDetails; };

var columnDefs   =
  [
  { field: 'receiptDate',    displayName: 'Date',      width: 120, type: 'date', cellFilter: "date:'MM/dd/yyyy'", filterCellFiltered: true },
  { field: 'receiptNumber',  displayName: 'Rcpt No',   width:  60, type: 'number' },
  { field: 'receiptFrom',    displayName: 'From',      width: 185, type: 'string' },
  { field: 'paymentMethod',  displayName: 'Method',    width:  60, type: 'string', onRefresh: showPayments },
  { field: 'checkNumber',    displayName: 'No',        width:  60, type: 'string', onRefresh: showPayments },
  { field: 'checkName',      displayName: 'Name',      width: 185, type: 'string', onRefresh: showPayments },
  { field: 'paymentAmount',  displayName: 'Amount',    width:  70, type: 'string', onRefresh: showPayments },
  { field: 'description',    displayName: 'Desc',      width: 100, type: 'string', onRefresh: showDetails },
  { field: 'accountNumber',  displayName: 'Acct No',   width:  80, type: 'string', onRefresh: showDetails },
  { field: 'accountName',    displayName: 'Acct Name', width: 160, type: 'string', onRefresh: showDetails },
  { field: 'salesTotal',     displayName: 'Amount',    width:  70, type: 'string', onRefresh: showDetails }
  ];

/*----------------------------------------------------*/
/* Columns processor method called on grid refresh to */
/* call onRefresh' method for each column if defined. */
/*----------------------------------------------------*/
var setVisibleColumns = function(cols)
  {
  for (var i=0; i < cols.length; i++)
    if (cols[i].colDef.onRefresh)
      cols[i].colDef.onRefresh.call(cols[i]);
  return cols;
  };

/*----------------------------------*/
/* Callback to set grid API in      */
/* scope and add columns processor. */
/*----------------------------------*/
var onRegisterApi = function(api)
  {
  $ctrl.itemList.api = api;
  api.core.registerColumnsProcessor(setVisibleColumns);
  };

/*------------------------------*/
/* Configure receipt item grid. */
/*------------------------------*/
$ctrl.showDetails = false;
$ctrl.itemList    = 
  {
  columnDefs:                columnDefs,
  enableCellEdit:            false,
  enableColumnMenus:         false,
  enableFiltering:           false,
  enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
  enableVerticalScrollbar:   uiGridConstants.scrollbars.WHEN_NEEDED,
  data:                      [],
  onRegisterApi:             onRegisterApi
  };

更改时$ctrl.showDetails，简单的刷新将交换列。

$ctrl.showDetails = !$ctrl.showDetails;
$ctrl.itemList.api.grid.refresh();

我希望这对某人有帮助。