以下是按我的需求修改的 简单的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:"编号", width:50 , key:1},
{ name:'name',displayName:"姓名", width:100, pinnedLeft:true , key:2},
{ name:'age',displayName:"年龄", width:100, pinnedRight:true, key:3 },
{ name:'address.street',displayName:"街道", width:150 , key:4 },
{ name:'address.city',displayName:"城市", width:150, key:5 },
{ name:'address.state',displayName:"社区", width:150 , key:6},
{ name:'address.zip',displayName:"详细地址", width:150, key:7 },
{ name:'company',displayName:"公司名称", width:120 , key:8},
{ name:'email',displayName:"邮箱", width:100, key:9},
{ name:'phone',displayName:"手机", width:200 , key:10},
{ name:'about',displayName:"关于", width: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: width,
// class: "active"
// });
$scope.gridOptions.columnDefs.push({
field: field,
displayName: displayName,
width: 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