以下是按我的需求修改的 简单的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. hdu Virtual Friends

    这题是一个很简单额并查集的题目,首先第一步是要用map将字符串映射为整型,这样方便后面的处理,然后就是用一个rank[]数组来记录每个朋友圈的人数.之后就是简单的并查集操作了. 这里给出一组测试案例: ...

  2. 繁简体 互转 js

    html: <script type="text/javascript" src="/js/s2t.js"></script><s ...

  3. Android studio快捷键总结

    功能 快捷键   功能 快捷键 格式化代码 command + alt + L   运行程序到设备 Ctrl + R 导包.修正 alt + enter   运行Debug到设备 Ctrl + D 复 ...

  4. Spring的quartz定时器同一时刻重复执行二次的问题解决

    最近用Spring的quartz定时器的时候,发现到时间后,任务总是重复执行两次,在tomcat或jboss下都如此. 打印出他们的hashcode,发现是不一样的,也就是说,在web容器启动的时候, ...

  5. ss命令

    看到好的博文,所以记录一下.本文出自转载. ss是Socket Statistics的缩写.顾名思义,ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.但ss的优势在于它 ...

  6. python 字符串与数字之间的转换

    1.数字转字符串 i = 123 str = ‘%d’ %i str即为转换成的字符串 2.字符串转换成数字: import string tt='555' ts=string.atoi(tt) ts ...

  7. php课程---文件操作及文件上传的代码总结

    php里面文件包含目录和文件两种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  8. oracle 11g 通过在线重定义方式修改表结构

    今天因为要对一套数据库的数据抽取进行io优化,希望通过修改表结构将抽取io降下来,因为抽取只针对标签HAVE_FLAG为"0"的值进行抽取,抽取之后更新HAVE_FLAG为其他值, ...

  9. Mac OS X 背后的故事

    Mac OS X 背后的故事 作者: 王越  来源: <程序员>  发布时间: 2013-01-22 10:55  阅读: 25840 次  推荐: 49   原文链接   [收藏]   ...

  10. c#组元(Tuple)的使用

    组元(Tuple)是C# 4.0引入的一个新特性,可以在.NET Framework 4.0或更高版本中使用.组元使用泛型来简化类的定义,多用于方法的返回值.在函数需要返回多个类型的时候,就不必使用o ...