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全局选 ...
随机推荐
- bind绑定事件，摁回车键提交查询，点击查询也可以提交查询
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- window svn backup.bat
help command /? call /? %cd% 可以用在批处理文件中,也可以用在命令行中:展开后,是驱动器盘符:+当前目录,如在dos窗口中进入c:\dir目录下面, %0代指批处理文件自身 ...
- php课程---练习连接数据库及增删改
方式一:用php中的内置函数来做 (适用于5.1之前的版本) //1.生成连接 $conn = mysql_connect("localhost","root" ...
- php读取文件里面的数组做为配置文件
可能大家也都见过很多开源的产品,大多它们的配置文件都存放在一个单独的文件中,而这个文件里只存放了一个数组,其实这里运用了一个PHP的小技巧,就是可以将文件包含进来,并且赋值给一个变量,这个变量就具有了 ...
- Boyer-Moore algorithm
http://www-igm.univ-mlv.fr/~lecroq/string/node14.html Main features performs the comparisons from ri ...
- CentOS7安装mysql5.6.23
============安装glibc版本============== 一.下载glibc版本的Mysql mysql-advanced-5.6.23-linux-glibc2.5-x86_64.zi ...
- C#编程之委托与事件四(二)【转】
C#编程之委托与事件(二) 我在上一篇文章(C#编程之委托与事件(一) )中通过示例结合的方法介绍了委托,在本文中,我同样以代码示例的方式来介绍C#里的事件机制. 二.事件 1.了解概 ...
- Java 创建过滤器 解析xml文件
今天写了一个过滤器demo,现在是解析actions.xml文件,得到action中的业务规则:不需要导入任何jar包 ActionFilter过滤器类: package accp.com.xh.ut ...
- rtl8723 2个 wlan
安装8723bs.ko模块之后,生成了wlan0和wlan1,MAC地址一样. http://blog.csdn.net/djman007/article/details/46731335 解决方法: ...
- 错误：Value '0000-00-00 00:00:00' can not be represented as java.sql.Timestamp;的解决
问题: 代码中查询MySQL的结果集时报错,提示Value '0000-00-00 00:00:00' can not be represented as java.sql.Timestamp;刚开始 ...