javascript - 检测 Angular ui 网格中的列调整大小事件

Question

在 ui-grid 中重新调整列大小后，我需要执行一些操作。我在 ui-grid 中没有找到任何列调整大小事件。请提供一种方法来检测 ui-grid 中的列调整大小事件。

Answer 1

首先检查您的enableColumnResizing是否已启用。

enableColumnResizing: true

那么你可能想使用这样的观察者:

$scope.$watch('gridOptions.$gridScope.isColumnResizing', 
    function (newValue, oldValue) {        
        // do something here        
    });

为此目的创建专用插件并将其作为自定义插件插入到您的网格中是一个好方法。

更新:如果上面的代码片段不起作用:

我刚刚在他们的源代码中发现以下部分:

var publicApi = {
  events: {
    /**
     * @ngdoc event
     * @name columnSizeChanged
     * @eventOf  ui.grid.resizeColumns.api:PublicApi
     * @description raised when column is resized
     * <pre>
     *      gridApi.colResizable.on.columnSizeChanged(scope,function(colDef, deltaChange){})
     * </pre>
     * @param {object} colDef the column that was resized
     * @param {integer} delta of the column size change
     */
    colResizable: {
      columnSizeChanged: function (colDef, deltaChange) {
      }
    }
  }
};
grid.api.registerEventsFromObject(publicApi.events);

因此，在您的网格选项对象中它将是:

$scope.gridOptions = {
   enableColumnResizing: true,
   ...,
   onRegisterApi : function(gridApi) {            
     $scope.gridApi = gridApi; 
     $scope.gridApi.colResizable.on.columnSizeChanged($scope, function(colDef, deltaChange) {
       console.log('resized #############'); 
     });            
   }
};

最后是 html:

<div ui-grid="gridOptions" ...></div>