以下是按我的需求修改的 简单的demo 可以自己扩展
HTML：
<!DOCTYPE html> <html class="no-js" ng-app="test"><!--<![endif]--> <head> <meta charset="utf-8"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <title></title> <meta content="width=device-width" name="viewport"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" /> <link href="css/ui-grid.min.css" rel="stylesheet"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/angular.js"></script> <script src="js/ui-grid.min.js"></script> <style> body { padding: 60px; /*min-height: 600px;*/ } .grid { width: 1200px; /*height: 5000px;*/ margin:0 auto; } .placeholder { height: 50%; width: 50%; border: 3px solid black; background: #ccc; } .nav-ul{ overflow: hidden; zoom:1; } .nav-ul li{ float: left; list-style: none; margin-right: 15px; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */ -o-user-select: none; user-select: none; } .nav-ul li a{ cursor: pointer!important; } .nav-ul li p.active{ color:red; } .nav-ul li input[type='checkbox']{ position: relative; top: 1px; } </style> </head> <body ng-controller="Main"> <!-- <h1>Test</h1> --> <!-- <div class="row main"> --> <h2>Grid{{gridName}} </h2> <!--<ul class="nav-ul">--> <!--<li>address.state <a ng-click="addColumn('address.state',150)">[+]</a> <a ng-click="removeColumn('address.state')">[-]</a></li>--> <!--<li>address.zip <a ng-click="addColumn('address.zip',150)">[+]</a></li>--> <!--<li>company <a ng-click="addColumn('company',150)">[+]</a></li>--> <!--<li>email <a ng-click="addColumn('email',100)">[+]</a></li>--> <!--<li>phone <a ng-click="addColumn('phone',100)">[+]</a></li>--> <!--<li>about <a ng-click="addColumn('about',100)">[+]</a></li>--> <!--</ul>--> <!--<ul class="nav-ul">--> <!--<li ng-repeat="col in baseData">--> <!--{{col.name}} <a ng-click="addColumn(col.name,col.width)">[+]</a> <a ng-click="removeColumn(col.name)">[-]</a>--> <!--</li>--> <!--</ul>--> <!--<ul class="nav-ul">--> <!--<li ng-repeat="col in baseData">--> <!--<p class="{{col.name}} active">{{col.name}} <a ng-click="addColumn(col.name,col.width,col.key)">[+]</a> <a ng-click="removeColumn(col.name)">[-]</a></p>--> <!--</li>--> <!--</ul>--> <ul class="nav-ul"> <li ng-repeat="col in baseData"> <label><input ng-click="changeColumn(col.name,col.displayName,col.width,col.key,$event)" type="checkbox" checked/> {{col.displayName}}</label> </li> </ul> <!--<div ui-grid="gridOptions" class="grid" ui-grid-resize-columns></div>--> <div ui-grid="gridOptions" class="grid" ui-grid-selection ui-grid-edit ui-grid-importer ui-grid-exporter></div> <!-- <div class="placeholder"> --> <!-- </div> --> <br> <br> <style> .grid1467082016751 .ui-grid-render-container-body .ui-grid-viewport{ height: inherit!important; } </style> <script> var iArray = [ { name:'id',displayName:"编号", 50 , key:1}, { name:'name',displayName:"姓名", 100, pinnedLeft:true , key:2}, { name:'age',displayName:"年龄", 100, pinnedRight:true, key:3 }, { name:'address.street',displayName:"街道", 150 , key:4 }, { name:'address.city',displayName:"城市", 150, key:5 }, { name:'address.state',displayName:"社区", 150 , key:6}, { name:'address.zip',displayName:"详细地址", 150, key:7 }, { name:'company',displayName:"公司名称", 120 , key:8}, { name:'email',displayName:"邮箱", 100, key:9}, { name:'phone',displayName:"手机", 200 , key:10}, { name:'about',displayName:"关于", 300 , key:11} ]; // iArray.sort(function(a,b){ // if(a.key> b.key) return 1; // if(a.key> b.key) return -1; // return 0; // }) var iArray2 = iArray.concat();//复制数组1array1.concat() var app = angular.module('test', ['ui.grid', 'ui.grid.pinning', 'ui.grid.resizeColumns']); app.controller('Main', function($scope, $http) { $scope.gridOptions = {}; $scope.gridOptions.columnDefs = iArray2; $scope.baseData = iArray; $scope.gridName = "员工信息"; $scope.datas = null; var dataName = null; $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json',{params: {pageSize:10,pageNo:3} }).success(function(data) { $scope.datas = data; dataName = data; $scope.gridOptions.data = dataName; }); $scope.getFields = function () { var data = $scope.$parent[dataName]; if (data && data.length > 0) { var keys = _.keys(data[0]); return _.reject(keys, function (key) { return _.find($scope.columnDefs, function (col) { return col.field === key; }); }); } return []; } $scope.changeColumn = function (field,displayName,width,key,$event){ if( $($event.target).prop("checked") ){ $scope.addColumn(field,displayName,width,key); }else{ $scope.removeColumn(field); } return false; } $scope.addColumn = function (field,displayName,width,key) { var index = $scope.getIndex($scope.gridOptions.columnDefs, field); var index2 = $scope.getIndex($scope.baseData, field); if (index == -1) { var oEle = document.getElementsByClassName(field); $(oEle).addClass("active"); // $scope.gridOptions.columnDefs.splice(index2,0,{ // field: field, // displayName: field, // width, // class: "active" // }); $scope.gridOptions.columnDefs.push({ field: field, displayName: displayName, width, key: key }); $scope.gridOptions.columnDefs.sort(function(a,b){ if(a.key> b.key) return 1; if(a.key< b.key) return -1; return 0; }) } } $scope.removeColumn = function (col) { var index = $scope.getIndex($scope.gridOptions.columnDefs,col,"active2"); if( index!=-1 ) { var oEle = document.getElementsByClassName($scope.gridOptions.columnDefs[index].name); $(oEle).removeClass("active"); $scope.gridOptions.columnDefs.splice(index,1); }; } $scope.getIndex = function(arr,val){ var index_ = -1; $(arr).each(function(i,o){ if( arr[i].name == val ){ index_ = i; } }) return index_; } $scope.$watch('gridOptions', function (data) { if (data.length > 0 && $scope.columnDefs.length == 0) { $scope.getFields().forEach(function (f) { $scope.addColumn(f); }); } }); $("h2 a").each(function(i,o){ $(this).click(function(){ if(i==0){ $scope.gridOptions.columnDefs = iArray2; $scope.$apply(); }else{ $scope.gridOptions.columnDefs = iArray; $scope.$apply(); } }) }) }); </script> </body> </html>
整个资源放在了百度网盘 需要的下载：http://pan.baidu.com/s/1eSFfksi