检测角度 ui 网格中的列大小调整事件

Detect column resize event in angular ui-grid

本文关键字：调整 事件 ui 网格 检测      更新时间：2023-09-26

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

首先检查要启用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>
相关文章：