web-dev-qa-db-ja.com

Change angular ui-grid column visibility

グリッドがレンダリングされた後に列を表示/非表示にしたい。新しいui-gridに移動する前に、toggleVisible()を呼び出しましたが、現在は機能していないようです。以下のように列定義の可視性（または他のプロパティ）を変更しようとしました

columnDefs[9].visible = false;

列定義に可視性を設定すると（レンダリングの前に）動作しますが、病棟の後では変更できません。

angular-ui-grid
17
UshaP

古い質問ですが、これは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();
};
16
mmamane

angular-ui-gridしたがって、これは最善の解決策ではない可能性があります。

UiGrid APIオブジェクトを含めてから、refershオブジェクトでgridメソッドを呼び出してみてください。

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

誰かが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'部分を独自の条件に置き換えるだけです。また、列を返すことを忘れないでください。列をまったく取得できません。

8
user3310980

ser331098からの回答は、私が見たときは好まれましたが、registerColumnsProcessorメソッドに関するドキュメントはほとんどありません。列定義なしでの使用に関する彼のコメントへの参照を見つけたので、このメソッドwith column defsを確実に使用できることを明確にしたかったのです。これにより、興味深い柔軟性が得られます。

この例では、トグルボタンによって決定される他の4つの列とスワップする4つの列があります。 _$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();
_

これが誰かに役立つことを願っています。

0
sthames42