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全局选 ...
随机推荐
- 微信APP支付Java后端回调处理
package com.gaoxiao.framework.controller.gaojia; import com.gaoxiao.framework.commonfiles.entity.Sta ...
- Mysql的时间和日期
datetime 占8个字节 可以显示日期同时显示时间 yyyy-mm-dd hh:mm:ss 显示范围 1000-01-01 00:00:00----9999-12-31 23:59 ...
- cms修改栏目单页样式错位调整
if (dt.Rows[0]["ClassTemplet"].ToString().Trim() == "") { rows_key.Style.Value = ...
- c++之map
题目描述: 哈利波特在魔法学校的必修课之一就是学习魔咒.据说魔法世界有100000种不同的魔咒,哈利很难全部记住,但是为了对抗强敌,他必须在危急时刻能够调用任何一个需要的魔咒,所以他需要你的帮 ...
- Android课程---时间日期对话框
activity_ui2.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...
- 预防 Session 劫持与 Session 固定攻击
一.预防 Session 劫持 要求: ① 只允许通过 Cookie 来传递 SessionID ② 生成一个由 URL 传递的唯一标识作为 Session 的标记(token) 当请求同时包含有效的 ...
- jquery 判断时间
$("#gjlycon1").blur(function () { var v = $(this).val(); v ...
- Multi-level Multi-select plugin
Property file: Country[tab]City United States[tab]San Francisco United States[tab]Chicago Mexico[tab ...
- spring 以Ant Build方式运行build.xml文件，报warning: 'includeantruntime' was not set, defaulting to build.sysclasspath=last; set to false for repeatable builds 的解决办法
Buildfile: F:\experience\spring_pdf\sourcecode\example1\build.xml compile: [javac] F:\experience\spr ...
- js日期字符串增加天数的函数
//日期加天数的方法 //dataStr日期字符串 //dayCount 要增加的天数 //return 增加n天后的日期字符串 function dateAddDays(dataStr,dayCou ...