在 angular ui-grid 中检测列大小调整事件

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>

在 angular ui-grid 中检测列大小调整事件

Detect column resize event in angular ui-grid

javascript

angularjs

angular-ui-grid