2017-01-11 18 views
0

私はui-grid-move-columns指示文を使用してuiグリッドを作成しています。この指示文では、uiグリッドの列をドラッグして順序を変更することができます。列の順序を元の状態に戻すことができるようにしたいと思います。移動後のanglejs ui-gridの列の順序をリセットします。

ui-grid-move-columnsディレクティブを指定しないと、options.columnDefsの順序を変更して列の順序を変更できます。この場合、options.columnDefsの順序を変更するとすぐには効果がないようです。私は(たとえばhttp://plnkr.co/edit/JUqzefRKJgoF0VQXrffa?p=previewためplunkerを参照してください)私はcolumnDefsをクリアすることを見出し、その後、再投入するが、これは他の問題を引き起こし、また少しハックようだ:

$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

関連する問題