2017-01-11 3 views
0

ui-grid-move-columns 지시문을 사용하여 ui-grid가 있습니다. 이 지시어를 사용하면 ui-grid 열을 드래그하여 순서를 변경할 수 있습니다. 열 순서를 원래 상태로 다시 설정할 수 있기를 바랍니다.이동 후 angularjs ui-grid의 열 순서 재설정

ui-grid-move-columns 지시문을 사용하지 않으면 options.columnDefs를 재정렬하여 열 순서를 변경할 수 있습니다. 이 경우 options.columnDefs의 순서를 변경하면 즉각적인 효과가없는 것으로 보입니다. 나는 그때 다시 채우기를 columnDefs을 취소 할 수 있음을 발견, 그러나 이것은 다른 문제를 야기하고, 또한 (예를 http://plnkr.co/edit/JUqzefRKJgoF0VQXrffa?p=preview에 대한 plunker 참조) 조금 해키 보인다

$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를 사용하여 시도 .movColumns.moveColumn (originalPosition, finalPosition) API (http://ui-grid.info/docs/#/api/ui.grid.moveColumns.api:PublicApi), 모든 것을 다시 정렬하지만, FF와 IE의 성능은 굉장했습니다. 넓은 테이블 (약 20 열, 19 개 이동 필요)

이것을 달성하는 가장 좋은 방법은 무엇입니까?

답변

1

이 작업은 grid.moveColumns.orderCache 배열을 수정하여 수행 할 수 있습니다. 이것은 문서화 된 공개 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