2016-04-05 95 views
0

我正在使用UI Grid。我有一個plnkr here防止列移動/重新排列

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.moveColumns']); 

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) { 
    $scope.gridOptions = {}; 

    $scope.gridOptions.columnDefs = [ 
    { name:'id', width:50, pinnedLeft:true }, 
    { name:'name', width:100, pinnedLeft:true }, 
    { name:'age', width:100, pinnedLeft:true }, 
    { name:'company', width:100}, 
    { name:'address.street', width:150 }, 
    { name:'address.city', width:150 }, 
    { name:'address.state', width:50 }, 
    { name:'address.zip', width:50 }, 
    { name:'email', width:100 }, 
    { name:'phone', width:200 }, 
    { name:'about', width:300 }, 
    { name:'friends[0].name', displayName:'1st friend', width:150 }, 
    { name:'friends[1].name', displayName:'2nd friend', width:150 }, 
    { name:'friends[2].name', displayName:'3rd friend', width:150 }, 
    ]; 
    $scope.gridOptions.jqueryUIDraggable= false; 

    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
    .success(function(data) { 
     $scope.gridOptions.data = data; 
    }); 
}]); 

,在這裏我要實現以下目標:

  1. 第3列被固定到左側
  2. 我希望能夠移動/重新排列通過拖拽他們的其他非固定列

我能夠實現這兩個。

但是,我無法停止/阻止固定列的拖放。 如何防止某些列被拖放?

回答

0

在app.js,嘗試添加enableColumnMoving:假到columnDefs像這樣:

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.moveColumns']); 

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) { 
    $scope.gridOptions = {}; 

$scope.gridOptions.columnDefs = [ 
{ name:'id', width:50, pinnedLeft:true, enableColumnMoving:false }, 
{ name:'name', width:100, pinnedLeft:true, enableColumnMoving:false }, 
{ name:'age', width:100, pinnedLeft:true, enableColumnMoving:false }, 
{ name:'company', width:100}, 
{ name:'address.street', width:150 }, 
{ name:'address.city', width:150 }, 
{ name:'address.state', width:50 }, 
{ name:'address.zip', width:50 }, 
{ name:'email', width:100 }, 
{ name:'phone', width:200 }, 
{ name:'about', width:300 }, 
{ name:'friends[0].name', displayName:'1st friend', width:150 }, 
{ name:'friends[1].name', displayName:'2nd friend', width:150 }, 
{ name:'friends[2].name', displayName:'3rd friend', width:150 }, 
];  

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
.success(function(data) { 
    $scope.gridOptions.data = data; 
}); 
}]); 
+0

這裏是Plunker [鏈接](http://plnkr.co/edit/C4awJEATlm3JrqZ03Gwf?p=preview ) – dovelce

+0

酷!這正是我所期待的。 :) –