angularJS ng-grid 配置

以下是按我的需求修改的简单的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 配置的更多相关文章

AngularJS开发相关配置
安装步骤: 1. Node.js,下载地址:https://nodejs.org/en/ 2. Git 下载地址:https://git-scm.com/download/ 3. Python (需为 ...
ice grid配置使用第二篇------实际使用
一首先,启动ice grid 1 修改配置文件 node.cfg,appication.xml 修改registry.cfg 配置注册表信息: IceGrid.Registry.Client. ...
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 ...
part 4 AngularJS ng src directive
Part 15 AngularJS ng init directive
The ng-init directive allows you to evaluate an expression in the current scope. In the following e ...
【转】Flume(NG)架构设计要点及配置实践
Flume(NG)架构设计要点及配置实践 Flume NG是一个分布式.可靠.可用的系统,它能够将不同数据源的海量日志数据进行高效收集.聚合.移动,最后存储到一个中心化数据存储系统中.由原来的Fl ...
AngularJS实现单页应用的原理——路由(Route)
AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...
AngularJS进阶学习
参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...
【翻译】ExtJS vs AngularJS
原文:ExtJS vs AngularJS ExtJS和AngularJS是两个行业内领先的富界面开发框架.TechFerry有机会使用Ext JS和Angular JS来开发多个富界面的单页面应用程 ...
Flume NG Getting Started（Flume NG 新手入门指南）
Flume NG Getting Started(Flume NG 新手入门指南)翻译新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建配置 flume-ng全局选 ...

随机推荐

vue 一些开发姿势
.vue : <template></template><script></script> .js :import Vue from 'vue'
wa~哭笑天使
#include <stdio.h> #define M 301 int r[M], c[M]; int main() { int k, m, n, i, j, sum, flag, t; ...
DS Tree 已知先序、中序 => 建树 => 求后序
参考:二叉树--前序和中序得到后序思路历程: 在最初敲的时候,经常会弄混preorder和midorder的元素位置.大体的思路就是在preorder中找到根节点(根节点在序列的左边),然后在mid ...
Flink - Checkpoint
Flink在流上最大的特点,就是引入全局snapshot, CheckpointCoordinator 做snapshot的核心组件为, CheckpointCoordinator /** * T ...
switch多分支语句
1.switch多分支语句的语法 switch(表达式){ case 常量值:要执行的语句; break; case 常量值:要执行的语句; break; case 常量值:要执行的语句; break ...
frameset
改变UIButton 图片和文字的位置
//设置字体和图片之间的间距 _btnLeft.titleEdgeInsets = UIEdgeInsetsMake(0, -_btnLeft.imageView.frame.size.width, ...
Linux Samba服务器配置
Linux系统默认已经安装了Samba,但是没有安装Samba服务: 1,先查看安装情况:rpm -qa|grep samba 根据系统的安装情况选择下载或者通过光驱安装所缺的rpm包. 我的安装情况 ...
PowerDesigner连接mysql逆向生成pdm
常用的建模工具有:PowerDesigner和ERWin,后者已快被淘汰,但前者依然活跃.相信大家都遇到过项目组已经运营很很久,但是竟然连一个ER图都没有,今天就讲解一下PowerDesigner连接 ...
HandlerThread 用法
HandlerThread最大的优势在于引入MessageQueue概念,可以进行多任务队列管理. HandlerThread背后只有一个线程,所以任务是串行依次执行的.串行相对于并行来说更安全,各任 ...

angularJS ng-grid 配置

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

随机推荐

热门专题