移动后重置 angularjs ui-grid 中的列顺序

Question

我有一个使用 ui-grid-move-columns 指令的 ui-grid。使用此指令，我可以拖放 ui-grid 列来更改它们的顺序。我希望能够将列顺序重置回原始状态。

如果没有 ui-grid-move-columns 指令，您可以重新排序 options.columnDefs 以更改列顺序。在这种情况下，更改 options.columnDefs 的顺序似乎没有立竿见影的效果。我发现我可以清除 columnDefs，然后重新填充，但这导致了其他问题，而且看起来有点老套（例如参见 plunker http://plnkr.co/edit/JUqzefRKJgoF0VQXrffa?p=preview）：

$scope.reset = function(){
  var columnDefs = $scope.gridOptions.columnDefs;
  var columnDefsBak = columnDefs.slice();
  columnDefs.length = 0;
  $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN );
  columnDefs.push.apply(columnDefs, columnDefsBak)
  $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN );
}

我也尝试使用 ui.grid.moveColumns.moveColumn(originalPosition, finalPosition) API (http://ui-grid.info/docs/#/api/ui.grid.moveColumns.api:PublicApi)，并重新排序所有内容，但对于宽 table（大约20 列，需要移动其中的 19 列）在 FF 和 IE 中的性能很糟糕。

实现此目标的最佳方法是什么？

Answer 1

这可以通过修改 grid.moveColumns.orderCache 数组来完成。这不是记录在案的 public API，因此应谨慎使用此解决方案。

$scope.gridOptions = {
    onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
      gridApi.core.on.rowsRendered($scope,function(){
        if(!$scope.initialColumnOrder)
          $scope.initialColumnOrder = $scope.gridApi.grid.columns.slice();
      });
    }
  };

$scope.reset = function(){
  if($scope.initialColumnOrder) {
    var columnDefsColMov = $scope.gridApi.grid.moveColumns.orderCache;
    columnDefsColMov.length = 0;
    columnDefsColMov.push.apply(columnDefsColMov, $scope.initialColumnOrder)
    $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
  }
}

完整示例请参见此处 - http://plnkr.co/edit/x0ogsvQhj6kpLVqcxPhF?p=preview

移动后重置 angularjs ui-grid 中的列顺序

Reset column order in angularjs ui-grid after moving

angularjs

angular-ui-grid

ui-grid