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}} <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
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全局选 ...
随机推荐
- centos下安装php后连接不上mysql
安装完php后需要安装php的扩展比如: 安装php的扩展yum install php-mysql php-gd php-imap php-ldap php-odbc php-pear php-xm ...
- 【HDU1914 The Stable Marriage Problem】稳定婚姻问题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1914 题目大意:问题大概是这样:有一个社团里有n个女生和n个男生,每位女生按照她的偏爱程度将男生排序, ...
- 在windows7下安装CentOS
需要用到的软件 EasyBCD 设置索引菜单 PA5.2_Portable 分区助手 WinGrub 查看硬盘代号 1.使用分区助手,腾出至少4GB的空间,并格式化为fat32格式,将CentOS的I ...
- Web前端开发基础 第四课（CSS小技巧）
水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...
- Empire C：Basic 2
作为人与计算机沟通的媒介,C语言给我们呈现了:printf.scanf.以及缓冲区. 1.printf("%d",a) %d:d是decimal base(十进制)的开头字母,意思 ...
- Apache Spark技术实战之7 -- CassandraRDD高并发数据读取实现剖析
未经本人同意,严禁转载,徽沪一郎. 概要 本文就 spark-cassandra-connector 的一些实现细节进行探讨,主要集中于如何快速将大量的数据从cassandra 中读取到本地内存或磁盘 ...
- js弹窗
常用人JS弹窗,lhgDialog 4.20
- eclipse工程加入jquery.min.js报错：missing semicolon
1,注释修改项目目录下的.project文件 <?xml version="1.0" encoding="UTF-8"?> <projectD ...
- WordPress学习
1,WordPress安装 2,WordPress前台与后台 3,WordPress Post&Page. 4,WordPress多媒体 5,WordPress插件管理 上面5条已经掌握,明天 ...
- 关于Action快捷键和小键盘的问题
在使用全尺寸键盘的时候 键盘右边都有一排小键盘 但是这个小键盘的数字键值和普通键盘的数字键值是不一样的 在ANSI码里 标准数字键值是$30..$39, 而小键盘的键值是$60..$69 这样问题就来 ...