以下是按我的需求修改的 简单的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}}&nbsp;<a ng-click="addColumn(col.name,col.width)">[+]</a>&nbsp;<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}}&nbsp;<a ng-click="addColumn(col.name,col.width,col.key)">[+]</a>&nbsp;<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/>&nbsp;{{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

angularJS ng-grid 配置的更多相关文章

  1. AngularJS开发相关配置

    安装步骤: 1. Node.js,下载地址:https://nodejs.org/en/ 2. Git 下载地址:https://git-scm.com/download/ 3. Python (需为 ...

  2. ice grid配置使用第二篇------实际使用

    一    首先,启动ice grid 1 修改配置文件 node.cfg,appication.xml 修改registry.cfg 配置注册表信息: IceGrid.Registry.Client. ...

  3. Part 6 AngularJS ng repeat directive

    ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...

  4. part 4 AngularJS ng src directive

  5. Part 15 AngularJS ng init directive

    The ng-init directive allows you to evaluate an expression in the current scope.  In the following e ...

  6. 【转】Flume(NG)架构设计要点及配置实践

    Flume(NG)架构设计要点及配置实践   Flume NG是一个分布式.可靠.可用的系统,它能够将不同数据源的海量日志数据进行高效收集.聚合.移动,最后存储到一个中心化数据存储系统中.由原来的Fl ...

  7. AngularJS实现单页应用的原理——路由(Route)

    AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...

  8. AngularJS进阶学习

    参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...

  9. 【翻译】ExtJS vs AngularJS

    原文:ExtJS vs AngularJS ExtJS和AngularJS是两个行业内领先的富界面开发框架.TechFerry有机会使用Ext JS和Angular JS来开发多个富界面的单页面应用程 ...

  10. Flume NG Getting Started（Flume NG 新手入门指南）

    Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...

随机推荐

  1. AspCms标签手册

    网站通用标签 基本标签 {aspcms:sitepath} 网站终极目录(可放在二级目录,其它语言则在三级目录) {aspcms:languagepath} 语言目录 {aspcms:siteurl} ...

  2. ajaxfileupload.js

    jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' ...

  3. php extension memcache and memcached module on centos6

    环境 centos6 php5.6 nginx 1.8 防火墙均关闭 我在这里简单描述一下过程 #install nginxyum -y install pcre pcre-devel openssl ...

  4. subprocess模块还提供了很多方便的方法来使得执行 shell 命令

    现在你可以看到它正常地处理了转义. 注意 实际上你也可以在shell=False那里直接使用一个单独的字符串作为参数, 但是它必须是命令程序本身,这种做法和在一个列表中定义一个args没什么区别.而如 ...

  5. viewPager的基本使用

    viewPager是android扩展包v4中的类,这个类可以使用户左右切换当前的view. 特性: 1.viewPager直接继承了viewGroup类,所以它是一个容器类,可以在其中添加其它的vi ...

  6. 树莓派文档翻译 - 使用 - GPIO: 树莓派A和B

    https://www.raspberrypi.org/documentation/usage/gpio/README.md 2016/6/25 GPIO: 树莓派A和B ##介绍GPIO和在树莓派上 ...

  7. Eclipse new server : Cancnot create a server using the selected type

    1.退出 eclipse 2.到[工程目录下]/.metadata/.plugins/org.eclipse.core.runtime 3.把org.eclipse.wst.server.core.p ...

  8. Example Microprocessor Register Organizations

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION

  9. Stream Processing for Everyone with SQL and Apache Flink

    Where did we come from? With the 0.9.0-milestone1 release, Apache Flink added an API to process rela ...

  10. ArrayBlockingQueue跟LinkedBlockingQueue的区别

    .队列中的锁的实现不同 ArrayBlockingQueue中的锁是没有分离的,即生产和消费用的是同一个锁: LinkedBlockingQueue中的锁是分离的,即生产用的是putLock,消费是t ...