以下是按我的需求修改的 简单的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. java异常类结构图

    通常,Java的异常(包括Exception和Error)分为 可查的异常(checked exceptions)和不可查的异常(unchecked exceptions) . 可查异常(编译器要求必 ...

  2. 2016HUAS暑假集训训练题 G - Oil Deposits

    Description The GeoSurvComp geologic survey company is responsible for detecting underground oil dep ...

  3. 使用Sublime Text 直接运行Quick-cocos2d-x 项目

    一.新建一个编译系统 { "cmd": "D:/WorkSoftWare/Quick/quick-cocos2d-x-3.3rc0/quick/samples/Runni ...

  4. IOS网络第二天 - 03-JSON显示数据，调用本地视频播放，数据转模型

    ********HMVideosViewController.m #import "HMVideosViewController.h" #import "MBProgre ...

  5. git命令详解(转)

    Git使用 git branch 查看本地所有分支 git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支 git branch -r 查看远程所有 ...

  6. ajax+ashx

    eg: $('.setIsEnableClosed').click(function(){ var id=$(id).attr("name"); var isChecked=$(t ...

  7. xmlunit

    一个比较方便但也是有点坑的工具. 它能把<struct><int>3</int><boolean>false</boolean></s ...

  8. jsp中frameset frame不显示页面

    今天玩frameset 的时候,无论我怎么改,页面死活不显示出来,网上找了很多答案,各种复制都不行,后来终于找到答案了,在使用frameset 的时候,不能将frameset 的内容放在body标签里 ...

  9. lua MVC框架 Orbit初探

    介绍 http://keplerproject.github.io/orbit/ Orbit是lua语言版本的MVC框架. 此框架完全抛弃CGILUA的脚本模型, 支持的应用, 每个应用可以卸载一个单 ...

  10. sql server 中删除表中数据truncate和delete的区别(转载自.net学习网)

    我们都知道truncate table可以用来删除整个表的内容,它与delete后面不跟where条件的效果是一样.但除此之外,我们还清楚它们之间有其它的区别吗?本章我们将一起讨论truncate与d ...