Question

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

columnDefs[9].visible = false;

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

Answer 1

刚开始使用angular-ui-grid，所以这可能不是最佳解决方案。

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

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

Answer 2

如果有人在寻找一个不需要你创建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 ===＆＃39; _id＆＃39;部分与你自己的条件。也不要忘记返回列，否则根本不会有任何列。

Answer 3

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

在此示例中，有四列与四个其他列交换，这些列由切换按钮确定。显示销售列时 $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();

我希望这对某人有帮助。

更改角度ui网格列可见性

3 个答案: